Question 216095 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to display image in listview builder

I took pictures to show in listview builder but found that my images are not showing I use image.network To pull the picture to show which my pictures are stored in the folder Problem_image and the name of the image is stored in the database. How can I modify it to show my image?
enter image description here

Expanded(
              child: StreamBuilder(
                 stream: _streamController.stream,
                 builder: (context, snapshots) {
                  if (snapshots.hasData) {
                    return ListView.builder(
                        itemCount: problemlist.length,
                         itemBuilder: ((context, index) {
                           problemModel problem = problemlist[index];
                           return Card(
                            margin: EdgeInsets.all(10),
                            child: ListTile(
                              leading: Image.network(
                                'http://192.168.1.148/skc/Problem_image/${problem.image}',
                                fit: BoxFit.cover,
                                width: 100,
                              ),
                              title: Text(
                                problem.name_surname,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 19),
                              ),
                              subtitle: Text(
                                problem.status,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 17),
                              ),
                              trailing: Text(
                               problem.area,
                               style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 16),
                              ),
                            ),
                          );
                        }));
                  }
                   return Center(
                    child: CircularProgressIndicator(),
                  );
                },
              ),
            )
Tags:

2

Answers


  1. 0

    i think you image url not reachable. try to this url to show network image if this url work then definitely your url not reachable.

    Step 1. Change image Url.(try this custom url for load image if image load then your image url not reachable)

            Image.network(
      'https://i.postimg.cc/4dH7v0W1/10x-featured-social-media-image-size.png',
      fit: BoxFit.cover,
      width: 100,
    ),

    Please ensure that the URL you provide is reachable and contains a valid image for it to be displayed correctly.

    As an AI language model, I don’t have access to external content or the ability to display images directly. However, I can help you understand why the image URL might not be reachable and provide some troubleshooting tips.

    When an image URL is not reachable, it could be due to various reasons:

    1. Incorrect URL: The URL provided might be misspelled or contain errors, leading to a failure in reaching the image server.

    2. Server Issues: The server hosting the image might be down or experiencing technical difficulties, making the image temporarily or permanently unavailable.

    3. Expired Content: If the image was hosted on a time-limited service or the URL has an expiration date, it could become unreachable after a certain period.

    4. Network Connectivity: The issue might be related to your internet connection. Slow or unstable internet connections can prevent you from reaching the image server.

    5. Blocked Access: Some networks or firewall settings might block access to certain URLs or websites, including the image server.

    6. Restrictive Permissions: The image might be hosted on a platform or website with restricted access, requiring specific permissions to view it.

    To troubleshoot the issue and determine if the problem is with the image URL or your network, you can try the following steps:

    1. Verify the URL: Double-check the image URL for any typos or errors. Ensure it is correctly formatted.

    2. Test with Other URLs: Try accessing other image URLs or websites to see if the problem is specific to the URL you are trying to reach.

    3. Use Different Devices: Try accessing the URL on different devices, such as a computer, smartphone, or tablet, to see if the issue is device-specific.

    4. Clear Browser Cache: Clear your browser’s cache and cookies, as they might sometimes interfere with accessing certain URLs.

    5. Try Different Browser or Incognito Mode: Test the URL in a different web browser or use the incognito/private browsing mode to rule out any browser-related issues.

    6. Check Internet Connection: Ensure that you have a stable and reliable internet connection. If needed, try connecting to a different network.

    7. Disable VPN or Proxy: If you are using a VPN or proxy, disable it temporarily to see if it affects your ability to access the image URL.

    8. Contact the Website Owner: If the image is hosted on a specific website, reach out to the website’s administrator or support team to inquire about any potential issues with the image or their server.

    By following these steps, you can pinpoint the cause of the problem and potentially resolve the issue of the unreachable image URL.

    Login or Signup to reply.
  2. 0

    Seems your url is not reachable, you can try this way

    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}.');
    }
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search