Flutter: How to use my stored images for carousel

Question

I am using a carousel slider widget, instead of sourcing for images link, I have them in an asset folder, is there anyway I can use it for my carousel instead of images link.

class _HomePageState extends State<HomePage> {
  final List<String> firstImages = [
      'https://cdn.pixabay.com/photo/2020/11/01/23/22/breakfast-5705180_1280.jpg',
  'https://cdn.pixabay.com/photo/2016/11/18/19/00/breads-1836411_1280.jpg',
  'https://cdn.pixabay.com/photo/2019/01/14/17/25/gelato-3932596_1280.jpg',
  'https://cdn.pixabay.com/photo/2017/04/04/18/07/ice-cream-2202561_1280.jpg',
   
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            CarouselSlider.builder(
              options: CarouselOptions(height: 161),
              itemCount: firstImages.length,
              itemBuilder: (context, index, realIndex) {
                final firstImage = firstImages[index];

                return buildImage(firstImage, index);
              },
            ),

I used my Carousel slider by extracting the method

Widget buildImage(String firstImage, int index) {
  return Container(
    margin: EdgeInsets.all( 20),
      color: Colors.grey,
      child: Image.network(
        firstImage,
        fit: BoxFit.cover,
        width: 250,
        height: 50,
      )
              );
  }

I made use of Image network widget. Is there anyway I can go about it. Thanks

Answer 1

Assuming you have images in the assets folder and that you have added those paths in pub spec.yaml

you can add the images in the list

final List<String> firstImages = [
      'assets/images/image1.png',
      'assets/images/image2.png',
      'assets/images/image3.png',
      'assets/images/image4.png',

  ];

then in build images use Image.asset

Widget buildImage(String firstImage, int index) {
  return Container(
    margin: EdgeInsets.all( 20),
      color: Colors.grey,
      child: Image.asset(
        firstImage,
        fit: BoxFit.cover,
        width: 250,
        height: 50,
      )
              );
  }