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