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

Flutter Changing Colour of the Icon With Container

I would like to ask how can i change the color of my icon when I navigate to the next page that means when I select the page the icon is blue then the unselected icon will remain grey. I have tried setState() but it’s not working for me.

class _CustomBottomNavigationState extends State<CustomBottomNavigation> {
 @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Container(
      width: size.width,
      height: 80,
      child: Stack(
        children: [
          CustomPaint(
            size: Size(size.width, 80),
            painter: BNBCustomPainter(),
          ),
          Center(
            heightFactor: 0.6,
            child: FloatingActionButton(
              onPressed: () {
                widget._addingThings(context);
              },
              backgroundColor: Colors.black,
              child: Icon(Icons.add),
              elevation:0.1,
            ),
          ),
          Container(
            width: size.width,
            height: 80,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(icon: Icon(Icons.home), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: MyScreen(), isIos: true));

                }),
                IconButton(icon: Icon(Icons.notifications), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: My2Screen()));

                }),
                Container(width: size.width * 0.2),
                IconButton(icon: Icon(Icons.add), onPressed: () {
                  _pickImageFromCamera();
                  Navigator.push(context, MaterialPageRoute(builder: (context) => My3Screen()));
                }),
                IconButton(icon: Icon(Icons.abc), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: My4Screen()));

                }),
              ],
            ),
          )
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can create a custom widget for your icon buttons and maintain the selected/unselected state internally within that widget.

    class CustomIconButton extends StatefulWidget {
  final IconData icon;
  final bool isSelected;
  final Function onTap;

  CustomIconButton({required this.icon, required this.isSelected, required this.onTap});

  @override
  _CustomIconButtonState createState() => _CustomIconButtonState();
}

class _CustomIconButtonState extends State<CustomIconButton> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(
        widget.icon,
        color: widget.isSelected ? Colors.blue : Colors.grey,
      ),
      onPressed: widget.onTap,
    );
  }
}

    Then you can use it like this:

    Container(
  width: size.width,
  height: 80,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      CustomIconButton(
        icon: Icons.home,
        isSelected: currentPageIndex == 0,
        onTap: () {
          setState(() => currentPageIndex = 0;

          Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: MY4Screen(), isIos: true));
        },
      ),
      CustomIconButton(
        icon: Icons.notifications,
        isSelected: currentPageIndex == 1,
        onTap: () {
          setState(() => currentPageIndex = 1;
       
          Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: ReminderScreen()));
        },
      ),
      Container(width: size.width * 0.2),
      CustomIconButton(
        icon: Icons.abc,
        isSelected: currentPageIndex == 2,
        onTap: () {
          setState(() => currentPageIndex = 2;

          _pickImageFromCamera();
          Navigator.push(context, MaterialPageRoute(builder: (context) => MyScreen()));
        },
      ),
      CustomIconButton(
        icon: Icons.ac_unit,
        isSelected: currentPageIndex == 3,
        onTap: () {
          setState(() => currentPageIndex = 3;

          Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: MY2Screen()));
        },
      ),
    ],
  ),
)
    Login or Signup to reply.
  2. 0 
    Container(
    width: MediaQuery.of(context).size.width,
    height: 80,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        IconButton(
            icon: Icon(
              Icons.home,
              color: selectedIndex == 1 ? Colors.blue : Colors.grey,
            ),
            onPressed: () {
              Get.to(() => Card());
              setState(() {
                selectedIndex = 1;
              });
            }),
        IconButton(
            icon: Icon(Icons.notifications, color: selectedIndex == 2 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => Card());
              setState(() {
                selectedIndex = 2;
              });
            }),
        Container(width: MediaQuery.of(context).size.width * 0.2),
        IconButton(
            icon: Icon(Icons.abc, color: selectedIndex == 3 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => MyOrder(filterType: ''));
              setState(() {
                selectedIndex = 3;
              });
            }),
        IconButton(
            icon: Icon(Icons.ac_unit, color: selectedIndex == 4 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => AccessoriesPage());
              setState(() {
                selectedIndex = 4;
              });
            }),
      ],
    ),
  )

    create variable selectedIndex

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

Back To Top
Search