I have a series of stateful widgets in a PageView managed by a PageController. I am using pageController.jumpToPage(index) to switch pages. When switching pages all state appears to be lost in the widget, as if it was recreated from scratch. I have tried using keepPage: true in the PageController but that doesn't seem to have any effect. Is this the intended behavior of a PageView or am I doing something wrong? Any suggestions appreciated, thanks!
3 Answers
use with AutomaticKeepAliveClientMixin to your SubPage.
then @override bool get wantKeepAlive => true; here is a sample
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
new Tab(
icon: new Icon(Icons.airplanemode_active),
)
],
),
),
body: new TabBarView(children: [
new OnePage(color: Colors.black,),
new OnePage(color: Colors.green,),
new OnePage(color: Colors.red,),
new OnePage(color: Colors.blue,),
]),
),
);
}
}
class OnePage extends StatefulWidget {
final Color color;
const OnePage({Key key, this.color}) : super(key: key);
@override
_OnePageState createState() => new _OnePageState();
}
class _OnePageState extends State<OnePage> with AutomaticKeepAliveClientMixin<OnePage> {
@override
Widget build(BuildContext context) {
super.build(context);
return new SizedBox.expand(
child: new ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return new Padding(
padding: const EdgeInsets.all(10.0),
child: new Text(
'$index',
style: new TextStyle(color: widget.color),
),
);
},
),
);
}
@override
bool get wantKeepAlive => true;
}
1 Comment
Write custom widget:
import 'package:flutter/material.dart';
class KeepAlivePage extends StatefulWidget {
KeepAlivePage({
Key key,
@required this.child,
}) : super(key: key);
final Widget child;
@override
_KeepAlivePageState createState() => _KeepAlivePageState();
}
class _KeepAlivePageState extends State<KeepAlivePage>
with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
/// Dont't forget this
super.build(context);
return widget.child;
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
And use in pageview:
import 'package:flutter/material.dart';
import 'keep_alive_page.dart';
class PageViewDemo extends StatefulWidget {
const PageViewDemo({Key key}) : super(key: key);
@override
_PageViewDemoState createState() => _PageViewDemoState();
}
class _PageViewDemoState extends State<PageViewDemo> {
@override
Widget build(BuildContext context) {
return PageView(
children: [
KeepAlivePage(child:Page1()),
KeepAlivePage(child: Page2()),
KeepAlivePage(child:Page3()),
],
);
}
}
3 Comments
keepPage: true is the default behavior; it means that the PageController will remember what page it's on if it is destroyed and recreated. This isn't what you want.
Instead, pass a page-specific PageStorageKey to the constructor of the pages. This helps Flutter give a unique storage bucket to your page. Then in your State that you want to have restored to its previous condition, you can use PageStorage.of(context) to get the storage bucket, which you can read values from in initState and write values to when they change. You can see an example in ExpansionTile.
7 Comments
PageStorage in the ScrollPosition class. If other state is being maintained, it may be because it's being stored at a higher level of the tree.