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.