flutter webview navigation with bottomnavigationbar

Question

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 !

Answer 1

It seems that it is currently not possible for 2 webviews to have different content in Flutter, but you can use a single webview and use the controller to change the url of the site that is currently being viewed.

class _FenetrePrincipale extends State<FenetrePrincipale> {
  int selectedIndex = 0;
  final List<String> webviewList = [
    "https://google.com",
    "https://yahoo.com",
    "https://baidu.com"
  ];
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    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: (i) {
          controller.loadUrl(webviewList[i]);
          setState(() => selectedIndex = i);
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebView(
        initialUrl: webviewList[selectedIndex],
        onWebViewCreated: (c) {
          controller = c;
        },
      ),
    );
  }
}

The code above should work, and there is no need to create another navigationBar class (you should also note that it is advised to name a class with upper camel case, as described here).