关于Flutter引导页自定义底部指示器

　　1.先创建个StatefulWidget class WelcomePage extends StatefulWidget {   static const routeName = ＂/welcome＂;    @override   _WelcomePageState createState() => _WelcomePageState(); }  class _WelcomePageState extends State {   // 默认显示第一张图   int _currentIndex = 0;      @override   Widget build(BuildContext context) {     return Scaffold(       body: Stack(         children: [           // 图片播放容器PageView           buildPageView(),           // 底部指示器           buildIndicator(),           // 立即体验按钮           buildEnterButton()         ],       ),     );   }
　　2.创建PageView来存放图片 Widget buildPageView() {    return Positioned.fill(      child: PageView.builder(        itemCount: 4,        // 取消边缘弹簧效果        physics: ClampingScrollPhysics(),        // 解决图片之间切换产生的短暂背景显示出来        allowImplicitScrolling: true,        itemBuilder: (context, index) {          return Image.asset(            ＂assets/images/guideX${index+1}.png＂,            fit: BoxFit.cover,          );        },        onPageChanged: (value) {          setState(() {            _currentIndex = value;          });        },      ),    );  }
　　3.底部指示器 + 圆点 Widget buildIndicator() {     return Positioned(       left: 15,       right: 15,       bottom: 50,       child: Row(         mainAxisAlignment: MainAxisAlignment.center,         children: [0, 1, 2, 3].map((index) {           return buildDotView(_currentIndex == index);         }).toList()       )     );   }      // isSelected：用于圆点的宽度 Widget buildDotView(bool isSelected) {     return Padding(       padding: const EdgeInsets.all(8.0),       // 具有动画效果的Container       child: AnimatedContainer(         width: isSelected ? 40 : 12,         height: 12,         duration: Duration(milliseconds: 300),         decoration: BoxDecoration(           color: Color(0xFFf5ca2b),           borderRadius: BorderRadius.circular(6)         ),       ),     );   }
　　4.创建按钮；添加透明度效果 Widget buildEnterButton() {     return Positioned(       left: 0,       right: 0,       bottom: 45,       child: Row(         mainAxisAlignment: MainAxisAlignment.center,         children: [           AnimatedOpacity(             opacity: _currentIndex == 3 ? 1 : 0,              duration: Duration(milliseconds: 300),             child: Container(               width: 130,               height: 40,               child: FlatButton(                 color: Color(0xFFf5ca2b),                 shape: OutlineInputBorder(                   borderRadius: BorderRadius.circular(5),                   borderSide: BorderSide(                     width: 0,                      color: Color(0xFFf5ca2b)                   )                 ),                 child: Text(＂立即体验＂, style: TextStyle(                   fontSize: 17                 )),                 onPressed: () {                   print(＂立即体验＂);                 },               ),             ),           )         ],       )     );   }