CODEWITHSUNDEEP
flutter
SAM
SAM

Reputation: 1121

How to center Column widget horizontally in Flutter

I was learning Flutter and wanted to learn to how structure layout. Thus, I decided to use column widget and wanted to ask how to center horizontally column widget having this code: import 

'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.teal,
            body: SafeArea(
                child: Column(

              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('images/avatar.jpeg'),
                ),
                Text('SAM',
                    style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 50.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
                Text('Flutter developer',
                    style: TextStyle(
                        // fontFamily: 'Pacifico',
                        fontSize: 30.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold))
              ],
            ))),
      ),
    );
  }
}

Upvotes: 6

Views: 13541

Answers (4)

Ravish Garg
Ravish Garg

Reputation: 11

if you want to align widgets in center (vertically and horizontally), you can use

Center(
 child: Column(
 children: <Widget>[]
 )

if you want to align horizontally but at the top of the screen then

Column(
    crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area

    children: [
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [Text("test data")],
      )
    ],
  )

worked for me.

And if you want to center vertically and at the beginning of the screen then

Row(
    crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [Text("test data")],
      )
    ],

works as well.

Upvotes: 1

Shikhar Singh
Shikhar Singh

Reputation: 112

Case 1: If you want Column to be center aligned:

//First Way: Use Column Widget inside Center Widget

    Center(
     child: Column(
     children: <Widget>[]
     )

//Second Way: Use Container Widget and set alignment to center

 Container(
   alignment: Alignment.center,
   child: Column(
     children: <Widget>[]
                )
          )

Case 2: If you want Column children to be center aligned

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[]
)

Upvotes: 1

timilehinjegede
timilehinjegede

Reputation: 14033

You can do this by setting the Column crossAxisAlignment property to CrossAxisAlignment.center

Try wrapping your Column in a Container widget and give it a width property.

Check the code below: It works perfectly:

'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.teal,
            body: SafeArea(
                Container(
                // set the height property to take the screen width
                width: MediaQuery.of(context).size.width,
                child: Column(
              // set the crossAxisAlignment property to center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('images/avatar.jpeg'),
                ),
                Text('SAM',
                    style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 50.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
                Text('Flutter developer',
                    style: TextStyle(
                        // fontFamily: 'Pacifico',
                        fontSize: 30.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold))
              ],
            ))),
      ),
    ),
    );
  }
}

I hope this helps.

Upvotes: 4

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

The problem is that your screen is not tacking whole width, so it is centre widget, whatever sized is used.

To used whole width you can provide container size to max size, which will force widget to use full width and it will centre widget.

MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.teal,
          body: SafeArea(
              child: Container(
            width: MediaQuery.of(context).size.width, // added
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('assets/images/crown 1.png'),
                ),
                Text('SAM',
                    style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 50.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
                Text('Flutter developer',
                    style: TextStyle(
                        // fontFamily: 'Pacifico',
                        fontSize: 30.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold))
              ],
            ),
          ))),
    );

Upvotes: 2

Related Questions