Flutter：如何从 API 获取数据并以列表形式显示 flutter 中的图像？

Question

How to fetch data from api.API responses is given below. show in the list form with image in flutter.

{
    "status": 1,
    "msg": "7 banners found",
    "data": [
        {
            "id": "14",
            "image": "https://www.sofikart.com/admin/upload/app_banner/1635945056.jpeg",
            "cat_id": "4",
            "product_id": "81",
            "url": null,
            "status": "Active",
            "ordering": "0",
            "updated": "2021-11-03 06:10:56"
        },
        {
            "id": "7",
            "image": "https://www.sofikart.com/admin/upload/app_banner/1642082634.jpeg",
            "cat_id": "4",
            "product_id": "111",
            "url": null,
            "status": "Active",
            "ordering": "1",
            "updated": "2021-10-28 04:53:26"
        }
    ] }

Answer 1

In this case, Flutter has a nice documentation with examples, that I'm pretty sure that will help you.

You can look here

Fetching data from the internet is necessary for most apps. Luckily, Dart and Flutter provide tools, such as the http package, for this type of work.

This recipe uses the following steps:

1. Add the http package.
2. Make a network request using the http package.
3. Convert the response into a custom Dart object.
4. Fetch and display the data with Flutter.