添加引导页

Forever不止如此

于 2022-09-19 10:39:10 发布

阅读量201

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_45625639/article/details/126928884

版权

Flutter 专栏收录该内容

36 篇文章 5 订阅

订阅专栏

一、pubspec.yaml

1.准备引导页图片

2.引入圆点指示器插件

dots_indicator: ^2.1.0

二、guide_controller_page.dart

PageView + 圆点指示器DotsIndicator

class GuideControllerPage extends StatefulWidget {
  const GuideControllerPage({Key? key}) : super(key: key);

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

class _GuideControllerPageState extends State<GuideControllerPage> {
  late PageController pageController;
  int currentPageIndex = 0;

  @override
  initState() {
    pageController = PageController();
    super.initState();
  }

  //如果点击的不是当前项,切换
  void onChangePage(int index) {
    if (index != currentPageIndex) {
      setState(() {
        currentPageIndex = index;
      });
    }
  }

  //引导页图片+指示器
  Widget guideImageWidget(imageStr) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(imageStr), fit: BoxFit.fill)),
        ),
        Positioned(
          bottom: 100,
            child: DotsIndicator(
          dotsCount: 3,
          position: currentPageIndex.toDouble(),
          decorator: const DotsDecorator(
            color: Colors.black12, // Inactive color
            activeColor: Colors.white,
            size: Size(6.0, 6.0),
            activeSize: Size(10.0, 10.0),
            spacing: EdgeInsets.all(20.0),//指示点间距
          ),
        )),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        scrollDirection: Axis.horizontal,
        controller: pageController,
        onPageChanged: onChangePage,
        children: [
          guideImageWidget("lib/assets/images/guide_images/guide_image_1.jpg"),
          guideImageWidget("lib/assets/images/guide_images/guide_image_2.jpg"),
          Stack(
            alignment: Alignment.bottomCenter,
            children: [
              guideImageWidget(
                  "lib/assets/images/guide_images/guide_image_3.jpg"),
              Positioned(
                  bottom: 30,
                  child: MaterialButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    color: Colors.blue,
                    onPressed: () {},
                    child: const Text('立即体验'),
                  )),
            ],
          ),
        ],
      ),
    );
  }
}