Flutter中如何从API获取图片并在carousel_slider中展示？

问题根源 #

你的代码存在几个关键错误，导致轮播组件显示为空：

• 参数传递顺序颠倒：_buildItem方法定义时第一个参数是image，但调用时传的是名称字符串和图片地址，导致image变量实际拿到的是名称字符串，遍历单个字符作为图片地址，自然无法加载。
• FutureBuilder重复发起请求：每次组件build都会调用team()方法，引发不必要的重复请求，还可能导致状态不稳定。
• 全局变量初始化错误：List listResponse = {} as List; 用Map强制转List会引发潜在错误，应初始化为空列表。

修正步骤 #

1. 修正参数传递顺序 #

调整_buildItem的参数顺序，确保调用时图片地址对应正确参数。

2. 优化Future请求逻辑 #

将team()的返回值存储在state变量中，避免FutureBuilder每次build重新发起请求。

3. 修正全局变量初始化 #

把错误的List初始化改为空列表。

完整修正代码 #

// 修正全局变量初始化
Map mapResponse = {};
Map dataResponse = {};
List listResponse = [];

class apipro extends StatefulWidget {
  const apipro({Key? key}) : super(key: key);

  @override
  State<apipro> createState() => _apipro();
}

class _apipro extends State<apipro> {
  late Future<List> _teamFuture;

  Future<List> team() async {
    http.Response response;
    response = await http.get(Uri.parse(
        "https://www.archmage.lk/api/v1/webapi/getclients?page=0&limit=10"));

    Map mapResponse = json.decode(response.body);
    return mapResponse['data'] as List;
  }

  @override
  void initState() {
    _teamFuture = team();
    super.initState();
  }

  Widget _buildItem(String name, String imageUrl) {
    return CarouselSlider(
      options: CarouselOptions(
          viewportFraction: 0.3,
          autoPlayAnimationDuration: const Duration(milliseconds: 2000),
          autoPlay: true,
          enlargeCenterPage: true,
          height: 80),
      items: [
        Container(
          margin: const EdgeInsets.only(top: 20.0, left: 20.0),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(imageUrl),
              fit: BoxFit.fitHeight,
            ),
            borderRadius: BorderRadius.circular(32.0),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder<List?>(
          future: _teamFuture,
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.waiting:
                return const Text(
                  'Loading....',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w100,
                  ),
                );
              default:
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  List data = snapshot.data ?? [];
                  return ListView.builder(
                    shrinkWrap: true,
                    padding: const EdgeInsets.all(18),
                    itemBuilder: (context, index) {
                      return _buildItem(
                        data[index]['name']?.toString() ?? '',
                        data[index]['image']?.toString() ?? '',
                      );
                    },
                    itemCount: data.length,
                  );
                }
            }
          }),
    );
  }
}

额外说明 #

如果你的实际需求是所有API返回的图片组成一个全局轮播，而非每个列表项单独一个轮播，可调整结构如下：

@override
Widget build(BuildContext context) {
  return Center(
    child: FutureBuilder<List?>(
        future: _teamFuture,
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return const Text('Loading....');
            default:
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                List data = snapshot.data ?? [];
                return CarouselSlider(
                  options: CarouselOptions(
                      viewportFraction: 0.3,
                      autoPlayAnimationDuration: const Duration(milliseconds: 2000),
                      autoPlay: true,
                      enlargeCenterPage: true,
                      height: 80),
                  items: data.map((item) {
                    String imageUrl = item['image']?.toString() ?? '';
                    return Container(
                      margin: const EdgeInsets.only(top: 20.0, left: 20.0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(imageUrl),
                          fit: BoxFit.fitHeight,
                        ),
                        borderRadius: BorderRadius.circular(32.0),
                      ),
                    );
                  }).toList(),
                );
              }
          }
        }),
  );
}

内容的提问来源于stack exchange，提问作者Ishan Vithanage