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

How to use setState() to change NavigationBar icons? – Flutter

I am trying to change the icon shape for each item of the following custom navigationBr based on weather they are selected or not:

class HomeScreen extends StatefulWidget {
  static const routeName = '/home';

  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentIndex,
        children: screens,
      ),

      bottomNavigationBar: ConvexAppBar(
          backgroundColor: Theme.of(context).secondaryHeaderColor,
          onTap: (index) {
            setState() {
              currentIndex = index;
            }
          },
          style: TabStyle.fixed,
          items: [
            TabItem(
              icon: currentIndex == 0
                  ? Icons.local_fire_department
                  : Icons.local_fire_department_outlined,
              title: 'Contests',
            ),
            TabItem(
              icon: currentIndex == 1
                  ? Icons.remove_red_eye
                  : Icons.remove_red_eye_outlined,
              title: 'Reviews',
            ),
          TabItem(
             icon: currentIndex == 2
                 ? Icons.health_and_safety
                 : Icons.health_and_safety_outlined,
             title: 'Add New',
             ),
          ]),
      );
   }
}

But it doesn’t work. How can I create such a behavior that when user chooses one of the nav bar options it’s icon turns on and when the user chooses another item the icon changes to outlined icon.

Tags:

2

Answers


  1. 0

    dev

    I have fixed your problem actually the problem is that the state is not updating there. you have to use onTabNotify instead of onTap which will sort your issue.

    I have also done 1 thing is that instead of updating the whole code I used stream so the only required widget will update. and for that, i have used the rxdart: ^0.27.7 version. please check the following code snippet.

    import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

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

  final BehaviorSubject<int> bottomBarIndex = BehaviorSubject<int>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<int>(
          stream: bottomBarIndex.stream,
          builder: (context, AsyncSnapshot<int> snapshot) {
            return IndexedStack(
              index: snapshot.data,
              children: const [ContestsPage(), ReviewsPage(), AddNewPage()],
            );
          }),
      bottomNavigationBar: StreamBuilder<int>(
        stream: bottomBarIndex.stream,
        builder: (context, AsyncSnapshot<int> snapshot) {
          return ConvexAppBar(
            backgroundColor: Theme.of(context).secondaryHeaderColor,
            onTabNotify: (index) {
              bottomBarIndex.sink.add(index);
              return true;
            },
            items: [
              TabItem(
                icon: snapshot.data == 0 ? Icons.local_fire_department : Icons.local_fire_department_outlined,
                title: 'Contests',
              ),
              TabItem(
                icon: snapshot.data == 1 ? Icons.remove_red_eye : Icons.remove_red_eye_outlined,
                title: 'Reviews',
              ),
              TabItem(
                icon: snapshot.data == 2 ? Icons.health_and_safety : Icons.health_and_safety_outlined,
                title: 'Add New',
              ),
            ],
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('ContestsPage'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('ReviewsPage'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('AddNewPage'),
    );
  }
}

    Please let me know if you still face any issue with this code.

    Login or Signup to reply.
  2. 0

    Your code created local function setState instead of using existing setState

             onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },

    Your code looks create new local function

    setState(){
}

    So that update is not happening here.

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

Back To Top
Search