Flutter 将数据传递给 Statefulwidget

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),
              )
            ],
          ),
        ),
      )
    );
  }
}