android - how to sync bottom navigation bar icon with current page in flutter

Question

I have here 5 pages. I want when the user routes to a new page without using bottom navigation bar for the icon for that page to appear in the bottom navigation bar.

How can I do this?

this is main class:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'Basirat.dart';
import 'Gallery.dart';
import 'MainPage.dart';
import 'BottomNav.dart';
import 'Niko_Kary.dart';
import 'Nohe.dart';

void main() {
  runApp(deldadeganApp());
}

class deldadeganApp extends StatefulWidget {
  @override
  _deldadeganAppState createState() => _deldadeganAppState();
}

class _deldadeganAppState extends State<deldadeganApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: BottomNav(),
    );
  }
}

This is bottom navigation bar class in which I manage route the plan:

import 'package:deldadeganapp/Basirat.dart';
import 'package:deldadeganapp/Gallery.dart';
import 'package:deldadeganapp/MainPage.dart';
import 'package:deldadeganapp/Niko_Kary.dart';
import 'package:deldadeganapp/Nohe.dart';
import 'package:flutter/material.dart';
import 'MainPage.dart';

class BottomNav extends StatefulWidget {
  @override
  _BottomNavState createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  int _curentIndex = 4;
  final List<Widget> _childeren = [
    Niko_kary(),
    Nohe(),
    Gallery(),
    Basirat(),
    MainPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _childeren[_curentIndex],
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(30), topLeft: Radius.circular(30)),
          boxShadow: [
            BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0)),
          child: BottomNavigationBar(
              currentIndex: _curentIndex,
              selectedItemColor: Colors.green,
              unselectedItemColor: Colors.black87,
              type: BottomNavigationBarType.fixed,
              // backgroundColor: Colors.amberAccent,
              onTap: (index) {
                setState(() {
                  bClickindex(index);
                });
              },
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.payment),
                  title: Text('help'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.queue_music),
                  title: Text('Nohe'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.photo),
                  title: Text('gallery'),
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.event_note), title: Text('Basirat')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.home), title: Text('khane'))
              ]),
        ),
      ),
    );
  }

  void bClickindex(int index) {
    setState(() {
      _curentIndex = index;
    });
  }
}

Answer 1

Made a short example. Dartpad example

You have to get the state object of the parent in the child widget and use it to set the state of the parent. Make sure to check if the parent is mounted before calling set state as shown in the example.

Hope this solves your problem!