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,
),
),
))
],
),
);
}
}