Flutter 如何在列表视图生成器中显示图像

您的URL似乎无法访问.您可以try 这种方式:

import 'package:flutter/material.dart';
import 'dart:collection';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as convert;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final queryParameters = {
    'country': 'us',
    'category': 'business',
    'apiKey': 'Your API Key',
  };
  //Get API key from https://newsapi.org/

  HashMap<dynamic, dynamic> data = HashMap<dynamic, dynamic>();
  double _currentSliderValue = 0;
  late final Future myFuture;

  @override
  void initState() {
    myFuture = apiCall();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: myFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasError) {
                return const Center(child: Text("No data available"));
              } else if (snapshot.hasData) {
                return SizedBox(
                  child: ListView.builder(
                    itemCount: snapshot.data?.length ?? 0,
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      return Card(
                        margin: const EdgeInsets.all(10),
                        child: ListTile(
                          leading: SizedBox(
                            width: 100,
                            child: CachedNetworkImage(
                              fit: BoxFit.fitHeight,
                              imageUrl:
                                  snapshot.data[_currentSliderValue.toInt()],
                              placeholder: (context, url) =>
                                  const CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  const Icon(Icons.error),
                            ),
                          ),
                          title: const Text("Your Title here"),
                          subtitle: const Text("Your SubTitle here"),
                          trailing: const Text("Your Training here"),
                        ),
                      );
                    },
                  ),
                );
              }
            }
            return const Center(child: CircularProgressIndicator());
          }),
    );
  }

  Future apiCall() async {
    List<String> list = [];
    var url = Uri.https('newsapi.org', 'v2/top-headlines', queryParameters);

    var response = await http.get(url);
    if (response.statusCode == 200) {
      var jsonResponse =
          convert.jsonDecode(response.body) as Map<String, dynamic>;

      var articles = jsonResponse['articles'];

      for (var i = 0; i < articles.length; i++) {
        var articleData = articles[i];
        var urls = articleData["urlToImage"];
        if (urls != null) {
          list.add(urls);
        }
      }

      return list;
    } else {
      debugPrint('Request failed with status: ${response.statusCode}.');
    }
  }
}