この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
大阪オフィスの山田です。ねこに薬を飲ませる時に噛まれて指に穴が空きました。痛い。今回はFlutterの強化されたCupertinoスタイルのWidgetを動かしてみます。Flutter Preview2に関する記事はこちらです。
開発環境
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.9.5-pre.12, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.27.2)
[✓] Connected device (1 available)動作画像
今回は以下のWidgetを使用しています。
- CupertinoNavigationBar
- CupertinoSegmentedControl
- CupertinoPicker
- CupertinoTimerPicker
- CupertinoActionSheet
iOS
Android
実装
- CupertinoNavigationBar
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text('Cupertino Style'),
),
body:
Column(children: <Widget>[
SizedBox(height: 16.0,),
Row(children: <Widget>[
Expanded(child: _buildCupertinoSegmentedControl(),)
],
),
Container(
margin: EdgeInsets.all(16.0),
child: Text(
_timeDuration == null ? "select time" : _timeDuration.toString()),
),
Expanded(child: _buildCupertinoTimerPicker(),)
],)
);
}titleではなくmiddleというパラメータなんですね。
- CupertinoSegmentedControl
Widget _buildCupertinoSegmentedControl() {
return CupertinoSegmentedControl(
children: {
"1": Text("Action Sheet"),
"2": Text("Picker"),
},
onValueChanged: (value) {
if (value == "1") {
_showCupertinoActionSheet(context);
}
if (value == "2") {
_showCupertinoPicker(context);
}
},);
}デモ用に、onValueChangedイベント中で、アクションシートやピッカーを表示するようにしてます。
- CupertinoActionSheet
_showCupertinoActionSheet(BuildContext context) {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) {
return CupertinoActionSheet(
title: Text("title"),
message: Text("message"),
actions: <Widget>[
CupertinoActionSheetAction(child: Text("none"), onPressed: () { Navigator.pop(context); },),
CupertinoActionSheetAction(child: Text("default action"), onPressed: () { Navigator.pop(context); }, isDefaultAction: true,),
CupertinoActionSheetAction(child: Text("destructive action"), onPressed: () { Navigator.pop(context); }, isDestructiveAction: true,),
],
cancelButton: CupertinoActionSheetAction(child: Text("Cancel"), onPressed: () { Navigator.pop(context); },),
);
}
);
}showCupertinoModalPopupメソッドのbuilderの中でアクションシートのWidgetを作成しています。詳細についてはこちらに記述があります。各アクションをタップした時に、アクションシートを閉じる処理を書いています。うーん、処理を書かなくてもオプション等で何とかならないかなぁ。
- CupertinoPicker
_showCupertinoPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return CupertinoPicker(
onSelectedItemChanged: (value) {},
itemExtent: 30.0,
children: <Widget>[
Center(child: Text("item 1")),
Center(child: Text("item 2")),
Center(child: Text("item 3")),
Center(child: Text("item 4")),
Center(child: Text("item 5")),
],
);
});
}こちらはshowModalBottomSheetメソッドのbuilderの中でピッカーを作成しています。詳細についてはこちら。
- CupertinoTimerPicker
Widget _buildCupertinoTimerPicker() {
return CupertinoTimerPicker(
onTimerDurationChanged: (Duration newTimer) {
setState(() {
_timeDuration = newTimer;
});
}
);
}最後に
いかがだったでしょうか。実際に開発する時に使用するかは分かりませんが動かしてみました。Pixelで動かしてみたいなぁ。
11
