Adding onPressed() function on navigation bar

Question

I am trying to make a bottom navigation bar which has icons instead of buttons, I plan on making it functional through Gestures.

I found this code snippet for a bottom navigation bar, but it uses indexs. I am trying to make the icons work (use onPressed() functions) using the Gestures feature. Can someone please help me through this?

 bottomNavigationBar: Container(
        margin: const EdgeInsets.all(20),
        height: size.width * .150,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(.15),
              blurRadius: 30,
              offset: const Offset(0, 10),
            ),
          ],
          borderRadius: BorderRadius.circular(20),
        ),
        child: ListView.builder(
          itemCount: 4,
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.symmetric(horizontal: size.width * .024),
          itemBuilder: (context, index) => InkWell(
            onTap: () {
              setState(() {
                  currentIndex = index;
                },
              );
            },
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AnimatedContainer(
                  duration: const Duration(milliseconds: 1500),
                  curve: Curves.fastLinearToSlowEaseIn,
                  margin: EdgeInsets.only(
                    bottom: index == currentIndex ? 0 : size.width * .029,
                    right: size.width * .0422,
                    left: size.width * .0422,
                  ),
                  width: size.width * .128,
                  height: index == currentIndex ? size.width * .014 : 0,
                  decoration: const BoxDecoration(
                    color: Colors.orangeAccent,
                    borderRadius: BorderRadius.vertical(
                      bottom: Radius.circular(10),
                    ),
                  ),
                ),
                Icon(
                  listOfIcons[index],
                  size: size.width * .076,
                  color: index == currentIndex
                      ? Colors.orangeAccent
                      : Colors.black,
                ),
                SizedBox(height: size.width * .03),
              ],
            ),
          ),
        ),
      ),

Thank you in advance.

refer [BottomNavigationBar](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html) — Ravindra S. Patil, Jun 15 '22 at 12:29

score 0 · Accepted Answer · answered Jun 16 '22 at 11:56

Bottom Navigation Bar consumes any widget. Below is one I implemented using Row. You can replace the IconButton with icon and GestureDetector to achieve the same functionality.

bottomNavigationBar: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: const Icon(Icons.home),
        onPressed: () {
          //write your script
        },
      ),
      IconButton(
        icon: const Icon(Icons.favorite),
        onPressed: () {
          //write your script
        },
      ),
      IconButton(
        icon: const Icon(Icons.settings),
        onPressed: () {
          //write your script
        },
      )
    ], // This trailing comma makes auto-formatting nicer for build methods.
  ),

Adding onPressed() function on navigation bar

1 Answers1