CODEWITHSUNDEEP
flutterdartflutter-layout
Ben
Ben

Reputation: 41

Centring a Column inside another Column in Flutter

I'm currently writing my first Flutter App and I got a little stuck here. Basically what I'm trying to do is display an image at the top of the screen (with 100px top-margin) and display a Column which contains some Text and a Button on the centre of the screen. I tried moving mainAxisAlignment crossAxisAlignment into the outer Column Widget but that centres everything.

Here's my code:

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: Column(
      children: [
        Opacity(
          opacity: 0.25,
          child: Container(
            child: Image.asset('assets/images/logo.png'),
            margin: EdgeInsets.only(top: 100),
            width: 75,
          ),
        ),

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Please enter your first name:'),
            TextButton(onPressed: () {}, child: Text('Submit'))
          ],
        )
      ],
    ),
  ),
);

Upvotes: 3

Views: 12135

Answers (5)

raladdin
raladdin

Reputation: 169

You actually only need to wrap the second column in an Expanded widget, "so that the child fills the available space", that's all:

Column(
    children: [
        Expanded(
            child: Column(
                children: [],
            ),
        )],
),

Upvotes: 3

Gajendra Pandeya
Gajendra Pandeya

Reputation: 106

In order to center align your second column,

  1. Make sure MainAxisAlignment of your Second Column is MainAxisAlignment.center
  2. Wrap your second column inside a Align Widget
  3. Now, wrap your Align widget with Expanded widget.

This should solve your issue.

Check this refrence.

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const SizedBox(
        height: 18.0,
      ),
      const Padding(
        padding: EdgeInsets.only(left: 16.0),
        child: Text(
          'Recent Search(s)',
          style: TextStyle(
              color: Colors.black,
              fontSize: 16.0,
              fontWeight: FontWeight.bold),
        ),
      ),
      Expanded(
        child: Align(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                MdiIcons.magnify,
                color: Colors.grey.shade600,
                size: 72.0,
              ),
              const SizedBox(
                height: 8.0,
              ),
              Text(
                'Search for places',
                style: TextStyle(
                    fontSize: 14.0,
                    color: Colors.grey.shade600,
                    fontWeight: FontWeight.w600),
              ),
              Text(
                'You haven\'t serached for any items yet...',
                style: TextStyle(
                    fontSize: 12.0,
                    color: Colors.grey.shade700,
                    fontWeight: FontWeight.w500),
              ),
              Text(
                'Try now - we will help you!',
                style: TextStyle(
                    fontSize: 12.0,
                    color: Colors.grey.shade700,
                    fontWeight: FontWeight.w500),
              )
            ],
          ),
        ),
      )
    ],

Upvotes: 0

Yash Thummar
Yash Thummar

Reputation: 176

you have to use mainAxisAlignment property to set MainAxisAlignment.center.

Upvotes: 0

Yash Thummar
Yash Thummar

Reputation: 176

import 'package:flutter/material.dart';

void main() {
  runApp(
  MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 200,
            width: 200,
            color: Colors.pink,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
            ),
          ),
        ],
      ),
    ),
  ),
),
);
}

Upvotes: 0

Alfredo González
Alfredo González

Reputation: 64

try, wrap your second Column inside a Center widget.

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: Column(
      children: [
        Opacity(
          opacity: 0.25,
          child: Container(
            child: Image.asset('assets/images/logo.png'),
            margin: EdgeInsets.only(top: 100),
            width: 75,
          ),
        ),

        Center(
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Please enter your first name:'),
            TextButton(onPressed: () {}, child: Text('Submit'))
          ],
        )
      ],
     ),
    ),
  ),
);

If this doesn't work you could also wrap it in an Align widget and add the alignment property to it.

Align(
            alignment: Alignment.center,
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Please enter your first name:'),
              TextButton(onPressed: () {}, child: Text('Submit'))
            ],
          ),
      ),

Upvotes: 1

Related Questions