前言
這一篇，我們繼續說實際開發中會用到的一些功能。
啟動頁
Android啟動頁
在 android/app/src/main/res/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" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_launcher" />
</item>
</layer-list>
如果有更進一步的需求，比如說要在啟動頁加載廣告圖，并延時幾秒的功能，就需要自己實現了。
思路如下
在main方法中返回自己定義的SplashWidgit(名字隨便起)，在其中處理自己的邏輯，包括加載廣告圖、設置延時等，延時結束后，跳轉至真正的主頁即可。
狀態欄
- 狀態欄顏色
1.使用MaterialApp的theme屬性，theme: ThemeData(primaryColor: Colors.green)， 請注意：這個是全局的
image.png
2.使用AppBar的backgroundColor屬性，backgroundColor: Colors.deepOrange
image.png
3.不使用AppBar，由于Flutter默認是從屏幕最頂部開始布局，所以，修改狀態欄顏色簡直太容易，只需要通過MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top取得狀態欄高度即可。
Container(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
//狀態欄高度
height: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
.padding
.top,
color: Colors.blue,
),
Container(
height: 200,
color: Colors.brown,
),
],
),
);
image.png
甚至你可以修改為漸變色，修改
Container的decoration屬性
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
)),
image.png
- 字體顏色
使用AppBar的brightness屬性：Brightness.light為黑色，Brightness.dark為白色；
不使用AppBar時，可以通過嵌套AnnotatedRegion<SystemUiOverlayStyle>來實現。
class StatusDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: AnnotatedRegion<SystemUiOverlayStyle>(
child: Column(
children: <Widget>[
Container(
height: 200,
color: Colors.brown,
),
],
),
value: SystemUiOverlayStyle(
statusBarColor: Colors.cyan,
//有Appbar時，會被覆蓋
statusBarIconBrightness: Brightness.light,
//底部navigationBar背景顏色
systemNavigationBarColor: Colors.white),
),
);
}
}
- 漸變色
使用AppBar的flexibleSpace，其中漸變方式還可選擇RadialGradient和SweepGradient
appBar: AppBar(
title: Text('DemoPage'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
)),
),
)
image.png
返回鍵監聽
可以WillPopScope 嵌套，可以用于監聽處理返回鍵的邏輯。其實WillPopScope 并不是監聽返回按鍵，是當前頁面將要被pop時觸發的回調。
class _StatusDemoState extends State<StatusDemo> {
@override
Widget build(BuildContext context) {
return WillPopScope(
child: StatusWidget(),
onWillPop: () {
///如果返回 return new Future.value(false); popped 就不會被處理
///如果返回 return new Future.value(true); popped 就會觸發
///這里可以通過 showDialog 彈出確定框，在返回時通過 Navigator.of(context).pop(true);決定是否退出
return showExitDialog(context);
},
);
}
Future<bool> showExitDialog(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext content) {
return AlertDialog(
title: Text("提示"),
content: Text("確認退出嗎？"),
actions: <Widget>[
GestureDetector(
child: Container(
child: Text('退出'),
),
onTap: () {
Navigator.of(context).pop(true);
},
),
GestureDetector(
child: Container(
child: Text('取消'),
),
onTap: () {
Navigator.of(context).pop();
},
),
],
);
});
}
}
選取圖片
使用的是Flutter提供的image_picker
首先，在pubspec.yaml文件中添加依賴image_picker: '0.6.0+8'
class TakeDemo extends StatefulWidget {
@override
_TakeDemoState createState() => _TakeDemoState();
}
class _TakeDemoState extends State<TakeDemo> {
File _image;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.only(top: 20),
alignment: AlignmentDirectional.center,
child: Column(
children: <Widget>[
FlatButton(
onPressed: () {
getImage();
},
child: Text('從相冊選擇'),
),
Center(
child: _image == null
? Text('No image selected.',style: TextStyle(fontSize: 14),)
: Image.file(_image),
),
],
),
);
}
Future getImage() async {
//gallery相冊，camera拍照
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
}
20190524_114834.gif
