Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a Widget vertically in PreferredSizeWidget

Tags:

flutter

dart

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!

like image 447
afcode Avatar asked Dec 30 '18 13:12

afcode


People also ask

How do I center a widget in ListView?

The solution is to place a Container as the only children in the ListView , and give it a minimum height equal to the available space for the height (Use LayoutBuilder to measure the maximum height for the widget). Then as the Container 's child, you can either place a Center or Column (with MainAxisAlignment.

How do you center an item in container flutter?

How do I center Text in a container in flutter? Flutter – Center Align Text in Text Widget To center align the text in a Text widget, provide textAlign property with value TextAlign. center .


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',      
        ),
        ],
      ),
    ),
  )
like image 87
Vinicius Pinto Avatar answered Sep 28 '22 10:09

Vinicius Pinto