"multiple webview in flutter" Code Answer's

multiple webview in flutter

By Hilarious Hawk on Feb 08, 2021

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

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {

  final _key = UniqueKey();
  bool _isLoadingPage;
  WebViewController controller;
  int _selectedIndex = 0;

  List<String> arr_links = [
    'https://pub.dev/',
    'https://flutter.io',
    'https://www.google.com/',
  ];

  @override
  void initState() {
    super.initState();
    _isLoadingPage = true;
  }


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple WebView'),
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: arr_links[_selectedIndex],
            javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            controller = webViewController;
          },
            onPageFinished: (finish) {
              setState(() {
                _isLoadingPage = false;
              });
            },
          ),
          _isLoadingPage ? Scaffold(
            body: Center(
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(
                    Colors.white),
              ),
            ),
            backgroundColor: Colors.black.withOpacity(
                0.70), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
          ) : Stack()
        ],
      ),

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _isLoadingPage = true;
      controller.loadUrl(arr_links[_selectedIndex]);
    });
  }
}

Source: stackoverflow.com

Add Comment