multiple webview in flutter
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]);
});
}
}