Question 213705 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create custom bottom navigation bar in flutter

How to create custom bottom navigation bar in flutter with different custom shape.
how to create custom rounded container with gradient background for bottom navigation bar buttons.
How to make simple ease-in animation on it.

like this

Tags:

2

Answers


  1. 0

    You can go really custom with containers. My code is not for navigation, but here is an example of a custom nav bar.

    class mainBody extends StatelessWidget {
  const mainBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(
        child: sideMenu(),
      ),
      backgroundColor: Colors.grey.shade200,
      appBar: AppBar(
        title:
            Text('Dice Roller (${context.watch<diceList>().totalDiceNumber})'),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: const diceZone(),
      bottomNavigationBar: const bottom_navBar(),
    );
  }
}

    my container

    class bottom_navBar extends StatefulWidget {
  const bottom_navBar({super.key});
  @override
  State<bottom_navBar> createState() => _bottom_navBarState();
}

class _bottom_navBarState extends State<bottom_navBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey.shade400,
      ),
      child: Padding(
        padding: const EdgeInsets.only(bottom: 25, top: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  //artır
                  context.read<diceList>().addDice(randomNumber());
                  //ChangeNotifier(); buna gerek yokmuş baya gereksiz bir parça
                });
              },
              onLongPress: () {
                for (int i = 0; i < 10; i++) {
                  context.read<diceList>().addDice(randomNumber());
                }
              },
              child: Container(
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.grey.shade900),
                child: const Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 54,
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  //reroll
                  HapticFeedback.vibrate();
                  context.read<diceList>().reRollDice();
                });
              },
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 7),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    shape: BoxShape.rectangle,
                    color: Colors.grey.shade900),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Row(
                      children: [
                        Center(
                          child: Text(
                            'Roll ${context.watch<diceList>().diceses.length} Dice',
                            style: const TextStyle(
                                color: Colors.white,
                                overflow: TextOverflow.fade),
                          ),
                        ),
                        const Icon(
                          Icons.refresh,
                          color: Colors.white,
                          size: 54,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  //azalt
                  int i = context.read<diceList>().diceses.length;
                  if (i > 1) {
                    i--;
                    context.read<diceList>().removeDice(0);
                  }
                });
              },
              onLongPress: () {
                for (int z = 0; z < 10; z++) {
                  int i = context.read<diceList>().diceses.length;
                  if (i > 1) {
                    context.read<diceList>().removeDice(0);
                  }
                }
              },
              child: Container(
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.grey.shade900),
                child: const Icon(
                  Icons.remove,
                  color: Colors.white,
                  size: 54,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

    look like this

    Login or Signup to reply.
  2. 0

    You can use the animated_bottom_navigation_bar package to achieve your design.

    Here is the package link: animated_bottom_navigation_bar

    Here is the code:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: ClipRRect(
        borderRadius: BorderRadius.circular(100),
        child: FloatingActionButton(
          backgroundColor: AppColors.black,
          child: const Icon(Icons.music_note_outlined),
          onPressed: () {},
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: const [Icons.abc, Icons.baby_changing_station],
        activeIndex: _bottomNavIndex,
        gapLocation: GapLocation.center,
        notchSmoothness: NotchSmoothness.softEdge,
        onTap: (index) => setState(() => _bottomNavIndex = index),
        // other params
      ),
    );
  }

    Expected output:
    Bottom tab

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search