如何将List <Map>的信息获取到Flutter中的另一个屏幕？

Question

我是Flutter的新手，我正在使用该框架为我的大学设计一个项目。我有这个屏幕，谁在使用列表并且正在按我的需要工作：

class BarberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BarberList(),
      ),
    );
  }
}

class BarberList extends StatefulWidget {
  BarberList({Key key}) : super(key: key);

  // static final String path = "lib/src/pages/lists/list2.dart";
  _BarberListState createState() => _BarberListState();
}

class _BarberListState extends State<BarberList> {
  final TextStyle dropdownMenuItem =
  TextStyle(color: Colors.black, fontSize: 18);

  final primary = Color(0xFF63736B);
  final secondary = Color(0xFF0C0E0B);
  final green = Color(0xFF79FF00);

  final List<Map> barberLists = [
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xfff0f0f0),
        body: SingleChildScrollView(
          child: Container(
            height: MediaQuery
                .of(context)
                .size
                .height,
            width: MediaQuery
                .of(context)
                .size
                .width,
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 145),
                  height: MediaQuery
                      .of(context)
                      .size
                      .height,
                  width: double.infinity,
                  child: ListView.builder(
                      itemCount: barberLists.length,
                      itemBuilder: (BuildContext context, int index) {
                        return buildList(context, index);
                      }),
                ),
                Container(
                  height: 140,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: green,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(30),
                          bottomRight: Radius.circular(30))),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: Icon(
                            Icons.arrow_back,
                            color: Colors.white,
                          ),
                        ),
                        Text(
                          "Barbearias",
                          style: TextStyle(color: Colors.white, fontSize: 24),
                        ),
                        IconButton(
                          onPressed: () {},
                          icon: Icon(
                            Icons.filter_list,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 110,
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 20),
                        child: Material(
                          elevation: 5.0,
                          borderRadius: BorderRadius.all(Radius.circular(30)),
                          child: TextField(
                            // controller: TextEditingController(text: locations[0]),
                            cursorColor: Theme
                                .of(context)
                                .primaryColor,
                            style: dropdownMenuItem,
                            decoration: InputDecoration(
                                hintText: "Procurar Barbearias",
                                hintStyle: TextStyle(
                                    color: Colors.black38, fontSize: 16),
                                prefixIcon: Material(
                                  elevation: 0.0,
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(30)),
                                  child: Icon(Icons.search),
                                ),
                                border: InputBorder.none,
                                contentPadding: EdgeInsets.symmetric(
                                    horizontal: 25, vertical: 13)),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildList(BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.white,
      ),
      width: double.infinity,
      height: 120,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      child: GestureDetector(
        onTap: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text(index.toString()),
          ));
        },
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 60,
              height: 60,
              margin: EdgeInsets.only(right: 15, top: 20),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(width: 3, color: secondary),
                image: DecorationImage(
                    image: CachedNetworkImageProvider(
                        barberLists[index]['logoText']),
                    fit: BoxFit.fill),
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    barberLists[index]['name'],
                    style: TextStyle(
                        color: primary,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.location_on,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['location'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.calendar_today,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['type'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.call_end,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['phone'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

我需要按一下它们来查看此列表中每个项目的信息，但是我不知道如何在新屏幕上获取信息。 我尝试遵循此示例“ https://flutter.dev/docs/cookbook/navigation/passing-data”，但它使用了一个类，因此无法与此列表一起使用。 我真的需要帮助。

谢谢！

Answer 1

您可以使用Navigator.push
您可以在

下复制粘贴运行完整代码

代码段

Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailScreen(detailData: barberLists[index]),
            ),
          );
...
class DetailScreen extends StatelessWidget {
  final Map detailData;

  DetailScreen({Key key, @required this.detailData}) : super(key: key);

工作演示

完整代码

import 'package:flutter/material.dart';
//import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: BarberList(),
    );
  }
}

class BarberList extends StatefulWidget {
  BarberList({Key key}) : super(key: key);

  // static final String path = "lib/src/pages/lists/list2.dart";
  _BarberListState createState() => _BarberListState();
}

class _BarberListState extends State<BarberList> {
  final TextStyle dropdownMenuItem =
  TextStyle(color: Colors.black, fontSize: 18);

  final primary = Color(0xFF63736B);
  final secondary = Color(0xFF0C0E0B);
  final green = Color(0xFF79FF00);

  final List<Map> barberLists = [
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
    {
      "name": "Barbearia do PA",
      "location": "Rua Paraná, 184 - Cidade de Deus",
      "type": "De 09h ás 18h - Seg. à Sex.",
      "phone": "(37) 99122-3338",
      "logoText":
      "https://cdn.pixabay.com/photo/2017/01/13/01/22/rocket-1976107_960_720.png"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xfff0f0f0),
        body: SingleChildScrollView(
          child: Container(
            height: MediaQuery
                .of(context)
                .size
                .height,
            width: MediaQuery
                .of(context)
                .size
                .width,
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 145),
                  height: MediaQuery
                      .of(context)
                      .size
                      .height,
                  width: double.infinity,
                  child: ListView.builder(
                      itemCount: barberLists.length,
                      itemBuilder: (BuildContext context, int index) {
                        return buildList(context, index);
                      }),
                ),
                Container(
                  height: 140,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: green,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(30),
                          bottomRight: Radius.circular(30))),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: Icon(
                            Icons.arrow_back,
                            color: Colors.white,
                          ),
                        ),
                        Text(
                          "Barbearias",
                          style: TextStyle(color: Colors.white, fontSize: 24),
                        ),
                        IconButton(
                          onPressed: () {},
                          icon: Icon(
                            Icons.filter_list,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 110,
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 20),
                        child: Material(
                          elevation: 5.0,
                          borderRadius: BorderRadius.all(Radius.circular(30)),
                          child: TextField(
                            // controller: TextEditingController(text: locations[0]),
                            cursorColor: Theme
                                .of(context)
                                .primaryColor,
                            style: dropdownMenuItem,
                            decoration: InputDecoration(
                                hintText: "Procurar Barbearias",
                                hintStyle: TextStyle(
                                    color: Colors.black38, fontSize: 16),
                                prefixIcon: Material(
                                  elevation: 0.0,
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(30)),
                                  child: Icon(Icons.search),
                                ),
                                border: InputBorder.none,
                                contentPadding: EdgeInsets.symmetric(
                                    horizontal: 25, vertical: 13)),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildList(BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.white,
      ),
      width: double.infinity,
      height: 120,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      child: GestureDetector(
        onTap: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text(index.toString()),
          ));

          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailScreen(detailData: barberLists[index]),
            ),
          );

        },
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 60,
              height: 60,
              margin: EdgeInsets.only(right: 15, top: 20),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(width: 3, color: secondary),
                /*image: DecorationImage(
                    image: CachedNetworkImageProvider(
                        barberLists[index]['logoText']),
                    fit: BoxFit.fill),*/
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    barberLists[index]['name'],
                    style: TextStyle(
                        color: primary,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.location_on,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['location'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.calendar_today,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['type'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.call_end,
                        color: secondary,
                        size: 20,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text(barberLists[index]['phone'],
                          style: TextStyle(
                              color: primary, fontSize: 13, letterSpacing: .3)),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo.
  final Map detailData;

  // In the constructor, require a Todo.
  DetailScreen({Key key, @required this.detailData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(detailData["name"]),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(detailData["location"]),
      ),
    );
  }
}