Design BottomNavigationBar in Flutter

Question

This BottomNavigationBar I'm designing

I have designed it this way but the middle icon is not being set. I have styled this icon, just put it as it is in the image.

Here is my output

My code

 return Scaffold(
      bottomNavigationBar: Neumorphic(
        margin: const EdgeInsets.only(left: 20, right: 20, top: 2, bottom: 14),
        style: NeumorphicStyle(
          depth: -3,
          boxShape: const NeumorphicBoxShape.stadium(),
          shadowLightColorEmboss: Colors.white,
          shadowDarkColorEmboss: Colors.grey,
          color: Colors.grey[200],
          intensity: 0.8,
        ),
        child: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) => setState(() => currentIndex = index),
          iconSize: 30,
          type: BottomNavigationBarType.fixed,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: [
            const BottomNavigationBarItem(
                icon: Icon(Icons.home, color: Color(0xFF59BCCB)),
                label: "Home"),
            const BottomNavigationBarItem(
                icon: Icon(Icons.star_rounded, color: Color(0xFF59BCCB)),
                label: "Home"),
            BottomNavigationBarItem(
                icon: Stack(
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: 50,
                      padding: const EdgeInsets.all(10),
                      decoration: ShapeDecoration(
                        shape: const StadiumBorder(),
                        color: const Color.fromRGBO(133, 208, 212, 1),
                        shadows: <BoxShadow>[
                          const BoxShadow(
                            color: Colors.white,
                            spreadRadius: 8,
                            blurRadius: 2,
                            offset: Offset(0, 0),
                          ),
                          BoxShadow(
                            color: Colors.grey.shade300,
                            spreadRadius: 3,
                            blurRadius: 3,
                            offset: const Offset(5, 2),
                          ),
                        ],
                      ),
                      child: const Text(
                        'S',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: "ROCK",
                            fontSize: 18),
                      ),
                    ),
                  ],
                ),
                label: "Home"),
            const BottomNavigationBarItem(
                icon: Icon(Icons.notifications_outlined,
                    color: Color(0xFF59BCCB)),
                label: "Home"),
            const BottomNavigationBarItem(
                icon: Icon(Icons.person, color: Color(0xFF59BCCB)),
                label: "Home"),
          ],
        ),
      ),
      body: IndexedStack(index: currentIndex, children: screens),
    );

score 0 · Answer 1 · edited Nov 17 '22 at 19:08

When you're trying to imitate a Custom BottomNav design, then why not create a custom Nav instead of working with the limited default one?

Check this out, this needs a little tinker in BoxShadow, but it acheives the output with way less complicated code.

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Container(
          padding: EdgeInsets.only(bottom: 70),
          color: Colors.white,
          child: IndexedStack(index: currentIndex, children: screens),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Neumorphic(
              margin: const EdgeInsets.only(
                  left: 20, right: 20, top: 2, bottom: 14),
              style: NeumorphicStyle(
                depth: -3,
                boxShape: const NeumorphicBoxShape.stadium(),
                shadowLightColorEmboss: Colors.white,
                shadowDarkColorEmboss: Colors.grey,
                color: Colors.grey[200],
                intensity: 0.8,
              ),
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 50,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(25)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                      child: Material(
                        shape: const StadiumBorder(),
                        color: Colors.transparent,
                        child: InkWell(
                          child: const Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Icon(Icons.home,
                                size: 30, color: Color(0xFF59BCCB)),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                      child: Material(
                        shape: const StadiumBorder(),
                        color: Colors.transparent,
                        child: InkWell(
                          child: const Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Icon(Icons.star_rounded,
                                size: 30, color: Color(0xFF59BCCB)),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                    Container(
                      width: 50,
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                      child: Material(
                        shape: const StadiumBorder(),
                        color: Colors.transparent,
                        child: InkWell(
                          child: const Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Icon(Icons.notifications_outlined,
                                size: 30, color: Color(0xFF59BCCB)),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                      child: Material(
                        shape: const StadiumBorder(),
                        color: Colors.transparent,
                        child: InkWell(
                          child: const Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Icon(Icons.person,
                                size: 30, color: Color(0xFF59BCCB)),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 70,
              height: 70,
              padding: const EdgeInsets.all(10),
              decoration: ShapeDecoration(
                shape: const StadiumBorder(),
                color: const Color.fromRGBO(133, 208, 212, 1),
                shadows: <BoxShadow>[
                  const BoxShadow(
                    color: Colors.white,
                    spreadRadius: 8,
                    blurRadius: 2,
                    offset: Offset(0, 0),
                  ),
                  BoxShadow(
                    color: Colors.grey.shade300,
                    spreadRadius: 3,
                    blurRadius: 3,
                    offset: const Offset(5, 2),
                  ),
                ],
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(25),
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () {},
                    child: const Center(
                      child: Text(
                        'S',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: "ROCK",
                            fontSize: 22),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

This uses two Child components of a Stack. First is the Row which contains the items, center one of which is blank. Second one is the Circular Fab like Container which is placed above the Row and centered to position correctly.

Output:

EDIT: I checked the implementation and I'd say this is good considering the best UI/UX. You'll be able to see the content behind BottomNav when scrolling and a bottom padding is given to keep the content above the bottom nav.

How you designed it , it damaged my whole layout. I've updated my whole code for that bottom nav . Kindly check it . — , Mar 16 '22 at 12:36
@MansoorMalik Because you've not set the specific functionality on `onTap` of these icons. — Lalit Fauzdar, Mar 17 '22 at 05:52
This design has nothing to do with whether you're able to open the page or not. You're not able to open the page because you're not doing that correctly, you can check [these answers](https://stackoverflow.com/a/54165550/8244632) out to know how to do it on a button click. — Lalit Fauzdar, Mar 17 '22 at 06:16

Design BottomNavigationBar in Flutter

1 Answers1

Output: