When I click on one of my navitems, the color of the selected items and non-selected items also got changed, it's working as it should.

But when I run or reload my project, the not selected item on navbar didn't show its color, but when I press on of the navbar items, it shows the color as it should.

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.red,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _indexPage = 0;
  final Screen = [
    homeTest(),
    productPage(),
    trading(),
    inventoryPage(),
    masterPage(),
    financePage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 211, 211, 211),
      bottomNavigationBar: BottomNav(
        onChange: (val) {
          setState(() {
            _indexPage = val;
          });
        },
        defaultSelectedIndex: 0,
      ),
      body: Screen[_indexPage],
    );
  }
}

and This is my bottomnav code

class BottomNav extends StatefulWidget {
  final int defaultSelectedIndex;
  final Function(int) onChange;

  BottomNav({this.defaultSelectedIndex = 0, required this.onChange});

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  bool isActive = true;
  int currentIndex = 0;

  double height = 100;
  double width = 0;

  int _selectedItemIndex = 0;

  var White = Colors.white;
  var Grey = Color(0xFFD9D9D9);

  var bank = [
    Color(0xFF174749),
    Color(0xFF008B92),
    Color(0xFF008B92),
    Color(0xFFDE8F19),
    Color(0xFFDE2519),
    Color(0xFF3D1E6D),
  ];
  var defaultColor;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _selectedItemIndex = widget.defaultSelectedIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        BuildNavItems(0, "home", 1, Color(0xFF41DE78), "HOME"),
        BuildNavItems(1, "product", 1, Color(0xFF0DF5E3), "PRODUCT"),
        BuildNavItems(2, "trading", 1, Color(0xFF0DF5E3), "TRADING"),
        BuildNavItems(3, "inventory", 1, Color(0xFFF6EE16), "INVENTORY"),
        BuildNavItems(4, "master", 1, Color(0xFFF60000), "MASTER"),
        BuildNavItems(5, "finance", 1, Color(0xFF8874A3), "FINANCE")
      ],
    );
  }

  Widget BuildNavItems(
      int index, String name, double scale, var SelectedColor, String title) {
    return GestureDetector(
      onTap: () {
        widget.onChange(index);

        setState(() {
          _selectedItemIndex = index;

          defaultColor = bank[index];
        });
      },
      child: Container(
        height: 65,
        decoration: BoxDecoration(
            color: _selectedItemIndex == index ? SelectedColor : defaultColor),
        child: Column(
          children: [
            Container(
                width: MediaQuery.of(context).size.width / 6,
                child: Container(
                  height: 50,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage("assets/images/"   name   ".png"))),
                )),
            Container(
              width: MediaQuery.of(context).size.width / 6,
              alignment: Alignment(0, 0.65),
              child: Text(
                title,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 9.5,
                    color: _selectedItemIndex == index
                        ? Colors.black
                        : Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Just set the defaultColor in the initState. Also, define it as a late variable. It's going to be like the following snippet:

  late Color? defaultColor;                              // <- Here

  @override
  void initState() {
    super.initState();

    _selectedItemIndex = widget.defaultSelectedIndex;
    defaultColor = bank[_selectedItemIndex];             // <- Here
  }