flutter: bottomNavigationBar cannot switch between html pages using WebView
You can copy paste run full code below
I simulate this case with the full code below
Step 1: Use AutomaticKeepAliveClientMixin
class _WebViewKeepAlive extends State<WebViewKeepAlive>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
Step 2: Do not direct put function in future
attribute, future: LocalLoader().loadLocal(htmlFile),
Please use below way
Future<String> _future;
@override
void initState() {
_future = _getUrl(widget.url);
super.initState();
}
return FutureBuilder(
future: _future,
Step 3: I use PageView
in this case
working demo
full code
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPortalPage(title: 'Flutter Demo Home Page'),
);
}
}
class MyPortalPage extends StatefulWidget {
MyPortalPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyPortalPageState createState() => _MyPortalPageState();
}
class _MyPortalPageState extends State<MyPortalPage> {
int _currentIndex = 0;
PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SizedBox.expand(
child: PageView(
controller: _pageController,
children: <Widget>[
Page1(),
WebViewKeepAlive(url: "https://flutter.dev/"),
WebViewKeepAlive(url: "https://stackoverflow.com/"),
Center(child: Text("Settings")),
],
onPageChanged: (int index) {
print("onPageChanged");
setState(() {
_currentIndex = index;
});
},
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
selectedItemColor: Colors.amber[800],
unselectedItemColor: Colors.blue,
onTap: (index) {
print("onItemSelected");
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.apps),
label: 'Challenges',
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
label: 'Users',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Messages',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
);
}
}
class Page1 extends StatefulWidget {
const Page1({Key key}) : super(key: key);
@override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);
return ListView.builder(itemBuilder: (context, index) {
return ListTile(
title: Text('Lorem Ipsum'),
subtitle: Text('$index'),
);
});
}
@override
bool get wantKeepAlive => true;
}
class WebViewKeepAlive extends StatefulWidget {
final String url;
WebViewKeepAlive({Key key, this.url}) : super(key: key);
@override
_WebViewKeepAlive createState() => _WebViewKeepAlive();
}
class _WebViewKeepAlive extends State<WebViewKeepAlive>
with AutomaticKeepAliveClientMixin {
Future<String> _future;
@override
bool get wantKeepAlive => true;
Future<String> _getUrl(String url) async {
await Future.delayed(Duration(seconds: 1), () {});
return Future.value(url);
}
@override
void initState() {
_future = _getUrl(widget.url);
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
super.build(context);
return FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<String> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return WebView(
initialUrl: snapshot.data,
javascriptMode: JavascriptMode.unrestricted,
);
}
}
});
}
}
Comments
-
kakyo 11 months
Goal
I use
bottomNavigationBar
to switch between a few pages. Two of the pages useWebView
to show local html files.Problem
I found that when I switch between these pages, the pages with pure flutter widgets can load perfectly. But the HTML pages will only show the initially loaded page on switching.
For example, If I have two navigator buttons leading to Page1 and Page2, then at runtime, if I tapped Page1 button first, then tapped Page2 button, then the WebView would still show Page1 instead of Page2. This is wrong.
Code
Here is the HTML page code I use
class LocalLoader { Future<String> loadLocal(String filename) async { return await rootBundle.loadString('assets/doc/$filename'); } } class HtmlPage extends StatelessWidget { final String htmlFile; HtmlPage({ @required this.htmlFile }); @override Widget build(BuildContext context) { return Container( child: FutureBuilder<String>( future: LocalLoader().loadLocal(htmlFile), builder: (context, snapshot) { if (snapshot.hasData) { return WebView( initialUrl: Uri.dataFromString(snapshot.data, mimeType: 'text/html', // CAUTION // - required for non-ascii chars encoding: Encoding.getByName("UTF-8") ).toString(), javascriptMode: JavascriptMode.unrestricted, ); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } else { print('undefined behaviour'); } return CircularProgressIndicator(); }, ),); } }
Then with my
bottomNavigationBar
, I handle the tap event:class MyFlutterView extends StatefulWidget { @override _MyFlutterViewState createState() => _MyFlutterViewState(); } class _MyFlutterViewState extends State<MyFlutterView> { final Keys keys = Keys(); int _iSelectedDrawerItem = 3; // self int _iSelectedNavItem = 0; static List<Widget> _widgetOptions = <Widget>[ MyFlutterPlaceholder(title: 'Index 0: MyFlutter'), MyPage(htmlFile: 'page1.html'), MyPage(htmlFile: 'page2.html'), ]; void _onItemTapped(int index) { setState(() { _iSelectedNavItem = index; }); } @override Widget build(BuildContext context) { final deviceSize = MediaQuery.of(context).size; final appBar = AppBar( backgroundColor: WidgetColors.menubar, title: Text('MyFlutter'), ); return Scaffold( appBar: appBar, endDrawer: NavDrawer( keys: keys, iSelectedDrawerItem: _iSelectedDrawerItem, ), body: Container( decoration: BoxDecoration( gradient: WidgetColors.canvas, ), child: _widgetOptions.elementAt(_iSelectedNavItem), ), bottomNavigationBar: BottomNavigationBar( currentIndex : _iSelectedNavItem, type: BottomNavigationBarType.fixed, backgroundColor: WidgetColors.menubar, fixedColor: WidgetColors.myColor, // selectedItemColor: WidgetColors.myColor, unselectedItemColor: Colors.white, selectedIconTheme: IconThemeData(color: WidgetColors.myColor), // unselectedIconTheme: IconThemeData(color: Colors.white), items: [ BottomNavigationBarItem( label: 'MyFlutter', icon: Icon(Icons.build) ), BottomNavigationBarItem( label: 'Page1-HTML', icon: Icon(Icons.help,), ), BottomNavigationBarItem( label: 'Page2-HTML', icon: Icon(Icons.info_outline_rounded), ), ], onTap: _onItemTapped), ); } }
I've also tried
StatefulWidgets
but the problem persists.Workaround
The only workaround I have right now is to derive from the
HtmlPage
class for every single page I have, like this:class Page1 extends HtmlPage { Page1() : super(htmlFile: 'page1.html'); } class Page2 extends HtmlPage { Page2() : super(htmlFile: 'page2.html'); }
After this, the HTML pages will switch and load as expected.
Question
How should I fix this? Should I work on loading the HTML file more explicitly? I thought
setState
would handle the loading for me automatically and this certainly applies to the pure flutter widget page (MyFlutterPlaceholder
class in the code above).Also, I ensured that the url loading was called every time I switch page through the nav bar.