简体   繁体   中英

How to map image inside ListView.separated in flutter

right now I have screen that contains static image, but what I want is mapping my image inside ListView.separated so it will show different image in my screen. Mostly, resource that I have read always using property of children to map image, but inside ListView.separated, there is no children property, is there a way to map my image? and this is my code

Container(
                child: new ListView.separated(
                    separatorBuilder: (BuildContext context, int index) {
                      return SizedBox(
                        width: 10,
                      );
                    },
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    physics: const ClampingScrollPhysics(),
                    itemCount: 3,
                    itemBuilder: (BuildContext context, int index) {
                      return myImage(index);
                    }))

Widget myImage(int index) {
    return Container(
        height: MediaQuery.of(context).size.width / 2,
        width: MediaQuery.of(context).size.width / 1.4,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(12)),
          image: DecorationImage(image: images[index].image,fit: BoxFit.cover),
        ),
      );
  }

  List<Image> images = [
  Image.asset("assets/images/logo1.png"),
  Image.asset("assets/images/logo2.png"),
  Image.asset("assets/images/logo3.png"),
  ];

ListView.seperated works similar to ListView.builder because you get an index flutter does the mapping for you just provide the widget you want it mapped to like this.

List<Image> images = [
    Image.asset("assets/images/logo.png"),
    Image.asset("assets/images/logo.png"),
    Image.asset("assets/images/logo.png"),
  ];
  Widget myImage(int index) {
    return Container(
      height: MediaQuery.of(context).size.width / 2,
      width: MediaQuery.of(context).size.width / 1.4,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(12)),
        image: DecorationImage(image: images[index].image, fit: BoxFit.cover),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: new ListView.separated(
          separatorBuilder: (BuildContext context, int index) {
            return SizedBox(
              width: 10,
            );
          },
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          physics: const ClampingScrollPhysics(),
          itemCount: 3,
          itemBuilder: (BuildContext context, int index) {
            return myImage(index);
          },
        ),
      ),
    );
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM