How to pass a drawer with a string inside to next screen - flutter

Question

I have the next block of code where I'm getting the AppVersion using a library and after that I'm passing the AppVersion to a drawer. That drawer I send it to next screen but when I open the drawer on the next screen is showing the AppVersion as NULL. What can be the issue ?
I will provide below the full code source and maybe somebody can help me to figure out where is the bug.
import 'package:flutter/material.dart';
import 'package:package_info/package_info.dart';
void main() {
runApp(FirstPage());
}
class FirstPage extends StatefulWidget {
final String title;
FirstPage({Key key, this.title}) : super(key: key);
#override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
String packageAppVersion = '';
#override
void initState() {
super.initState();
versionCheck();
}
Future<void> versionCheck() async {
PackageInfo packageInfo = await PackageInfo.fromPlatform();
setState(() {
packageAppVersion = packageInfo.version;
});
}
Widget buildDrawerForSecondPage(BuildContext context) {
return new Drawer(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: [
Flexible(
child: new ListView(
children: <Widget>[],
),
),
Flexible(
flex: 0,
child: Text("App version: $packageAppVersion"),
)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Drawer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SecondPage(
title: 'Second Page',
drawer: buildDrawerForSecondPage(context),
),
);
}
}
class SecondPage extends StatefulWidget {
final String title;
final Drawer drawer;
SecondPage({Key key, this.title, this.drawer}) : super(key: key);
#override
_SecondPageState createState() => _SecondPageState(drawer);
}
class _SecondPageState extends State<SecondPage> {
String packageAppVersion = '';
final Drawer drawer;
_SecondPageState(this.drawer);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
endDrawer: drawer,
body: Container(),
);
}
}
Thanks in advance.

Answer 1

That's because you are using a .then() syntax, the AppVersion actually gets updated but a bit later hence the null value. You could await the version before the run() method and then pass it down to MaterialApp, or you could try using a setState after the print inside then(). Let me know if this fixes your issue.

Answer 2

Initially, the value of packageAppVersion is null, that is what it is being shown in the UI. So to update the UI you need to use setState. Check the below code for a better understanding:
#override
void initState() {
super.initState();
versionCheck();
}
Future<void> versionCheck() async {
PackageInfo packageInfo = await PackageInfo.fromPlatform();
setState((){
packageAppVersion = packageInfo.version;
});
print('App version received: $packageAppVersion');
}

Answer 3

I found the fix for above code, but I don't understand why is working only like this (removed the drawer property and the constructor from the _SecondPageState) :
class SecondPage extends StatefulWidget {
final String title;
final Drawer drawer;
SecondPage({Key key, this.title, this.drawer}) : super(key: key);
#override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
String packageAppVersion = '';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
endDrawer: widget.drawer,
body: Container(),
);
}
}