轮播图是自媒体组件的一种，支持自定义轮播图片、轮播动画效果等。它可以在一个可视模块或者窗口里，通过鼠标点击或手指滑动展示多张图片。
今天我们使用 Flutter 的 PageView 和 自定义组件 来实现一个有进度条的轮播图。
1.PageView 是一个可以逐页滚动的列表,类似于 ListView 组件。我们先通过这张图片来简单认识它。
详细学习请点击 PageView 。
2.查看 PageView 源代码，了解它的使用情景和应用方式。
PageView.builder({
Key? key,
this.scrollDirection = Axis.horizontal,
this.reverse = false,
PageController? controller,
this.physics,
this.pageSnapping = true,
this.onPageChanged,
required IndexedWidgetBuilder itemBuilder,
int? itemCount,
this.dragStartBehavior = DragStartBehavior.start,
this.allowImplicitScrolling = false,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
this.scrollBehavior,
})
3.接下来开始配置开发环境（前面的项目已经配置好了）。
4.在 IDE 中新建一个Flutter项目，命名为SliderByPageView_demo。
打开IDE，选中【文件】->【新建】->【项目】
选中 New Flutter Project，点击【next】。
选择 Flutter，验证 Flutter SDK 的路径。完成后选择 Next。
输入项目名称SliderByPageView_demo，设定工作目录。
选择 Application 的项目类型，完成后选择 Next。
点击 完成即可
5.在项目文件中的【lib 文件夹】编写代码。
主界面代码：
Scaffold(
appBar:AppBar(
title:Text('轮播图'),
centerTitle:true,
),
body:Stack(
children: [
//底层显示的PageView
BuildPageView(),
//表层的圆点指示器
BuildCircleIndicator(),
],
),
);
PageView 显示：
PageViewBuildPageView() {
return PageView.builder(
//设置滑动模式
physics:new AlwaysScrollableScrollPhysics(),
//控制器
controller:_pageController2,
//构建每一屏的视图 UI 显示的效果
itemBuilder: (BuildContext context, int index) {
return buildItemWidget(index);
},
//PageView item 个数
itemCount:spll.length,
);
}
圆点进度器：
Positioned BuildCircleIndicator() {
return Positioned(
//底部对齐
bottom: 0.0, left: 0.0,right: 0.0,
child: new Container(
color: Colors.yellow,
padding: const EdgeInsets.all(20.0),
child: new Center(
//自定义的圆点切换指示器
child: buildCircleIndicator(),
),
),
);
}
PageView 显示构建：
return new ConstrainedBox(
constraints:const BoxConstraints.expand(),
///网络图片
child:Image.network(
///图片地址
spll[index],
),
);
}
6.检查代码中是否存在语法错误，如果有则根据提示修改，没有就直接运行。
7.配置主运行文件 main.dart 并运行程序，查看运行效果。
8.我们可以选择两种方式进行运行，ide加载出来之后，就可以查看运行效果。
Flutter最大的优势就是多端运行和应用热加载，我们可以利用一套 Dart 代码在不同的设备或平台上运行；热加载其实就是代码可以随时进行更新，在无需重新启动应用程序的情况下快速、轻松地测试、构建用户界面、添加功能以及修复错误。
