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;@overridevoid initState() {// TODO: implement initStatesuper.initState();_timer = new Timer.periodic(Duration(seconds: 1), (timer) {setState(() {if (index > 0) {index--;} else {//跳转到引导页面Get.to(new GuidePage());index = 0;timer.cancel();}});});}@overrideWidget 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;@overridevoid initState() {// TODO: implement initStatesuper.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,),];@overrideWidget 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,),),))],),);}
}

flutter（1）启动页引导页相关推荐

Android启动页,引导页适配华为手机(虚拟按键)显示问题
前言看到我这篇文章的同学肯定会质疑我开发的能力,我遇到的问题总是很奇怪,估计真的跟我的开发能力有关系~~~,最近公司的B端项目要上线了,UI妹子昨天给做了几张引导页与一张启动页,原来没有仔细观察过图 ...
Flutter实现App功能引导页
Flutter实现App功能介绍页 App功能介绍页,主要是由介绍app功能的几张图片和当前页指示符组成,如下效果我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来 ...
功能引导 android,Flutter实现App功能引导页
App功能介绍页,主要是由介绍app功能的几张图片和当前页指示符组成,如下效果我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在Pag ...
html app启动页制作,【示例】App引导页的制作
注意:本文为5+App的引导页制作方法,uni-app另行制作,推荐使用nvue制作,也可以参考插件市场已经封装的插件https://ext.dcloud.net.cn/plugin?id=192 启 ...
mui 启动页和引导页
一.启动页和引导页的概念 "启动页"(splash):app的启动界面,每次启动都会看到的(每次打开QQ都会看到一只企鹅). "引导页"(guide):guid ...
android 闪屏引导,启动体验设计-闪屏，启动页，引导页
冷启动(cold start) 冷启动是指应用尚未运行,系统创建进程并初始化应用. 热启动是指应用已经运行但是在后台被挂起,从后台恢复应用. 冷启动时间稍微会长一点,在此期间可能会看到白屏或黑屏或感受 ...
UI——day6.引导页的设计
认识引导页定义: 出现在加载完启动画面之后.进入界面首页之前用户所见到的一系列画面.往往是第一次打开应用时出现的画面且仅出现一次. 作用: 在用户使用产品之前提前告知其主要功能与特点看一下引导页中 ...
基本操作引导页的实现
1.效果图 2.使用步骤 1.添加依赖 //新手使用引导 // 下面注释是为了忽略//noinspection GradleCompatiblecompileOnly 'com.android.sup ...
APP界面引导页设计注意事项
海淘科技与你分享<APP界面引导页设计注意事项> 一.什么内容需要引导 1. 产品特色展示产品的核心竞争力及最有特色的点,让用户清晰地了解该产品和同类产品相比最突出的优势,有一个良好的第 ...

flutter（1）启动页引导页

flutter（1）启动页引导页相关推荐

最新文章

热门文章

flutter（1） 启动页 引导页

flutter（1） 启动页 引导页相关推荐

最新文章

热门文章

flutter（1）启动页引导页

flutter（1）启动页引导页相关推荐