Flutter Release Preview 2で追加されたCupertinoスタイルのWidgetを試してみた

Flutter Release Preview 2で追加されたCupertinoスタイルのWidgetを試してみました。
2018.09.30

大阪オフィスの山田です。ねこに薬を飲ませる時に噛まれて指に穴が空きました。痛い。今回は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で動かしてみたいなぁ。

参考文献