flutter（1） 启动页 引导页

flutter 启动页 引导页

Android 原生引导页面的方法如下

1 自定义 使用 ViewPager控件

2使用第三方 组建AppIntro AppIntro快速启动页面

flutter  引导页面的方式

1使用 pageView  (指示器需要自定义)

2使用TabBarView，指示器TabPageSelector

代码如下可以直接使用。

启动页面

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  int index = 4;
  late Timer _timer;
 bool isFrist=true;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _timer = new Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        if (index > 0) {
          index--;
        } else {
          //跳转到引导页面
           
          Get.to(new GuidePage());

          index = 0;
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            "images/logo.png",
            fit: BoxFit.fill,
            width: double.infinity,
            height: double.infinity,
          ),
          Positioned(
              top: 40,
              right: 20,
              child: Container(
                width: 50,
                height: 27,
                alignment: Alignment.center,
                decoration: BoxDecoration(color: Colors.amber,borderRadius: BorderRadius.circular(40) ),
                child: Text("${index}"),
              ))
        ],
      ),
    );
  }
}

引导页面

class GuidePage extends StatefulWidget {
  @override
  _GuidePageState createState() => _GuidePageState();
}

class _GuidePageState extends State<GuidePage>
    with SingleTickerProviderStateMixin {
  late PageController _pageController;
  bool isVisible = true;
  TabController? _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pageController = new PageController();
    _tabController = new TabController(initialIndex: 0, length: 3, vsync: this);
    _tabController?.addListener(() {
      if (_tabController?.index == 2) {
        setState(() {
          isVisible = false;
        });
      } else {
        setState(() {
          isVisible = true;
        });
      }

    });
  }

  final List<Widget> listImage = [
    Image.asset(
      "images/a.png",
      fit: BoxFit.fill,
      width: double.infinity,
      height: double.infinity,
    ),
    Image.asset(
      "images/b.png",
      fit: BoxFit.fill,
      width: double.infinity,
      height: double.infinity,
    ),
    Image.asset(
      "images/c.png",
      fit: BoxFit.fill,
      width: double.infinity,
      height: double.infinity,
    ),

  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          TabBarView(
            controller: _tabController,
            children: [
              listImage[0],
              listImage[1],
              Stack(
                children: [
                  listImage[2],
                  Container(
                    margin: EdgeInsets.only(bottom: 80),
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: InkWell(
                        onTap: (){
                          //跳转去======mian
                        },
                        child: Container(
                          width: 150,
                          height: 40,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.amber,
                              borderRadius: BorderRadius.circular(40)),
                          child: Text("欢迎使用App"),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
          Visibility(
              visible: isVisible,
              child: Container(
                margin: EdgeInsets.only(bottom: 40),
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: TabPageSelector(
                    controller: _tabController,
                    selectedColor: Colors.amberAccent,
                    indicatorSize: 17,
                    color: Colors.black12,
                  ),
                ),
              ))
        ],
      ),
    );
  }
}