在flutter中动态创建Listview答案

【问题标题】：Create Listview dynamically in flutter在flutter中动态创建Listview
【发布时间】：2018-05-25 15:44:17
【问题描述】：

class _SearchState extends State<Search> {


  @override
  Widget build(BuildContext context) {
    widget.id;

    return new Scaffold(

      appBar: new AppBar(

        actions: <Widget>[

          new IconButton(
              icon: new Icon(Icons.exit_to_app),
              onPressed: _getTicketDetails
          )

        ],
        centerTitle: true,
        title: new Text
          ("TicketsDetails", style: const TextStyle(
          fontFamily: 'Poppins'
          ,),),),

    );
  }      


_getTicketDetails() async {
        print(widget.id);
        var userDetails = {};


        final response = await http.get(
            "https:...", headers: {
          HttpHeaders.AUTHORIZATION:
          "...
        });

        List returnTicketDetails = json.decode(response.body);

        print(returnTicketDetails);

        for (var i = 0; i < (returnTicketDetails?.length ?? 0); i++) {
          final ticketresponse = await http.get(
              "..${returnTicketDetails[i]["user_id"]
                  .toString()}", headers: {
            HttpHeaders.AUTHORIZATION:
            "...

          });

          userDetails[returnTicketDetails[i]["user_id"]] =
              json.decode(ticketresponse.body);
        }
        print(userDetails);


            }

你好！在控制台中，我通过打印（userDetails）得到的输出是：{513549601: {first_name: Test, last_name: Account, profile_image: tempURL。但是，我想动态创建一个Listview：userDetails[user_id][first_name] userDetails[user_id][last_name] 等等......但我担心的是，我应该在哪里实现Listview？因为我已经在最顶部使用了一个 Widget 构建。

【问题讨论】：

我在代码中没有看到你的 ListView :)
我想创建它，但我无法在第一个 Widget 构建中创建它，因为我想使用 _getTicketDetails() 方法中的变量 userDetails。
有没有机会在这个类中创建一个 ListView 并能够使用变量 userDetails？谢谢
我不确定你想要什么。如果您在此处创建 ListView 并使用 userDetails，我看不到任何问题
我必须使用 FutureBuilder 吗？？

标签： dart flutter

【解决方案1】：

试试这个！

假设您从 API 获取数据，例如 userdetails 列表。然后你只需要一个 ListView.builder() 和 Custom UserWidget/ListTile 。

结果：

代码：

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

void main() {
  runApp(new MaterialApp(home: new Home()));
}

class Home extends StatelessWidget {
  List userdetails = [
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text("Dynamic List"),
        backgroundColor: Colors.redAccent,
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return new UserWidget(
            firstName: userdetails[index]['first_name'],
            lastName: userdetails[index]['last_name'],
            imageURL: userdetails[index]['image_url'],
          );
        },
        itemCount: userdetails.length,
      ),
    );
  }
}

class UserWidget extends StatelessWidget {
  final String firstName;
  final String lastName;
  final String imageURL;

  const UserWidget({Key key, this.firstName, this.lastName, this.imageURL}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.white70),
      margin: new EdgeInsets.symmetric(vertical: 1.0),
      child: new ListTile(
        leading: new FadeInImage(
          placeholder: new AssetImage('assets/me.jpg'),
          image: new NetworkImage(imageURL),
        ),
        title: new Text("First Name : " + firstName),
        subtitle: new Text("Last Name : " + lastName),
      ),
    );
  }
}

另外，请查看 FadeInImage，它为网络图像提供了一个占位符[在图像加载之前显示本地资产]。

【讨论】：