我似乎无法在轮播小部件中显示我的JSON数据图像。 (颤振)

问题描述 投票:0回答:1

我正在尝试在轮播中显示图像时遇到了这个问题。我正在使用包carousel_pro。我很困惑,因为当我将内容硬编码到变量中时,它可以完美地显示在我的轮播小部件中。

 List<dynamic> featured = [
    NetworkImage('http://demo.ibinatech.com/dist/img/nasitomato.jpg',
        scale: 1.0),
    NetworkImage('http://demo.ibinatech.com/dist/img/nasiayam.jpg', scale: 1.0),
    NetworkImage('http://demo.ibinatech.com/dist/img/cm4.jpg', scale: 1.0),
  ];

但是当我尝试从JSON数据中获取它时,它将无法正常工作。

  Future<List> _getSlider() async {
    var data1 = await http.get(url_food);
    var displayFood = json.decode(data1.body)['data'];

    List<dynamic> slider = [];

    for (var u in displayFood) {

      slider.add(NetworkImage(u["image"]));

    }

    return (slider);
  }

[当我打印出JSON数据时,变量slider中包含的内容将得到正确的值,并且与变量featured中的值相同

[NetworkImage("http://demo.ibinatech.com/dist/img/nasitomato.jpg", scale: 1.0), NetworkImage("http://demo.ibinatech.com/dist/img/roti-canai.jpg", scale: 1.0), NetworkImage("http://demo.ibinatech.com/dist/img/nasiayam.jpg", scale: 1.0), NetworkImage("http://demo.ibinatech.com/dist/img/cm4.jpg", scale: 1.0), NetworkImage("http://demo.ibinatech.com/dist/img/mandy.jpg", scale: 1.0), NetworkImage("http://demo.ibinatech.com/dist/img/nasi-ayam-penyet-rm8.jpeg", scale: 1.0)]

这是在终端中抛出的错误:

I/flutter ( 3995): Another exception was thrown: NoSuchMethodError: The getter 'key' was called on null.
I/flutter ( 3995): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 3995): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 3995): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter ( 3995): Another exception was thrown: Page value is only available after content dimensions are established.

我的Json数据:

{
  "message": "Food retrieved successfully.",
  "data": [
    {
      "id": "1",
      "name": "Nasi Tomato",
      "description": "Nasi Tomato & Ayam",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/nasitomato.jpg",
      "price": "7"
    },
    {
      "id": "2",
      "name": "Roti Canai",
      "description": "Roti Canai Beserta Kuah",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/roti-canai.jpg",
      "price": "1"
    },
    {
      "id": "3",
      "name": "Nasi Ayam",
      "description": "Nasi Ayam set",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/nasiayam.jpg",
      "price": "6"
    },
    {
      "id": "6",
      "name": "test je",
      "description": "test je",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/cm4.jpg",
      "price": "12"
    },
    {
      "id": "7",
      "name": "Nasi Mandy",
      "description": "Nasi Arab Mandy Kambing",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/mandy.jpg",
      "price": "20"
    },
    {
      "id": "8",
      "name": "Nasi Ayam Penyet",
      "description": "Nasi ayam penyet",
      "image": "http:\/\/demo.ibinatech.com\/dist\/img\/nasi-ayam-penyet-rm8.jpeg",
      "price": "11"
    }
  ]
}

我想在轮播中显示图像的小部件:

         FutureBuilder(
                future: _getSlider(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  return SizedBox(
                      height: 200.0,
                      width: 350.0,
                      child: Carousel(
                        images: slider,
                        dotSize: 4.0,
                        dotSpacing: 15.0,
                        dotColor: Colors.red[400],
                        indicatorBgPadding: 5.0,
                        dotBgColor: Colors.white.withOpacity(0.5),
                        borderRadius: true,
                      ));
                }
                // SizedBox(height: 5.0),
                ),
json flutter dart carousel
1个回答
0
投票

这是不正确的:

images: slider

从快照获取数据时,您需要使用snapshot.data

尝试一下:

images: snapshot.data
© www.soinside.com 2019 - 2024. All rights reserved.