Flutterメモ-22 (Flutter 2.5で追加されたshowMaterialBannerメソッドを試す）

• 概要
• サンプル
  • 参考情報

概要

以下、自分用のメモです。忘れないうちにメモメモ。。

Flutter 2.0 で ScaffoldMessenger が追加されました。

medium.com

github.com

このタイミングで、showSnackBar メソッドも追加されました。

んで、今回の Flutter 2.5 で ScaffoldMessenger に showMaterialBanner メソッドが追加されました。

medium.com

material.io

今回追加された MaterialBanner は、SnackBarと比較して以下の特徴を持ちます。

• 自動で消えない
• 画面の上に表示される

SnackBarは放っておくと消えますが、MaterialBannerの方はユーザ側で操作してもらわないと消えません。

サンプル

import 'package:flutter/material.dart';

class ShowMaterialBanner extends StatefulWidget {
  const ShowMaterialBanner({Key? key}) :super(key: key);

  @override
  _State createState() => _State();
}

class _State extends State<ShowMaterialBanner> {
  @override
  Widget build(BuildContext context) {
    // https://medium.com/flutter/whats-new-in-flutter-2-5-6f080c3f3dcreturn Scaffold(
      appBar: AppBar(
        title:const Text('Show Material Banner'),
        centerTitle:true,
      ),
      body: _container(
        children: [
          _sized(
            _button(
              'show Material Banner',
              _showMaterialBanner,
            ),
          ),
          _spacer(),
          _sized(
            _button(
              'show Snack Bar',
              _showSnackBar,
            ),
          ),
        ],
      ),
    );
  }

  Widget _container({List<Widget> children = const<Widget>[]}) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: children,
      ),
    );
  }

  Widget _sized(Widget w) {
    return SizedBox(
      child: w,
      width:200,
    );
  }

  Widget _spacer() {
    returnconst SizedBox(
      height:15,
    );
  }

  Widget _button(String text, Function() fn) {
    return ElevatedButton(
      child: Text(text),
      onPressed: fn,
    );
  }

  void _showMaterialBanner() {
    final messenger = ScaffoldMessenger.of(context);

    messenger.showMaterialBanner(
      MaterialBanner(
        content:const Text('これが Material Banner です.'),
        leading:const Icon(Icons.info),
        backgroundColor: Colors.amber,
        actions: [
          TextButton(
            child:const Text('消す'),
            onPressed: () {
              messenger.hideCurrentMaterialBanner();
            },
          ),
        ],
      ),
    );
  }

  void _showSnackBar() {
    final messenger = ScaffoldMessenger.of(context);

    messenger.showSnackBar(
      const SnackBar(
        content: Text('これが Snack Bar です'),
      ),
    );
  }
}

表示すると以下のようになります。

時間が立つと、SnackBarの方は自動的に消えますが、MaterialBannerの方は消えません。

参考情報

zenn.dev

zenn.dev

medium.com

medium.com

過去の記事については、以下のページからご参照下さい。

• いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

• いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com