Completely center Widget in Flutter

Issue

I started to develop in Flutter recently and I am having difficulties in centralizing a Widget completely in the available space of View.

This is how it looks:

How it looks

And here’s what I want to achieve:

What I want to achieve

And here’s my code:

        LayoutBuilder(builder:
            (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Column(children: [
                    NavHeader("Deposit"),
                    BalanceHeader(widget.usd),
                  ]),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "How much do you want deposit?",
                        style:( 
                          ...
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        width: width * 0.4,
                        margin: EdgeInsets.only(top: 10),
                        child: Row(
                          ...
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        }),
        bottomNavigationBar: BottomAppBar(
          ...
        ),
      ),
    );
  }

Solution

By using MainAxisSize.min The height of the Column will be according to the combined height of its children and incoming height from the parent will be ignored. That means your column height has shrinked to its children.

There is you can use MainAxisSize.max instead of MainAxisSize.min to max height of column. And also you have to use mainAxisAlignment: MainAxisAlignment.center for aligning childrens to center of column.

Your Second Column

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      "How much do you want deposit?",
         style:( 
           ...
         ),
       ),
     Container(
       alignment: Alignment.center,
       width: width * 0.4,
       margin: EdgeInsets.only(top: 10),
       child: Row(
         ...
       ),
     ),
   ],
 ),

Edited Column

Column(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center
  children: [
    Text(
      "How much do you want deposit?",
         style:( 
           ...
         ),
       ),
     Container(
       alignment: Alignment.center,
       width: width * 0.4,
       margin: EdgeInsets.only(top: 10),
       child: Row(
         ...
       ),
     ),
   ],
 ),

Answered By – ijas

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.