Flutter 商品列表页面开发：使用 FutureBuilder 获取数据并展示

本文将介绍使用 Flutter 开发商品列表页面的基本步骤，包括使用 FutureBuilder 获取数据、解析数据以及展示商品列表。

代码示例:

import 'package:flutter/material.dart';
import 'package:search_choices/search_choices.dart';
import 'package:video_book_ecommerce/compoment/ProductCard.dart';
import 'package:video_book_ecommerce/compoment/swipper.dart';
import 'package:video_book_ecommerce/service/GetProduct.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: FutureBuilder(
        //Future<List> getProducts(page, limit)
        future: GetProduct.getProducts(1, 10),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          print(snapshot.data);

          if (snapshot.hasData) {
            return Column(
              children: [
                // Swipper component

                // Product list
                Expanded(
                  child: ListView.builder(
                    itemCount: snapshot.data?.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ProductCard(
                        imageUrl: snapshot.data?[index]['imageUrl'],
                        title: snapshot.data?[index]['title'],
                        price: snapshot.data?[index]['price'],
                      );
                    },
                  ),
                ),
              ],
            );
          } else {
            print('no data');
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

常见问题：snapshot.data 在请求成功后为 null

在请求成功后，snapshot.data 应该是有值的，而不是 null。可能出现问题的原因有很多，例如：

服务器返回的数据格式不正确，导致无法解析成正确的数据类型。
请求过程中出现了网络或服务器问题，导致请求失败或返回的数据不完整。
在代码中有逻辑错误，导致无法正确处理请求结果。

排查问题建议：

在获取数据之前先打印一下请求的 URL，以及在获取到数据后打印一下数据的内容，检查是否符合预期。
在网络请求的过程中加入一些异常处理的代码，例如在请求失败时弹出提示框，方便我们快速定位问题。

总结：

本文介绍了使用 Flutter 开发商品列表页面的基本步骤，并分析了 snapshot.data 为 null 的常见原因，并提供了排查问题的建议。希望对您有所帮助。

Flutter 商品列表页面开发：使用 FutureBuilder 获取数据并展示