首页 > 解决方案 > Flutter如何传递数组并在其他小部件中显示

问题描述

我有一个数组列表,我需要将它传递给另一个有状态的小部件并在那里显示数组

这是我从 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"]);
    }

  }

如您所见,有 2 个列表 familyMember["name"] 和 familyMember["gender"] 我需要将其传递给 statefulwidget

我很简单地像这样传递它

                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => PersonalPage(familyMember["name"], familyMember["gender"])),
                        );

这是我需要在此处显示名称和性别数组的另一个有状态小部件

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

长笛

标签: flutterdart

解决方案


试试这个并按照以下方式更改您的代码:由于您的第一页代码丢失,我创建了一个虚拟的 forst 页面。

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

推荐阅读