How to make webview not reload when I switch appbar in my flutter app?

Question

I want webview not reload when I switch appbar in my flutter app, but I don't know how should I do, and I am sorry that I am a beginner.

This is my recorded gif：

I searched on Google, but I didn't find an answer related to this.

//index.dart
import 'package:flutter/material.dart';
import 'navigation_tab.dart';
import '../home/home_page.dart';
import '../market/market_page.dart';
import '../my/my_page.dart';

class Index extends StatefulWidget {

  @override
  _IndexState createState() => new _IndexState();

}


class _IndexState extends State<Index> with TickerProviderStateMixin {

  int _currentIndex = 0;
  List<NavigationTab> _navigationTabs;
  List<StatefulWidget> _pageList;
  StatefulWidget _currentPage;

  @override
  void initState() {
    super.initState();
    _navigationTabs = <NavigationTab>[
      new NavigationTab(icon: new Icon(Icons.account_balance), title: new Text("home"), vsync: this),
      new NavigationTab(icon: new Icon(Icons.local_mall), title: new Text("market"), vsync: this),
      new NavigationTab(icon: new Icon(Icons.account_box), title: new Text("my"), vsync: this),
    ];

    _pageList = <StatefulWidget>[
      new HomePage(),
      new MarketPage(),
      new MyPage(),
    ];
    _currentPage = _pageList[_currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _currentPage,
      bottomNavigationBar: new BottomNavigationBar(
        items: _navigationTabs.map((tab) => tab.item).toList(),
        currentIndex: _currentIndex,
        fixedColor: Colors.blue,
        type: BottomNavigationBarType.fixed,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
            _currentPage = _pageList[index];
          });
        },
      ),
    );
  }

}

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

class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => new _HomePageState();

}

class _HomePageState extends State<HomePage> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: PreferredSize(
          child: new AppBar(
            title: new Text("home"),
            centerTitle: true,
          ), 
          preferredSize: Size.fromHeight(40)
      ),
      body: new Center(
        child: new Text("this is home page", style: TextStyle(fontSize: 36)),
      ),
    );
  }

}

//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class MarketPage extends StatefulWidget {

  @override
  _MarketPageState createState() => new _MarketPageState();

}

class _MarketPageState extends State<MarketPage> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: PreferredSize(
          child: new AppBar(
            title: new Text("market"),
            centerTitle: true,
          ),
          preferredSize: Size.fromHeight(40)
      ),
      body: new WebviewScaffold(
          url: "https://flutter.dev/",
          withLocalStorage: true,
          withJavascript: true
      ),
    );
  }

}

I want webview page keepalive, like vue, How should I do it?

Answer 1

Basically, your MarketPage widget is re-building whenever you open it. You can use keep alive to attain your required behaviour.

//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class MarketPage extends StatefulWidget {

  @override
  _MarketPageState createState() => new _MarketPageState();

}

class _MarketPageState extends State<MarketPage> with AutomaticKeepAliveClientMixin{


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: PreferredSize(
          child: new AppBar(
            title: new Text("market"),
            centerTitle: true,
          ),
          preferredSize: Size.fromHeight(40)
      ),
      body: new WebviewScaffold(
          url: "https://flutter.dev/",
          withLocalStorage: true,
          withJavascript: true
      ),
    );
  }

 @override
 bool get wantKeepAlive => true;

}

Update - Here is an example of how you can do it using AutomaticKeepAliveClientMixin. This is working fine for me. I'm using Pageview and webview_flutter instead of flutter_webview_plugin.

main.dart

import 'package:flutter/material.dart';
import 'package:webview_project/pag1.dart';
import 'package:webview_project/page2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  var controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        physics: NeverScrollableScrollPhysics(),
        controller: controller,
        children: <Widget>[
          Page1(),
          Page2(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.web), title: Text('Web')),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
            controller.jumpToPage(index);
          });
        },
      ),
    );
  }
}

page1.dart

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page1'),
    );
  }
}

page2.dart

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

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2>
    with AutomaticKeepAliveClientMixin<Page2> {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://www.flutter.dev/',
    );
  }

  @override
  bool get wantKeepAlive => true;
}