Flutter 2.5リリース周りのAPIを研究してみる

Dashatarで作成したDASHくん🍗 https://dashatar-dev.web.app/

この記事ではFlutter 2.5リリースを振り返りつつ、新しく導入された、もしくは部分的・派生的アップデートのあったAPIを取り上げます。

📃 実行可能なデモアプリを作ってみました（DartPad）
こちらのデモに沿ってポイントだけまとめていければと思います。

（コードを分割できないので見づらいです。あとChromeだとフォーカスの挙動がたまにおかしいようなのでChrome以外推奨です！）

【画面1】FloatingActionButton

Flutter 2.5から .small と .large のコンストラクタが増えました。またそれに伴ってFloatingActionButtonThemeDataにいくつかプロパティが追加されているようです。

              FloatingActionButton.large(
                onPressed: () {},
                child: const Icon(Icons.download),
              ),

    return MaterialApp(
      theme: ThemeData(
        floatingActionButtonTheme: const FloatingActionButtonThemeData(
          extendedIconLabelSpacing: 10,
          extendedTextStyle: TextStyle(fontSize: 21),
	  extendedSizeConstraints: BoxConstraints.tightFor(height: 90),
        ),

【画面2】MaterialState.scrolledUnder

MaterialStateに新しい状態、scrolledUnderが追加されています。

Used by AppBar to indicate that the primary scrollable's content has scrolled up and behind the app bar.

とある通り、AppBarに隣接するScrollableなウィジットがスクロールしてAppBarの下に隠れた状態のことを指しています。また AppBar/SliverAppBar で使用することが前提になっているようです。試しに ScrollbarThemeData のMaterialStateに依存するプロパティでも使ってみましたが、何も変化がありませんでした。

      child: Scaffold(
        appBar: AppBar(
          backgroundColor: MaterialStateColor.resolveWith((states) {
            return states.contains(MaterialState.scrolledUnder)
                ? Colors.red
                : Theme.of(context).primaryColor;
          }),
        ),

【画面3】ScrollMetricsNotification

Notification系のクラスにScrollMetricsNotificationが加わりました。ScrollNotificationとの違いは、前者がユーザーがスクロール動作を行うごとに関連指標を通知してくれるのに対して、後者はユーザーのスクロール動作以外（リストアイテムの追加、ウィンドウサイズの変更等）のそれを通知してくれます。

デモでは試しに、ボタンを押すたびにFlutterLogoがリストに追加され、スクロール可能な領域（maxScrollExtent）が増えるたびに通知を受け取るWidgetを作ってみました。

通知を受け取るとAppBarにmaxScrollExtentの値が表示されます。

class _ScrollMetricsPageState extends State<ScrollMetricsPage> {
  int _itemCount = 4;
  double _scrollExtent = 0.0;
  String get _title => _scrollExtent == 0.0
      ? 'ScrollMetricsNotification'
      : 'maxScrollExtent: ${_scrollExtent.round()}';
　// 中略      
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        // ScrollNotificationだとアイテム追加しても更新されない
        body: NotificationListener<ScrollMetricsNotification>(
          onNotification: (notification) {
            setState(() {
              _scrollExtent = notification.metrics.maxScrollExtent;
            });
            return false;
          },
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                for (var i = 0; i < _itemCount; i++)
                  const FlutterLogo(size: 120),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () => setState(() => _itemCount++),
        ),
      ),

【画面4】showMaterialBanner

MaterialBannerの関連メソッド（showMaterialBannerほか）がScaffoldMessengerStateに追加されました。

同じようなメソッドに以前からshowSnackBarがありますが、MaterialにおけるBannerと
SnackBarの違いは以下の通りだそうです。

コンポーネント	優先度	ユーザーアクション
Snackbar	低い	任意。Snackbarは自動で消える
Banner	高い〜中	任意。Bannerはユーザー自身の意図で消すか、原因解決によって消す
Material公式より引用

デモではこんなふうに実装してみました。

  Widget build(BuildContext context) {
    final banner = MaterialBanner(
      padding: const EdgeInsets.all(30),
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      contentTextStyle: Theme.of(context).textTheme.headline5,
      leading: Icon(Icons.info, color: Theme.of(context).errorColor),
      content: const Text('This is the new MaterialBanner.'),
      actions: [
        TextButton(
+         onPressed: ScaffoldMessenger.of(context).hideCurrentMaterialBanner,
          child: const Text('Hide'),
        ),
      ],
    );

    return OutlinedButton.icon(
      onPressed: () {
        // showだけの場合はバナーが表示のキューに追加される
        // これは試しにやってみただけで好ましくない例と思われる
        ScaffoldMessenger.of(context)
+         ..removeCurrentMaterialBanner()
+         ..showMaterialBanner(banner);
      },
      icon: const Icon(Icons.chat),
      label: const Text('Show MaterialBanner'),
      style: const ButtonStyle(splashFactory: InkSplash.splashFactory),
    );
  }

Materila公式に「Bannerはユーザー自身の意図で消すか、原因解決によって消す」とある通り、showMaterialBannerの前にremoveCurrentMaterialBannerは非推奨だと思われます。

消す系のメソッド三兄弟の違い

• hideCurrentMaterialBanner
• removeCurrentMaterialBanner
• clearMaterialBanners
  バナーを消すためのメソッドが3つあって少しややこしかったので、違いをまとめてみました。

	hideCurrent	removeCurrent	clearMaterialBanners
対象	表示中のバナー	表示中のバナー	表示キュー内の全バナー
動作	消す	消す	消す
アニメーション	あり	なし	あり

【画面5】テキスト編集時のキー動作のoverride

テキスト編集時のキー動作が変更できるようになりました。テキスト編集周りの仕組みを改修してFlutterの柔軟性を上げるという計画の一環？のようです。

【参考】
https://docs.google.com/document/d/1QaVIr1bbOWJGNyyNsB75sXgTDRMuxP268sLGTBNDut0/
https://flutter.dev/docs/development/ui/advanced/actions_and_shortcuts
#85381、#78522、#75004 ほか

---

デフォルトのキー動作と各プラットフォームで決められたショートカット（DefaultTextEditingShortcuts、DefaultTextEditingActions）をoverrideするには、ウィジットツリーのどこかに以下のいずれかのウィジットを挟みます。

• Shorcuts、Actionsの組み合わせ
• FocusableActionDetector（ShortcutsとActionsとMouseRegionとFocusを混ぜたようなWidget）

（※ Flutter 2.5で導入されたAPIというわけではないです。）

これらをたとえば、TextFieldを挟む形で使えばそのTextFieldにフォーカスが合ったときに設定内容が有効になり、MaterialAppなどの直下で使えばアプリ全体のFocusツリーで有効になります。

逆に一切使わない場合はMaterialAppの actions/shortcutsプロパティ の設定通りとなります。プロパティがnull（指定なし）の場合は WidgetsApp/MaterialApp/CupertinoApp によりウィジットツリーに挿入される DefaultTextEditingShortcuts DefaultTextEditingActions の設定が適用されます。

今回は FocusableActionDetector を使ってみました。

    // Focusableな Shortcuts + Actions + MouseRegion ウィジット
    return FocusableActionDetector(
      shortcuts: shortcuts,
      actions: actions,
      autofocus: true,
      focusNode: _focusNode,
      child: Scaffold(

shortcutsプロパティには「Shorcutsウィジット」のshortcutsプロパティと同じものを指定します。

    const shortcuts = <ShortcutActivator, Intent>{
      SingleActivator(LogicalKeyboardKey.arrowRight): ToAdjacentIntent(next: true),
      SingleActivator(LogicalKeyboardKey.arrowLeft): ToAdjacentIntent(next: false),
      SingleActivator(LogicalKeyboardKey.keyV, meta: true): ToEdgeIntent(toStart: false),
      SingleActivator(LogicalKeyboardKey.keyC, meta: true): ToEdgeIntent(toStart: true),
    };

shortcutsはShortcutActivatorをキー、Intentを値とするMapです。
ShortcutActivatorはキーの操作そのものを指し、これによりIntent（ユーザーの意図）をFlutterに伝えることができます。

ShortcutActivatorには以下の3つがあります。

• CharacterActivator ... 特定の文字を表すときに使う
• LogicalKeySet ... 主にキーの組み合わせを表すときに使う
• SingleActivator ... 矢印や単独キーとcmd/opt/shift/ctrlの組み合わせを表すときに使う

Intentは抽象クラスなので、FlutterのAPIですでに用意されている〜Intent系のクラスを使うかIntentを継承したクラスを作成します。

// 隣のページに移動したいIntent
class ToAdjacentIntent extends Intent {
  final bool next;
  const ToAdjacentIntent({required this.next});
}
// PageViewの端に移動したいIntent
class ToEdgeIntent extends Intent {
  final bool toStart;
  const ToEdgeIntent({required this.toStart});
}

そしてactionsプロパティにも「Actionsウィジット」のactionsプロパティに相当するものが入ります。

    final actions = <Type, Action>{
      ToAdjacentIntent: CallbackAction<ToAdjacentIntent>(
        onInvoke: (intent) => _toAdjacent(next: intent.next),
      ),
      ToEdgeIntent: CallbackAction<ToEdgeIntent>(
        onInvoke: (intent) => _toEdge(toStart: intent.toStart),
      ),
    };

「Intentの型」をキー、Actionを値とするMapです。キー操作に応じてコールバックを呼び出したい場合は CallbackAction を使います。

shorcutsでFlutterに伝えたIntent（ユーザーの意図）を汲んで、actionsで実際の動作を実行するという流れになっています。

ActionとIntentが分かれていたりなど一見面倒に思えますが、なぜそのような実装になっているかについては最近公式に追加されたこちらの記事に詳細が書いてあります。

https://flutter.dev/docs/development/ui/advanced/actions_and_shortcuts

デモアプリでは Cmd + C を画面左端への移動、Cmd + V を画面右端への移動にoverrideしています。TextFieldだけでなく全体で有効です。

【画面6】Androidフルスクリーンモード

SystemUiMode.immersiveSticky

Androidの各種全画面モードに細かく対応したアップデート群です。

（全画面モードの違いについてはこちらがわかりやすいです）
https://developer.android.com/training/system-ui/immersive?hl=ja

• 観賞モード（Lean back）
• 没入モード（Immersive）
• アプリ優先型没入モード（Sticky immersive）

※ これ以外の通常モード（ステータスバーとナビゲーションバーが固定された状態）がEdge To Edge

最近追加されたっぽいこちらの2つのメソッドだけ使ってみました。

SystemChrome.setEnabledSystemUIMode

UIのモード（SystemUiMode）を設定することができます。

deprecatedになったsetEnabledSystemUIOverlaysの代わりに使うもののようです。

            SystemChrome.setEnabledSystemUIMode(
              SystemUiMode.immersiveSticky,
            );

SystemChrome.setSystemUIChangeCallback

フルスクリーンモードにおいて、ユーザー動作などによりオーバーレイの状態に変化があったときに呼び出されるコールバックを設定することができます。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
    print(systemOverlaysAreVisible);
  });
  runApp(const MyApp());
}

最後に

ということで2.5というよりは、ほとんどキーボードショートカットの記事になってしまいました。これについてはいずれ別の機会に研究してみたいと思います。