CODEWITHSUNDEEP
flutterdart
Abdullah
Abdullah

Reputation: 373

How to add a list of network images in NetworkImage() in Flutter

i want to make slide show with multiple images but my images is in json as list view and i don't know how can i make it in slideshow with list only

so how can i make it in NetworkImage() by a list not only one image

class SlideShow extends StatefulWidget {
  _SlideShowState createState() => new _SlideShowState();
}

class _SlideShowState extends State<SlideShow>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;
  List<GallariesModel> _images = <GallariesModel>[];

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 18.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
          listenForGallaries();
        });
      });
    controller.forward();
  }

  void listenForGallaries() async {
    final Stream<GallariesModel> stream = await getGallaries();
    stream.listen(
        (GallariesModel galaries) => setState(() => _images.add(galaries)));
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    Widget carousel = new Carousel(
      boxFit: BoxFit.cover,
      images: [
        NetworkImage("www.imagelink.com/"+
            _images.first.file),
             NetworkImage("www.imagelink.com/"+
            _images.last.file),
      ],
      animationCurve: Curves.fastOutSlowIn,
      animationDuration: Duration(seconds: 1),
    );

    return new Container(
      margin: EdgeInsets.all(13.0),
      height: screenHeight / 3.5,
      child: new ClipRRect(
        borderRadius: BorderRadius.circular(5.0),
        child: new Stack(
          children: [
            carousel,
          ],
        ),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

now i use some way that let me to see the first image and the last in the list is there any way that help me with that

Upvotes: 2

Views: 2200

Answers (2)

Pablo Barrera
Pablo Barrera

Reputation: 10963

A simpler way of doing what @hoangquyy proposed, would be like this:

_images.map((image) => NetworkImage('www.imagelink.com/${image.file}')).toList()

Upvotes: 1

hoangquyy
hoangquyy

Reputation: 2063

You can use map function to change all of your images to List Network images:

images: _images.map((GallariesModel image) {
      return new NetworkImage(
       "www.imagelink.com/"+image.file));
      }).toList(),

Upvotes: 1

Related Questions