I can't seem to display my JSON data image in my carousel widget. (Flutter)

Question

I am facing this problem where I am trying to display images in a carousel. I am using the package carousel_pro. I am confused because when I hard code the content in a variable it is working perfectly displayed in my carousel widget.

 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),
  ];

But when I try to fetch it from a JSON data it is not working.

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

When I print out the JSON data what contains in the variable slider I get the right value and same as the value in the variable 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)]

This is the error thrown in the terminal :

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.

My Json Data :

{
  "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"
    }
  ]
}

The widget where I want to display the images inside my carousel :

         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),
                ),

Answer 1

This is incorrect:

images: slider

When getting data from a snapshot u need to use snapshot.data

Try this:

images: snapshot.data