Flutter - WebView Issues

Question

for a job project i need to transform a website into an application using WebView

I'm stuck at the display part i don't know how the controller works (a missunderstanding from me). i'm under webview_flutter: ^4.7.0 and sdk>=2.19.0 < 3.0.0

Maybe you will find a solution (of course you will i'm new to Flutter and Dart, only 5hours)

Thanks for helping me

Here is the web_view_container.dart file

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; // Import the package

class WebViewContainer extends StatelessWidget {
  final String initialUrl;

  const WebViewContainer({required this.initialUrl, super.key});

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      initialUrl: initialUrl,
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

Here is my main.dart file

import 'package:flutter/material.dart';
import 'package:vertbaudet_webview/web_view_container.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner: false,
    routes: {
      '/': (context) => const WebViewExample(),
      '/webViewContainer': (context) => const WebViewContainer(initialUrl: 'https://www.vertbaudet.fr/',),
    },
  ),
);

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  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) {
          setState(() {
            selectedIndex = i;
          });
          controller?.loadRequest(webViewList[i] as Uri);
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebViewContainer(initialUrl: webViewList[selectedIndex]),
    );
  }
}

I except to have a navbar with 4 elements and when you click on an icon, the URL change to the expected one

Answer 1

Here is a simple solution.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: {
          '/': (context) => const WebViewExample(),
        },
      ),
    );

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

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

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(webViewList[selectedIndex]));
  }

  @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) {
          setState(() {
            selectedIndex = i;
          });
          controller.loadRequest(Uri.parse(webViewList[i]));
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebViewContainer(
        controller: controller,
      ),
    );
  }
}

class WebViewContainer extends StatelessWidget {
  final WebViewController controller;

  const WebViewContainer({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: controller,
    );
  }
}