Flutter | How to make custom button of BottomNavigationBar in flutter?

Question

I want make a button with text and icon inside it, with custom background color and custom width. with fix position (not scrollable). would you like to help me please ?

here are the code:

 bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        currentIndex: 0, // this will be set when a new tab is tapped
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
          BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
          BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
        ]

its only give a color for the icon.

this is what I want:

oke sir I'm gonna try it. wrapping button icon in stack right ? @CopsOnRoad — Roman Traversine, Apr 10 '19 at 11:40
Please let me know if have any issue with the solution provided. Thanks — CopsOnRoad, Apr 10 '19 at 15:55

CopsOnRoad · Accepted Answer · 2019-04-10T12:26:46.363

23

Here you go

Widget build(context) {
  return Scaffold(
    bottomNavigationBar: Container(
      height: 56,
      margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
      child: Row(
        children: <Widget>[
          Container(
            width: 66,
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
            ),
          ),
          Container(
            width: 66,
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.red,
              child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            ),
          ),
        ],
      ),
    ),
  );
}

edited Apr 10 '19 at 12:26

answered Apr 10 '19 at 12:21

CopsOnRoad

237,138
77
654
440

1

work Nicely sir. this is working so nicely. !! god bless you sir. thanks :) :) @CopsOnRoad – Roman Traversine Apr 11 '19 at 01:40
hey sir, @CopsOnRoad, I want to ask, maybe it seems trivial, but I really have trouble. I have 2 widgets in the row, the row is in the column, and the column is in the row like this ' row( ' ' column( ' ' row( ' ' text ' ' container ' I want to separate text and containers using spacebetween, but they still don't want to separate. are there any suggestions? here are the screenshot: https://imgur.com/lyfTfk7 – Roman Traversine Apr 11 '19 at 10:40
1

You will have to use `Expanded` in your 2nd `Row`. – CopsOnRoad Apr 11 '19 at 10:44
ohh I see.. so if I use expanded they would like to separate ? well thank you so much for answering my stupid question. :)) – Roman Traversine Apr 11 '19 at 10:45
1

I think they should work the way you are looking for, if not share a screenshot for what you are looking to do, I will try to help you out. – CopsOnRoad Apr 11 '19 at 10:46
and here are the SS https://imgur.com/uXJqyP5 . thanks for your kindness :) – Roman Traversine Apr 11 '19 at 11:27

Robin Reiter · Answer 2 · 2019-04-10T10:23:03.133

You may want to look at the concept of a BottomAppBar instead.
This bar accepts any widget as children not just BottomNavigationBarItems.

You could try this:

BottomAppBar(
      child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
            child: SizedBox(
              height: 44,
              child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                  onTap: () {},
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.add, color: Colors.blue, size: 24),
                      Text("Add")
                    ],
                  ),
                ),
              ),
            ),
          ),
          ]
      ),
    )

Flutter | How to make custom button of BottomNavigationBar in flutter?

2 Answers2