I have a page where a user makes a "post" (like twitter/ig) upon clicking submit that post is sent to the backend via a post request and then the page routes to the "Main Page" which is basically a scaffold with a persistent bottom navigation bar that creates the body based on which icon (index) in the navigation bar is pressed. By default the index is 0 (first icon) so the corresponding body is shown which also shows the newly created posts the user made by performing a get request to the server. But the problem is it doesn't show the posts unless I click hot reload. Similarly if I navigate to a different page by clicking one of the icons and come back to the first page the posts are gone till I press hot reload again. How can I ensure the posts are loaded each time the body/page is created?
Cody for page displaying the posts:
class PostPage extends StatefulWidget {
@override
_PostPageState createState() => _PostPageState();
}
class _PostPageState extends State<PostPage> {
ApiClient _client = ApiClient();
String session;
int userID;
var refreshKey = GlobalKey<RefreshIndicatorState>();
Future GetInfo() async{
session = await getSession("session");
print("from get info "+ session);
userID = await getUserID("userID");
print("from get info "+ userID.toString());
}
@override
void initState() {
// TODO: implement initState
super.initState();
GetInfo();
print("called");
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text("Posts", style: Style.AppBarStyle),
bottom: TabBar(
tabs: [
Tab(
text: "Text1",
),
Tab(
text: "Text2",
),
],
),
),
body: TabBarView(
children: [
Posts(_client.getPostsOne(userID, session)),
Posts(_client.getPostsTwo(userID, session)),
],
),
),
);
}
}
Code for the future builder Posts:
Widget Posts(Future<List<Post>> future) {
return FutureBuilder<List<Post>>(
future: future,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF585B8D), Color(0xFF252642)])),
child: CustomScrollView(
scrollDirection: Axis.vertical,
shrinkWrap: false,
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 24.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => PostCard(
snapshot.data[index], false, true, false),
childCount: snapshot.data.length,
),
),
)
],
));
}
if (snapshot.data == null) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF585B8D), Color(0xFF252642)])),
child: Container());
}
if (snapshot.connectionState != ConnectionState.done) {
return Center(
child: CircularProgressIndicator(),
);
}
});
}
EDIT It seemed like the GET request was being made before the userID/session key was loaded from shared preferences, adding setState({}) fixed this because it caused the widget to be repainted with the now retrieved userID/session key. But two get requests were made instead of one, to prevent this I checked if the session was null before calling or else I displayed an empty container.
session !=null?Posts(_client.getPostsOne(userID, session)):Container()