How to pass multiple images as list instead of single image over network widget

I wanted to make an app with page scroll animation and I saw a dependency which is cool, So I tried to use it but the issue that I'm facing is I can't able to pass many images from my assets to display it in the widget.

I tried to make a list of images, but I couldn't do it.

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new MyHomePage(title: ''),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.black,
      body: new Swiper(
        loop: false,




        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            "https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-1.jpg",
            fit: BoxFit.fill,
          );
        },
        itemCount: 9,

        pagination: new SwiperPagination(),
      ),
    );
  }
}

I want multiple images to display instead of one.

1 answer

  • answered 2019-06-25 08:13 Mukul

    As your mentioned url for the network image https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-1.jpg is an increasing index from 1,2,3 . .to 9 for mobile-wallpaper-i.jpg. Where i is the increasing index for your url , so the code for displaying all the images in the swiper should be

        Container(
          height:MediaQuery.of(context).size.height / 3,
          width: MediaQuery.of(context).size.width,
          child: new Swiper(
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 200,
                child: new Image.network(
                  "https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-${index+1}.jpg",
                  fit: BoxFit.fill,
                ),
              );
            },
            itemCount: 9,
            itemWidth: 200.0,
            itemHeight: 200.0,
            pagination: new SwiperPagination(),
          ),
        ),
    

    Here the builder starts with the index 0 to the itemcount as 9 in the code , and remember index for a builder always starts with 0 so increase your index with plus 1 as i did in my code above for your wallpaper-1.

    And In case if your want to show the images from a list of url you can also do that by this code.

        Container(
          height:MediaQuery.of(context).size.height / 3,
          width: MediaQuery.of(context).size.width,
          child: new Swiper(
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 200,
                child: new Image.network(
                  "${url[index+1]+".jpg"}",
                  fit: BoxFit.fill,
                ),
              );
            },
            itemCount: 9,
            itemWidth: 200.0,
            itemHeight: 200.0,
            pagination: new SwiperPagination(),
          ),
        ),
    

    Where url is a list of Strings and is given as

      List<String> url = ['https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-1',
      'https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-2',
      'https://wonderfulengineering.com/wp-content/uploads/2016/02/mobile-wallpaper-3'];