Flutter pass data to Statefulwidget - flutter

Question

I need to know how can i pass data through the screens
Here is how I am sending data.
class _HomePageState extends State<HomePage> {
#override
initState() {
// TODO: implement initState
super.initState();
doSomeAsyncStuff();
}
Future<List> doSomeAsyncStuff() async {
final storage = new FlutterSecureStorage();
String value = await storage.read(key: 'Cnic');
print(value);
String url = 'http://api.igiinsurance.com.pk:8888/insurance_IgiGen/insurance-api/get_company_employee.php?offset=0&limit=1&cnic=${value}' ;
final msg = jsonEncode({"cnic": value});
Map<String,String> headers = {'Content-Type':'application/json'};
String token = value;
final response = await http.get(url);
var Data = json.decode(response.body);
print(Data);
var familyMembers = Data["records"][0]["family_members"];
print(familyMembers);
for (var familyMember in familyMembers){ //prints the name of each family member
var familyMemberName = familyMember["name"];
var familyMemberGender = familyMember["gender"];
var familyMemberAge = familyMember["age"];
var familyMemberRelationship = familyMember["relationship"];
print(familyMemberName);
}
}
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
title: Text('IGI GENERAL INSURANCE'),
),
body: Center(
child: GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PersonalPage(familyMemberName, familyMemberGender)),
);
},
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(35),
child: Image(
image: AssetImage("assets/images/reg.png"),
height: height * 0.1,
)),
Text(
'Personal',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
)
],
),
),
)
);
}
}
This is how i am sending the values
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PersonalPage(familyMemberName,
familyMemberGender)),
);}
Now i want to show the value in a other stateful widget
class PersonalPage extends StatefulWidget {
#override
_PersonalPageState createState() => _PersonalPageState();
}
class _PersonalPageState extends State<PersonalPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Text('Show name here '),
Text('Show gender here ')
],
),
);
}
}
As you can see i have values i am passing to the other stateful widget. I need to show the value now in Text Widget
Added _homeState also in a question now

Answer 1

You can receive the values by using the constructor of the PersonalPage class:
import "package:flutter/material.dart";
class PersonalPage extends StatefulWidget {
final List<String> names;
final List<String> genders;
PersonalPage(this.names,this.genders);
#override
_PersonalPageState createState() => _PersonalPageState();
}
class _PersonalPageState extends State<PersonalPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:
ListView.builder( //use ListView here to show all the names and genders
itemCount: widget.names.length,
itemBuilder: (BuildContext context,int index){
return ListTile(
title: Text(widget.names[index]),
subtitle: Text(widget.genders[index])
],
);
})
);
}
}
Your _HomePageState should look like this:
class _HomePageState extends State<HomePage> {
//define your variables here so they are accessible throughout your widget tree
List<String> familyMemberName = [];
List<String> familyMemberGender = [];
List<String> familyMemberAge = [];
List<String> familyMemberRelationship = [];
#override
initState() {
// TODO: implement initState
super.initState();
doSomeAsyncStuff();
}
Future<List> doSomeAsyncStuff() async {
final storage = new FlutterSecureStorage();
String value = await storage.read(key: 'Cnic');
print(value);
String url = 'http://api.igiinsurance.com.pk:8888/insurance_IgiGen/insurance-api/get_company_employee.php?offset=0&limit=1&cnic=${value}' ;
final msg = jsonEncode({"cnic": value});
Map<String,String> headers = {'Content-Type':'application/json'};
String token = value;
final response = await http.get(url);
var Data = json.decode(response.body);
print(Data);
var familyMembers = Data["records"][0]["family_members"];
print(familyMembers);
for (var familyMember in familyMembers){ //prints the name of each family member
//assign the values here
familyMemberName.add(familyMember["name"]);
familyMemberGender.add(familyMember["gender"]);
familyMemberAge.add(familyMember["age"]);
familyMemberRelationship.add(familyMember["relationship"]);
}
}
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
title: Text('IGI GENERAL INSURANCE'),
),
body: Center(
child: GestureDetector(
onTap: (){
if(familyMemberName.isNotEmpty() && familyMemberGender.isNotEmpty()){
//we pass the lists here
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PersonalPage(familyMemberName, familyMemberGender)),
}
//only navigate to the new page if the values of familyMemberName and familyMemberGender are retrieved from the function(because your function returns a future so it might take sometimes before the values are assigned)
);
},
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(35),
child: Image(
image: AssetImage("assets/images/reg.png"),
height: height * 0.1,
)),
Text(
'Personal',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
)
],
),
),
)
);
}
}