How to center a Widget vertically in PreferredSizeWidget

user_6800006 0
Viewed 2265

I want to center a Text vertically in the bottom: Sektion of my AppBar.

Some things I allready tried are:
1. wrap the Text in a Center(...) Widget
2. wrap the Text in a Column(...) and use crossAxisAlignment: CrossAxisAlignment.center

The bottom: Sektion is a PreferredSizeWidget and does not provide anything to format a Widget. 

appBar: new AppBar(
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            print("Settings Icon");
          },
        ),
      ],
      bottom: PreferredSize(
        preferredSize: Size(130.0, 130.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Text(
              'N/A',      
           ),
          ],
        ),
      ),
    ),

I have have found this issue here: https://github.com/flutter/flutter/issues/16262 where the Text was centered but the reproduce code did not worked out for me.

The Text should me somewhere like the red line is (see Image)

AppBar

Thank you!

dart flutter
1 Answers

PreferredSizeWidget does not impose a size constraint on its child, so you must wrap the Column in a widget with defined height in order to add alignment.

Also, mainAxisAlignment should be used, since this is the vertical alignment in a Column.

  bottom: PreferredSize(
    preferredSize: Size(130.0, 130.0),
    child: Container(
      height: 130,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(
            'N/A',      
        ),
        ],
      ),
    ),
  )
user_811080
Related