dome用到的开源组件
flutter_swiper(引导页中的图片轮播)
shared_preferences(用于判断是不是第一次进入app,从而显示不显示引导页)
common_utils(用于判断引导页的_bannerList对象是否为空，防止初始化的时候_bannerList为空报错)
在dome实现引导页需要在MaterialApp home指定为SplashPage，在routes里面配置主界面MainPage。SplashPage切换到MainPage通过Navigator.of(context).pushReplacementNamed('/MainPage')实现。
main.dart
import 'package:flutter/material.dart';
import 'package:splash/pages/SplashPage.dart';
import 'package:splash/pages/MainPage.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
routes: {
'/MainPage': (ctx) => MainPage(),
},
home: SplashPage(),
);
}
}
SplashPage分为2层，默认启动图，引导图。
使用_isShow来控制页面显示状态，status=false显示启动图，status=true显示引导图。
SplashPage.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:common_utils/common_utils.dart';
import 'package:splash/utils/index.dart';
class SplashPage extends StatefulWidget {
SplashPage({Key key}) : super(key: key);
@override
_SplashPageState createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
bool _isShow = false;
List<String> _guideList = [
Utils.getImgPath('common_loading_icon_01@3x'),
Utils.getImgPath('common_loading_icon_02@3x'),
Utils.getImgPath('common_loading_icon_03@3x'),
Utils.getImgPath('common_loading_icon_04@3x'),
];
List<String> _titleList = ['欢迎使用', '币币交易重磅上线', '场外交易即将开放', '随时随地了解行情'];
List<String> _contextList = [
'快速买卖安全可信赖的数字资产交易所，冷存储、 多重加密、银行级安全保障',
'支持BTC/USDT 、ETH/USDT 、LTC/USDT等 多种交易对',
'买卖自由，快速成交，安全可靠，支持全球法币 ',
'掌上K线，市场数据，多维分析，帮助您随时随地获得利好信息'
];
List<Widget> _bannerList = new List();
@override
void initState() {
super.initState();
_initSplash();
}
void _goMian() {
Navigator.of(context).pushReplacementNamed('/MainPage');
}
void _initBannerData() {
for (int i = 0, length = _guideList.length; i < length; i++) {
if (i == (length - 1)) {
_bannerList.add(new Container(
child: new Stack(
children: <Widget>[
new Image.asset(
_guideList[i],
fit: BoxFit.fitWidth,
height: double.infinity,
),
new Positioned(
height: 130.0,
left: 34.0,
right: 34.0,
bottom: 90.0,
child: new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(bottom: 12.5),
child: Text(
_titleList[i],
style: new TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
),
new Text(
_contextList[i],
style: new TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 14.0,
height: 1.1),
textAlign: TextAlign.center,
),
],
)),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
margin: EdgeInsets.only(bottom: 57.0),
child: InkWell(
onTap: () {
_goMian();
},
child: new Container(
padding: EdgeInsets.fromLTRB(43.0, 12.0, 43.0, 12.0),
child: new Text('立即体验',
style: new TextStyle(
fontSize: 14.0, color: Color(0xFF33363A))),
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFFFFE254), Color(0xFFFFC12A)],
),
borderRadius: BorderRadius.all(Radius.circular(4.0))),
),
),
),
)
],
),
color: Color(0xFF1E2125),
));
} else {
_bannerList.add(new Container(
color: Color(0xFF1E2125),
child: new Stack(
children: <Widget>[
new Image.asset(
_guideList[i],
fit: BoxFit.fitWidth,
height: double.infinity,
),
new Positioned(
height: 130.0,
left: 34.0,
right: 34.0,
bottom: 90.0,
child: new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(bottom: 12.5),
child: Text(
_titleList[i],
style: new TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
),
new Text(
_contextList[i],
style: new TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 14.0,
height: 1.1),
textAlign: TextAlign.center,
),
],
)),
],
),
));
}
}
}
void _ininBanner() {
_initBannerData();
}
void _initSplash() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
Future.delayed(new Duration(milliseconds: 3000), () {
prefs.remove('splash_bol');
if (prefs.getBool('splash_bol') == null) {
setState(() {
_isShow = true;
});
_ininBanner();
} else {
_goMian();
//Navigator.of(context).pushReplacementNamed('/MainPage ');
}
prefs.setBool('splash_bol', true);
print(prefs.getBool('splash_bol'));
});
}
@override
Widget build(BuildContext context) {
return new Material(
child: new Stack(children: <Widget>[
new Offstage(offstage: _isShow, child: _buildSplash()),
new Offstage(
offstage: !_isShow,
child: ObjectUtil.isEmpty(_bannerList)
? new Container()
: Swiper(
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return _bannerList[index];
},
pagination: SwiperPagination(
alignment: Alignment.bottomCenter,
margin: const EdgeInsets.fromLTRB(0, 0, 0, 20),
builder: DotSwiperPaginationBuilder(
color: Colors.black54, activeColor: Colors.white)),
controller: SwiperController(),
scrollDirection: Axis.horizontal,
autoplay: false,
loop: false,
onTap: (index) => print('点击了第$index'),
),
),
_skipWidget()
]),
);
}
Widget _buildSplash() {
return new Image.asset(
Utils.getImgPath('default_hubi'),
fit: BoxFit.fitWidth,
height: double.infinity,
width: double.infinity,
);
}
Widget _skipWidget() {
return _isShow
? new Positioned(
top: 25.0,
right: 25.0,
child: new Container(
alignment: Alignment.bottomRight,
child: InkWell(
onTap: () {
_goMian();
},
child: new Container(
padding: EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
child: new Text('跳过',
style: new TextStyle(
fontSize: 14.0, color: Color(0xFF4E535A))),
decoration: new BoxDecoration(
color: Color(0xFF1E2125),
borderRadius:
BorderRadius.all(Radius.circular(30.0)),
border: new Border.all(
width: 0.33, color: Color(0xFF4E535A)))))))
: new Container();
}
}
启动页
引导页
解决android白屏问题：
修改原生的drawable目录下的launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<item android:drawable="@mipmap/default_hubi" />
</layer-list>
并在mipmap-xhdpi文件夹里加入default_hubi.png文件
GitHub：plash
