This BottomNavigationBar I'm designing

enter image description here

I have designed 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

enter image description here

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),
    );


Solution 1: Lalit Fauzdar

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:

enter image description here

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.

enter image description here