read data using shared preferences, data always re-render in flutter - flutter

Question

I tried to read data using shared preferences and return my widget using FutureBuilder, but the problem is... when I click another tab screen and then back again to my home tab screen, the data inside widget always rerender.. is there a way so that my data always stick in my widget whenever I click another tab and back again to my home tab?
here is the code
class _SecondPageState extends State<SecondPage>
with AutomaticKeepAliveClientMixin<SecondPage> {
Future<int> _getUsername;
#override
bool get wantKeepAlive => true;
#override
void initState() {
_getUsername = SharedPreferences.getInstance().then((prefs) {
return prefs.getInt("username");
});
super.initState();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: _getUsername,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
print("loading");
return Text("Loading username...");
// how to prevent this condition so that my data always stick in my widget without rerender
}
final username = snapshot.data.toString();
return Container(
child: Text("Hello $username"),
);
});
}
}

Answer 1

You can copy paste run full code below
You can use AutomaticKeepAliveClientMixin
code snippet
class _Page3State extends State<Page3>
with AutomaticKeepAliveClientMixin<Page3> {
...
#override
bool get wantKeepAlive => true;
FutureBuilder(
future: _getUsername,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
print("loading");
return Text("Loading username...");
Working demo, you can see console output only print one loading
Output
I/flutter ( 8528): loading
full code
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MainPersistentTabBar(),
);
}
}
class MainPersistentTabBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
isScrollable: true,
tabs: [
Tab(
icon: Icon(Icons.directions_car),
text: "Non persistent",
),
Tab(icon: Icon(Icons.directions_transit), text: "Persistent"),
Tab(icon: Icon(Icons.directions_railway), text: "Test 1"),
Tab(icon: Icon(Icons.directions_subway), text: "Test 2"),
],
),
title: Text('Persistent Tab Demo'),
),
body: TabBarView(
children: [
Page1(),
Page2(),
Page3(),
Text('Page 4'),
],
),
),
);
}
}
class Page3 extends StatefulWidget {
#override
_Page3State createState() => _Page3State();
}
class _Page3State extends State<Page3>
with AutomaticKeepAliveClientMixin<Page3> {
Future<int> _getUsername;
#override
bool get wantKeepAlive => true;
#override
void initState() {
_getUsername = SharedPreferences.getInstance().then((prefs) {
return prefs.getInt("username");
});
super.initState();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: _getUsername,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
print("loading");
return Text("Loading username...");
// how to prevent this condition so that my data always stick in my widget without rerender
}
final username = snapshot.data.toString();
return Container(
child: Text("Hello $username"),
);
});
}
}
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
var list = List();
_loadList() async {
final response =
await http.get("https://jsonplaceholder.typicode.com/posts/");
if (response.statusCode == 200) {
await new Future.delayed(const Duration(seconds: 1));
if (mounted) {
setState(() {
list = json.decode(response.body) as List;
});
}
} else {
throw Exception('Failed to load posts');
}
}
#override
void initState() {
_loadList();
super.initState();
}
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
final data = list[index];
return ListTile(
contentPadding: EdgeInsets.all(10.0),
title: Text(data['title']),
subtitle: Text(
data['body'],
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
);
},
);
}
}
class Page2 extends StatefulWidget {
#override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2>
with AutomaticKeepAliveClientMixin<Page2> {
var list = List();
_loadList() async {
final response =
await http.get("https://jsonplaceholder.typicode.com/photos/");
if (response.statusCode == 200) {
await new Future.delayed(const Duration(seconds: 1));
if (mounted) {
setState(() {
list = json.decode(response.body) as List;
});
}
} else {
throw Exception('Failed to load posts');
}
}
#override
void initState() {
_loadList();
super.initState();
}
#override
Widget build(BuildContext context) {
super.build(context);
return Container(
child: ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
final data = list[index];
return ListTile(
contentPadding: EdgeInsets.all(10.0),
title: Text(data['title']),
trailing: Image.network(
data['thumbnailUrl'],
height: 20.0,
width: 20.0,
),
);
},
),
);
}
// TODO: implement wantKeepAlive
#override
bool get wantKeepAlive => true;
}