Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter's AutomaticKeepAliveClientMixin doesn't keep the page state after navigator.push

Tags:

flutter

dart

was testing AutomaticKeepAliveClientMixin and run into an issue, page loses state after navigator.push anyone knows this issue? any workarounds? be glad for any info, cheers

my goal is to keep the page state

steps to reproduce: open app click PageOne's push-button then go back swipe right and left and the page loses state image

import 'package:flutter/material.dart';  void main() => runApp(MaterialApp(home: MyApp()));  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       home: DefaultTabController(         initialIndex: 0,         length: 2,         child: Scaffold(           body: TabBarView(             children: <Widget>[Page1(), Page2()],           ),           bottomNavigationBar: Material(             child: TabBar(               labelColor: Colors.black,               tabs: <Widget>[                 Tab(                   icon: Icon(Icons.check),                 ),                 Tab(                   icon: Icon(Icons.check),                 ),               ],             ),           ),         ),       ),     );   } }  class Page1 extends StatefulWidget {   @override   Page1State createState() {     return new Page1State();   } }  class Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {   @override   Widget build(BuildContext context) {     return ListView(       children: <Widget>[         Container(           height: 300,           color: Colors.orange,         ),         Container(           height: 300,           color: Colors.pink,         ),         Container(           height: 300,           color: Colors.yellow,           child: Center(             child: Container(height: 26,               child: MaterialButton(                   color: Colors.blue,                   child:                       Text('clicking this and back then swipe => page loses state'),                   onPressed: () {                     Navigator.push(                       context,                       MaterialPageRoute(builder: (context) => PushedPage()),                     );                   }),             ),           ),         ),       ],     );   }      @override   bool get wantKeepAlive => true; }  class Page2 extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container(height: 300, color: Colors.orange);   } }  class PushedPage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(),       body: Container(         color: Colors.blue,       ),     );   } } 
like image 996
NuoYi Avatar asked Dec 20 '18 13:12

NuoYi


1 Answers

From the documentation on AutomaticKeepAliveClientMixin:

A mixin with convenience methods for clients of [AutomaticKeepAlive]. Used with [State] subclasses.

Subclasses must implement [wantKeepAlive], and their [build] methods must call super.build (the return value will always return null, and should be ignored).

So in your code, before you return the ListView just call super.build:

  Widget build(BuildContext context) {     super.build(context);     return ListView(...   } 
like image 137
anmol.majhail Avatar answered Sep 21 '22 20:09

anmol.majhail