How to build a custom bottomNavigationBar in flutter with a centered button?

Question

I have tried so much to build this bottomNavigationBar with the curve and space between icons. Cannot figure it out.

score 1 · Answer 1 · answered Nov 08 '20 at 14:47

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        elevation: 2.0,
      ),
      bottomNavigationBar: BottomAppBar(
        clipBehavior: Clip.antiAlias,
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
        child: Wrap(
          children: [
            BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: 0,
              onTap: (int index) {},
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
              ],
            ),
          ],
        ),
      ),

Check this code.

Perfect, how to make the notch above the button?? as you can see it should be at the top and show a curve! — Khader Murtaja, Nov 08 '20 at 14:50

Joy Terence · Accepted Answer · 2020-11-09T18:23:11.270

0

Have a look at this package: convex_bottom_bar.

The notch shape can be customized by writing a class that extending NotchedShape and implementing getOuterPath that contains the logic for the notch curve. Check this out to know exact implementation convex_shape.dart

To have a green icon at the bottom:

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Left'),
      TabItem(icon: new Icon(Icons.add, color: Colors.green,), activeIcon: new Icon(Icons.add, color: Colors.green,) title: 'Middle'),
      TabItem(icon: Icons.message, title: 'Right'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

edited Nov 09 '20 at 18:23

answered Nov 08 '20 at 17:24

Joy Terence

686
5
11

The problem is, you can't make a default color for the middle whether it is active or not! I need the middle button to stay green all the time – Khader Murtaja Nov 09 '20 at 07:41
Why don't you specify the color for the icon and set that icon in the tabItem for the middle tab. To keep it same when active or not, just pass the same icon as activeIcon too – Joy Terence Nov 09 '20 at 09:40
Updated with a snippet. Hope that is what you are expecting. Note here that according to package implementation, by default `activeIcon` is equal to `icon`, if it is not supplied. So you should be able to achieve what you want (fixed green color) without `activeIcon` – Joy Terence Nov 09 '20 at 18:25

How to build a custom bottomNavigationBar in flutter with a centered button?

2 Answers2