如何在flutter中显示从API获取的JSON数据？

Question

我想从 API 获取数据并将其显示在 Flutter 应用程序中。 我已经能够获取数据并使用 ListView 构建器显示它。 但是，我现在面临的问题是在这种情况下滚动无法正常工作，我不想以列表的形式显示数据。

那么，有没有其他方法可以获取数据并将其显示在应用程序中。 这就是 UI 的外观。

我无法使用 ListView 构建器或任何其他方式完成此操作，因为我对颤振非常陌生。

这是我在另一个小部件中使用的代码，在那里我遇到了滚动问题，以创建 ListView：

  @override
  _AllEventsState createState() => _AllEventsState();
}

class _AllEventsState extends State<AllEvents> {
  final String url =
      "api-url";
  List data;

  @override
  void initState() {
    super.initState();
    this.getAllEvents();
  }

  createRoute(id) {
    print('args $id');
    Navigator.pushNamed(context, '/eventdetail', arguments: id);
  }

  Future<String> getAllEvents() async {
    var response = await http.get(
      Uri.encodeFull(url),
      headers: {"Accept": "application/json"},
    );
    setState(() {
      var convertDataToJson = jsonDecode(response.body);
      data = convertDataToJson["events"];
    });
    return "Success";
  }

  @override
  Widget build(BuildContext context) {
  ScrollController _controller = new ScrollController();
    return Container(
      child: ListView.builder(
        physics: const AlwaysScrollableScrollPhysics(),
        controller: _controller,
        shrinkWrap: true,
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext cont, int index) {
          // format date
          var dateString = data[index]["eventDate"];
          var eventDate = Jiffy(dateString).MMMEd;
          return Container(
            padding: const EdgeInsets.fromLTRB(30, 7, 30, 7),
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  new InkWell(
                    onTap: () {
                      print('card tapped');
                      createRoute(data[index]['_id']);
                    },
                    child: Card(
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 3,
                            color: hexToColor("#EBEBEB"),
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
                        child: Column(
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                customText(
                                  eventDate.toString(),
                                  "#000000",
                                  "20.0",
                                  TextAlign.left,
                                  "Roboto Black",
                                  FontWeight.w900,
                                ),
                                customText(
                                  "10, 9",
                                  "#000000",
                                  "20.0",
                                  TextAlign.right,
                                  "Roboto Black",
                                  FontWeight.w900,
                                ),
                              ],
                            ),
                            SizedBox(height: 20),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: <Widget>[
                                Expanded(
                                  child: customText(
                                    "${data[index]['city']} | ${data[index]['arenaName']} | ${data[index]['categories'][0]['title']}",
                                    "#000000",
                                    "18.0",
                                    TextAlign.left,
                                    "Roboto Black",
                                    FontWeight.w900,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

这就是我从另一个小部件中的 API 获取数据的方式：

    print("$url${widget.eventId}");
    var response = await http.get(
      Uri.encodeFull("$url${widget.eventId}"),
      // headers: {"Accept": "application/json"},
    );

    print('events response ${response.body}');
    setState(() {
      var convertDataToJson = jsonDecode(response.body);
      data = convertDataToJson["event"];
      print(data);
    });
    return "Success";
  }```

Can you please suggest a way as to how I can display the data properly in flutter?

Answer 1

使用 FutureBuilder 从 api 获取数据，如下所示：-

FutureBuilder(
      future: yourMethodName(),
      builder: (context, AsyncSnapshot<NameOfModelClass> snapshot) {
        if (snapshot.data == null) {
          return Center(child: CircularProgressIndicator());
        }
        // after getting data from api
      },
    );

你的方法可以是这样的：

Future<NameOfModelClass> YourMethodName() async {
  final response = await http.get('Your url here');
  return NameOfModelClass.fromJson(json.decode(response.body.toString()));
}

可以使用jsonToDart生成模型类

我希望这会有所帮助:)