引导页 + 自定义底部指示器

效果图：

welcome.gif

1.先创建个StatefulWidget

class WelcomePage extends StatefulWidget {
  static const routeName = '/welcome';

  @override
  _WelcomePageState createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  // 默认显示第一张图
  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("立即体验");
                },
              ),
            ),
          )
        ],
      )
    );
  }