'flutter webview navigation with bottomnavigationbar

I want to do a bottomnavigationbar in my app so users can navigates trough all the pages of a website ! I've follow many tutorial, but now i'm stuck and i don't really understand why my code isn't working.. I'm kinda new in the world of flutter, so it might be a dumb error x) !

//Bottom navigation bar
class navigationBar extends StatelessWidget{
  navigationBar(this._selectedIndex,this.callback);
  final int _selectedIndex;
  final Function(int) callback;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon:Icon(Icons.home),
            label: "accueil",
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.business),
            label: "exemple",
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.cyan,
      onTap: callback,
    );
  }
//The View that we are controlling
class FenetrePrincipale extends StatefulWidget{
  const FenetrePrincipale({Key? key}) : super(key:key);

  @override
  State<StatefulWidget> createState() => _FenetrePrincipale();

}
//The state of the view that contains the webviewController (i was thinking my error was from a non-reload problem) 
class _FenetrePrincipale extends State<FenetrePrincipale>{
  int _selectedIndex = 0;
  WebViewController? _controller = null;

  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });

  }

  @override
  Widget build(BuildContext context) {
    print("---------------------------------");
    print("Dans le builder de fenetre");
    print(_selectedIndex);
    print(listBuilder().elementAt(_selectedIndex).initialUrl);
    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon:Icon(Icons.home),
              label: "Accueil",
            ),
            BottomNavigationBarItem(
              icon:Icon(Icons.business),
              label: "Exemple",
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.cyan,
          onTap: _onItemTapped,
        ),
        appBar: AppBar(
          backgroundColor: Color.fromRGBO(255, 255, 255, 01),
          toolbarHeight: 5,
          elevation:0,
        ),
        //body : PageBuilder(_widgetOptions.elementAt(_selectedIndex)), //A check
        body : listBuilder().elementAt(_selectedIndex),
    );
  }
//Here i have my WebView list, that i get correctly ! Because print(listBuilder().elementAt(_selectedIndex).initialUrl);
//Is giving me the right url !
  List<WebView> listBuilder(){
    List<WebView> _widgetOptions = <WebView>[
      WebView(
        initialUrl: "https://jlcommunication.fr/",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller){
          _controller = controller;
        },
        //"url1",
        //style: optionStyle,
      ),
      WebView(
        initialUrl: "https://climlab.fr/",
        onWebViewCreated:  (controller){
          _controller = controller;
        },
        javascriptMode: JavascriptMode.unrestricted,
        //style : optionStyle,
      ),
    ];
    if(_controller != null){
      _controller!.clearCache();
      print("on est dans le truc du controller");
      _controller!.reload();
    }
    return _widgetOptions;
  }
}

Hope you can help me, Thanks guys ! Have a great day !



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source