Flutter：如何将我存储的图像用于轮播答案

【问题标题】：Flutter: How to use my stored images for carouselFlutter：如何将我存储的图像用于轮播
【发布时间】：2022-07-05 22:54:15
【问题描述】：

我正在使用轮播滑块小部件，而不是获取图像链接，我将它们放在资产文件夹中，无论如何我可以将它用于我的轮播而不是图像链接。

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);
              },
            ),

我通过提取方法使用了我的 Carousel 滑块

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,
      )
              );
  }

我使用了图像网络小部件。无论如何我可以去做。谢谢

【问题讨论】：

标签： flutter image widget carousel carousel-slider

【解决方案1】：

假设您在 assets 文件夹中有图像，并且您已在 pub spec.yaml 中添加了这些路径

您可以在列表中添加图片

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

  ];

然后在构建图像中使用 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,
      )
              );
  }

【讨论】：