轮播图Banner功能的开发

1、

2、

使用插件 flutter_swiper

添加轮播图

 

3、添加指示器

 

4、

代码：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatefulWidget{
  //_TabNavigatorState定义好后，就可以修改该函数的返回值进行返回
@override
_HomePageState  createState()=>_HomePageState();

}

//在dart里面，如果要定义一个内部类，不能被外部访问的话，就可以以下划线开头
class _HomePageState extends State<HomePage>{
  List _imageUrls=[
    'http://pages.ctrip.com/commerce/promote/20180718/yxzy/img/640sygd.jpg',
    'http://dimg04.c-ctrip.com/images/700u0r000000gxvb93E54_810_235_85.jpg',
    'http://dimg04.c-ctrip.com/images/700c10000000pdili7D8B_780_235_57.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    //在build（）方法里面，可以将Scaffold（）作为整个页面的根节点
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 160,
              child: Swiper(
                itemCount: _imageUrls.length,
                autoplay: true,
                itemBuilder: (BuildContext context,int index){
                  return Image.network(_imageUrls[index],fit: BoxFit.fill);
                },
                pagination: SwiperPagination(),
              ),
            )
          ],
        )
      )
    );
  }

}

 

 

 

 

注：

遇到的问题

1、Waiting for another flutter command to release the startup lock...

原因：异常关闭studio时插件没下载完

解决办法：删除flutter安装目录下的flutter/bin/cache文件夹下的lockfile文件

如果无法删除或者提示需要权限时，可重启电脑试一下

 

2、flutter点击“Package get”后加载太慢

在环境变量中配置   变量名：PUB_HOSTED_URL和https://storage.flutter-io.cn

 

(我们在根据flutter中文网安装flutter的时候,设置了环境变量PUB_HOSTED_URL为https://pub.flutter-io.cn .这其实是把flutter原来下载第三方库存的地址https://pub.dartlang.org改为了 https://pub.flutter-io.cn.   cn地址是专门给国内用的,但是内容没有官方正宗org那个最新）
 

参考资料：https://blog.csdn.net/szintu/article/details/82454325

3、当配置完环境变量  变量名：PUB_HOSTED_URL和https://storage.flutter-io.cn后，点击package get，提示要下载的插件在https://storage.flutter-io.cn  不存在

原因：专门为中国用户提供的下载地址中还没有更新所需要下载的插件

解决把办法：将上面配置的变量  变量名：PUB_HOSTED_URL和https://storage.flutter-io.cn  删除

这样默认还从地址https://pub.dartlang.org进行下载，但是有时由于网络或者运行商或者其它的问题，下载不到，可以连接一下翻墙软件或者连接手机的热点试一下

 

4、pagination  [ˌpædʒɪˈneɪʃn]：分页

 

 

 

 

 

注：搜索插件地址：https://pub.dev/