アプリ開発の逆引き辞典

アプリ開発のTipsをまとめました

FlutterのAppBarにアイテムを置く

iOSでの UINavigationBar にあたるのが AppBar である。例えば AppBar に設定ボタンを置きたいとした場合、どのように対応すれば良いのかを記す。

実行時のスクショ

macOSではDEBUGの文字に隠れて見えにくいがAndroidと同様に設定ボタンが表示されている。tooltipを指定することでマウスオーバー時に「設定」の文字が表示される。

サンプルコード

以下、サンプルコードである。

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            tooltip: '設定',
            onPressed: () {
              // 設定ボタンをタップした時の挙動
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a snackbar'))
              );
            },
          )
        ],
      ),
      body: Center(