Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: How to add a column widget inside a bottom navigation bar

I've tried the following and got the out, but the body went blank. Is there any way to add a coloumn or a listview inside a bottom navigation bar

 Column(
    mainAxisAlignment:MainAxisAlignment.end,
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
              //button1
         ),
          Expanded(
              //button2
               ),
          Expanded(
             //button3)
      ),
      Row(
        children: <Widget>[
          Expanded(
            //button4
          ),
          Expanded(
            //button5)
        ],
      )
    ],
  ),
like image 264
Sunil sam Avatar asked Nov 23 '19 05:11

Sunil sam


People also ask

How do you customize the bottom navigation bar in flutter?

Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.

How do you make a column widget in flutter?

If we want to make a scrollable list of column widgets, we need to use the ListView Widget. We can also control how a column widget aligns its children using the property mainAxisAlignment and crossAxisAlignment. The column's cross-axis will run horizontally, and the main axis will run vertically.

How to create a bottom navigation bar in flutter?

We can create a bottom navigation bar in flutter by calling its constructor and providing required properties. The bottom navigation bar has one required property items. This property is used to add items to the bottom navigation bar. Each item will be a BottomNavigationBarItem widget.

How does flutter place the children of a column widget?

To understand how Flutter places the children of a Column widget, you need to understand the layout algorithm. Layout each child a null or zero flex factor with unbounded vertical constraints and the incoming horizontal constraints.

How to create a bottom sheet in flutter?

To create a bottom sheet there is a widget called BottomSheet provided by flutter. There are two required properties onClosing and builder. The onClosing is a callback function which gets invoked when the bottom sheet is closed. If we want to do something immediately after closing the bottom sheet we can do that inside this callback function.

What is the bottonnavigationbar widget?

The BottonNavigationBar widget is used to show the bottom of an app. It can consist of multiple items such as icons, text, or both that leads to a different route depending upon the design of the application. It is meant to help the user navigate to different sections of the application in general.


2 Answers

Apart from the issue posed by Expanded widget (as pointed out in the answer by alexandreohara),
Column's mainAxisSize attribute is set to MainAxisSize.max by default. That means the column will try to occupy all the space available (the entire screen height).

Setting Column's mainAxisSize to MainAxisSize.min will wrap the Column widget to occupy the least possible space(vertically) and not span the entire screen.

Following is the way it can be done:

    Column(
        mainAxisSize: MainAxisSize.min, 
        children: [...]
    );
like image 152
Rishabh Bhatnagar Avatar answered Nov 10 '22 22:11

Rishabh Bhatnagar


There's no problem using a Column in a BottomNavigationBar. I think that your problem is wrapping everything in Expanded. It doesn't know the width of the widgets inside, and because of that, it will return blank.

Try to remove those Expanded widgets and try this:

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween
   children: [FlatButton(...), FlatButton(...)],
)
like image 23
alexandreohara Avatar answered Nov 10 '22 22:11

alexandreohara