在颤动中为滑块使用离线图像答案

【问题标题】：use offline image for slider in flutter在颤动中为滑块使用离线图像
【发布时间】：2020-02-28 20:37:57
【问题描述】：

晚上好

我使用了这个滑块图像示例，它工作正常，但我有一点问题，我想在这段代码上使用我的本地图像，但是当项目运行时，它显示蓝色矩形，我该如何使用我的此滑块上的本地图像？谢谢你这是代码：

    class CarouselDemo extends StatefulWidget {
    CarouselDemo() : super();

     final String title = "Carousel Demo";

     @override
    CarouselDemoState createState() => CarouselDemoState();
    }

    class CarouselDemoState extends State<CarouselDemo> {

    CarouselSlider carouselSlider;
    int _current = 0;
     List imgList = [
    new AssetImage('images/main-slider/1.jpg'),
    new AssetImage('images/main-slider/2.jpg'),
    new AssetImage('images/main-slider/3.jpg'),
    new AssetImage('images/main-slider/4.jpg'),
    ];


     @override
     Widget build(BuildContext context) {
       return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            carouselSlider = CarouselSlider(
              height: 400.0,
              initialPage: 0,
                                onPageChanged: (index) {
                setState(() {
                  _current = index;
                });
              },
              items: imgList.map((imgUrl) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 10.0),
                      decoration: BoxDecoration(
                        color: Colors.green,
                      ),
                      child: Image.network(
                        imgUrl,
                        fit: BoxFit.fill,
                      ),
                    );
                  },
                );
              }).toList(),
            ),
        ),
      ),
    );
  }

【问题讨论】：

嗨@Mehrdad Hosseini，我的回答是我假设您知道如何添加资产和图像，如果不知道，请阅读此flutter.dev/docs/development/ui/assets-and-images

标签： flutter dart slider carousel

【解决方案1】：

问题是imgList 是List<AssetImage>，但您正在尝试使用 Image.network 显示图像。

Image.network 创建一个显示从网络。

您需要创建一个List<Sring>，其中的字符串将是相对于pubspec.yaml 文件的路径。也不要使用 Image.Network 你应该使用 Image.assest 因为你想创建一个小部件来显示从资产包获得的 [ImageStream]。

class CarouselDemo extends StatefulWidget {
  CarouselDemo() : super();

  final String title = "Carousel Demo";

  @override
  CarouselDemoState createState() => CarouselDemoState();
}

class CarouselDemoState extends State<CarouselDemo> {
  CarouselSlider carouselSlider;
  int _current = 0;
  List imgList = [
    'images/main-slider/1.jpg',
    'images/main-slider/2.jpg',
    'images/main-slider/3.jpg',
    'images/main-slider/4.jpg'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            carouselSlider = CarouselSlider(
              height: 400.0,
              initialPage: 0,
              onPageChanged: (index) {
                setState(() {
                  _current = index;
                });
              },
              items: imgList.map((imgUrl) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 10.0),
                      decoration: BoxDecoration(
                        color: Colors.green,
                      ),
                      child: Image.asset(
                        imgUrl,
                        fit: BoxFit.fill,
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：