CODEWITHSUNDEEP
flutterflutter-layout
ddonche
ddonche

Reputation: 1065

Adding Column to bottom appbar makes it take full screen

I have a bottom app bar with two icons. I would like to add text below the icons, so I figured I would wrap my iconbuttons in a column. When I do this it causes the bottom appbar to take up the entire screen. How can I fix this? Here is the code that causes the issue. It works as expected without the columns.

bottomNavigationBar: BottomAppBar(
    color: Colors.blueGrey,
    shape: CircularNotchedRectangle(),
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Column(
          children: [
            IconButton(
              icon: Icon(Icons.note_add),
              color: Colors.white,
              // tooltip: 'Add Note',
              onPressed: () => _startAddNewNote(context),
            ),
            Text('Add Note'),
          ],
        ),
        Column(
          children: [
            IconButton(
              icon: Icon(Icons.image),
              color: Colors.white,
              // tooltip: 'Open Image Clue',
              onPressed: () => _startShowImageClue(context),
            ),
            Text('Open Image Clue'),
          ],
        ),
      ],
    ),
  ),

Before I add the column.

without column

This is what the column does to the screen.

with column

Upvotes: 1

Views: 1238

Answers (1)

meditat
meditat

Reputation: 1165

Changing the size of Column to MainAxisSize.min will do the work

Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.note_add),
          color: Colors.white,
          // tooltip: 'Add Note',
          onPressed: () {},
        ),
        Text('Add Note'),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.image),
          color: Colors.white,
          // tooltip: 'Open Image Clue',
          onPressed: () {},
        ),
        Text('Open Image Clue'),
      ],
    ),

And also there is pre-built widget for making BottomNavigationBarItem, you can use it like

BottomNavigationBarItem(icon:IconButton(
          icon: Icon(Icons.image),
          color: Colors.white,
          // tooltip: 'Open Image Clue',
          onPressed: () {},
        ),label:"Open Image Clue",
)

Suggesting to use this, because it has some text scaling implementations

Upvotes: 4

Related Questions