设计给的效果如下：
UI布局图.png
拿到设计后，先把整体拆分成几个部分：
- “运营位”，可以通过左右滑动来切换图片。
- “进度条”，显示“运营位”当前位置的进度条。
然后就可以开始进行编码了。
第1步：绘制组件树
轮播图片与滑块的组件树
第2步：实现“运营位”
Flutter没有直接提供可以通过左右滑动来切换图片的组件，不过你可以在Flutter第三方包和插件仓库中找到解决方案，carousel_slider包是一个轮播（CarouselSlider）组件，支持无限滚动和自定义子组件。
import 'package:flutter/material.dart';
// 正常使用carousel_slider包的话，应该是下面这样来引用的：
// import 'package:carousel_slider/carousel_slider.dart';
// 下面这样写是因为我把carousel_slider包的代码复制下来，
// 研究了一下实现细节，然后放在了`../common/carousel_slider.dart`目录下。
import '../common/carousel_slider.dart';
/// 运营位图片列表。
final List<String> imgList = [
'assets/img_login_01.png',
'assets/img_login_02.png',
'assets/img_login_03.png',
];
/// 用给定的处理函数（`handler`）处理给定的列表数据（`list`），
/// 返回处理结果列表（`result`）。
List<T> worker<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
class CarouselWithIndicator extends StatefulWidget {
@override
_CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}
class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
/// 当前页面的索引。
int _current = 0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// carousel_slider包里的轮播组件（`CarouselSlider`）组件。
CarouselSlider(
// 使用自定义的工人`agent`方法生成一个容器组件列表。
items: worker<Widget>(imgList, (index, i) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
// 装饰图片（`DecorationImage`）类的图片（`image`）属性，
// 将图像绘制成装饰。
// 通常通过资产图片（`AssetImage`）使用随应用程序一起提供的图像，
// 或通过网络图像（`NetworkImage`）使用从网络获取的图像。
image: AssetImage(i),
// 适应属性，如何在框里展示图像。
// https://docs.flutter.io/flutter/painting/BoxFit-class.html
fit: BoxFit.cover
)
),
);
}),
// 是否自动播放，默认为`false`。
autoPlay: false,
// 当前页面在视窗中占用的空间，默认为`0.8`。
viewportFraction: 1.0,
// 宽高比例，默认为`16/9`。
aspectRatio: 3/2,
// 切换时当前页面逐渐变小，新页面逐渐变大直至完全替代当前页面，
// 默认为`true`。
distortion: false,
// 视窗中页面更新时的回调函数。
updateCallback: (index) {
setState(() {
_current = index;
});
},
),
// TODO: 第3步：实现“进度条”
],
);
}
}
第3步：实现“进度条”
Flutter直接提供的线性进度指示器（LinearProgressIndicator）组件可以轻松的实现“进度条”部分。但是“进度条”的宽度是没有给确定值的，所以你需要扩展（Expanded）组件，用于展开行、垂直或柔性（Flex）组件的子组件，可以实现灵活的布局。
// TODO: 第3步：实现“进度条”
Row(
children: <Widget>[
// 左边的空白部分，设置占2个弹性因子，高度为30.0以撑起“进度条”的高度。
Expanded(
// 柔性属性，用于此子组件的弹性因子。
flex: 2,
child: SizedBox(height: 30.0),
),
// 中间的“进度条”，设置占1个弹性因子。
Expanded(
flex: 1,
child: SizedBox(
height: 4.0,
// 线性进度指示器（`LinearProgressIndicator`）组件，
// 显示沿线的进度，也称为进度条。
child: LinearProgressIndicator(
// 背景颜色（`backgroundColor `）属性，进度指示器的背景颜色。
backgroundColor: const Color(0xFFE1E1E1),
// 值颜色（`valueColor`）属性，指标的颜色是动画的值。
valueColor: AlwaysStoppedAnimation(Color(0xFF414141)),
// 值（`value `）属性，0.0～1.0对应于进度条当前进度。
value: (_current + 1) / imgList.length,
),
),
),
// 右边的空白部分，设置占2个弹性因子，高度为30.0以撑起“进度条”的高度。
Expanded(
flex: 2,
child: SizedBox(height: 30.0),
),
],
),
第4步：还原效果
轮播图片与滑块的还原效果
