Flutter how to pass array and show in other widget - flutter

Question

I have a list of arrays i need to pass it to the other stateful widget and show the array there
This is my function code which retrieve data from API
Future<List> doSomeAsyncStuff() async {
final storage = new FlutterSecureStorage();
String value = await storage.read(key: 'Cnic');
print(value);
String url = 'http://api.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
print(familyMember["name"]);
print(familyMember["gender"]);
}
}
As you can see there is 2 list familyMember["name"] and familyMember["gender"] i need to pass it to statefulwidget
I am simple passing it like this
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PersonalPage(familyMember["name"], familyMember["gender"])),
);
This is my other stateful widget I need to show the array of name and gender here
import 'package:flutter/material.dart';
class PersonalPage extends StatefulWidget {
final String name;
final String gender;
PersonalPage(this.name, this.gender);
#override
_PersonalPageState createState() => _PersonalPageState();
}
class _PersonalPageState extends State<PersonalPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('I need to print name and gender here ')
),
);
}
}
flut

Answer 1

Try this and change your code as per this: As your First Page code is missing I have created a dummy forst Page.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'My APP',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List of ....'),
),
body: Center(
child: RaisedButton(
child: Text('Open details'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PersonalPage("NAME","GENDER")),
);
},
),
),
);
}
}
class PersonalPage extends StatefulWidget {
final String name;
final String gender;
PersonalPage(this.name, this.gender);
#override
_PersonalPageState createState() => _PersonalPageState();
}
class _PersonalPageState extends State<PersonalPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children : [
Text(widget.name),
Text(widget.gender),
]
)
),
);
}
}

Answer 2

You are doing wrong you are passing list and in stateful widget you mention its a string you can do something like this
List<String> familyMemberName = [];
List<String> familyMemberGender = [];
Future<List> doSomeAsyncStuff() async {
final storage = new FlutterSecureStorage();
String value = await storage.read(key: 'Cnic');
print(value);
String url = 'http://api.php' ;
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){
familyMemberName.add(familyMember["name"]);
familyMemberGender.add(familyMember["gender"]);
print(familyMemberName);
}
}
and in you personal widget like this
import "package:flutter/material.dart";
class PersonalPage extends StatefulWidget {
final List<String> names;
final List<String> relation;
PersonalPage(this.names,this.relation);
#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 Padding(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
child: Card(
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('Name:', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
Text(widget.names[index])
],
),
Row(
children: <Widget>[
Text('Gender:', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
Text(widget.genders[index])
],
),
],
),
),
),
);
})
);
}
}
Sorry i test code so thats why i add it in card

Answer 3

Text(widget.name)
Text(widget.gender)
or
Text("My name is ${widget.name} and my gender is ${widget.gender}")