Flutter轮播图入坑记录

小~小

已于 2023-05-26 14:38:23 修改

阅读量145

点赞数

分类专栏： Flutter 文章标签： flutter android

于 2023-05-26 13:43:12 首次发布

本文链接：https://blog.csdn.net/u014196765/article/details/130882088

版权

Flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

电脑刚刚配置了FLutter，打算做一个轮播图的效果，于是全网搜索实现轮播图得效果，大部分提到了flutter_swiper
于是我运行命令

安装包问题

flutter pub add flutter_swiper

报错了，提示空安全
在这里插入图片描述
从网上查找方法，可以运行命令来修复

pub upgrade --null-safety

很遗憾，又报错了，我的dart是3.0，这个不再支持
在这里插入图片描述

解决问题：

那么继续查找，发现这个包flutter_swiper_null_safety可以用，运行命令

flutter pub add flutter_swiper_null_safety

这次终于安装成功了
在这里插入图片描述

开始编程吧

加载网络图片



class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title}) : super();

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Map> imgList = [
    {"url": "http://xxx/images/123.png"},
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(

      body: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Container(
                // width: 300,
                child: AspectRatio(
                    aspectRatio: 4.0 / 3.0,
                     child: Image.network(
                      imgList[index]["url"],
                      fit: BoxFit.cover,
                    )));
      
          },
          itemCount: imgList.length,
          // pagination: new SwiperPagination(),
          // //下面的分页小点
          loop: true,
          autoplay: false,
          autoplayDelay:8000,
//        control: new SwiperControl(),  //左右的那个箭头,在某模拟器中会出现蓝线
          ),
    );
  }
}

加载本地图片

在根目录下新建文件夹images，当然可以其他得名字

在这里插入图片描述
配置pubspec.yaml
增加如下

  assets:
     - images/

在这里插入图片描述



class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title}) : super();

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Map> imgList = [
    {"url": "images/123.png"},


  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(

      body: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Container(
                // width: 300,
                child: AspectRatio(
                    aspectRatio: 4.0 / 3.0,
   
                    child: Image(
                      image:AssetImage(imgList[index]["url"]),
                      fit: BoxFit.contain,
                    )));
          },
          itemCount: imgList.length,
          // pagination: new SwiperPagination(),
          // //下面的分页小点
          loop: true,
          autoplay: false,
          autoplayDelay:8000,
//        control: new SwiperControl(),  //左右的那个箭头,在某模拟器中会出现蓝线
          ),
    );
  }
}