【Flutter】AppBarのleadingプロパティの幅を変更する

はじめに

FlutterのAppBarに画像を使ってロゴを設定したかったのですが画像が思ったサイズにならなかったので、原因と解決策をまとめます

原因

公式ドキュメントを参照すると

The leading widget's width and height are constrained to be no bigger than leadingWidth and toolbarHeight respectively.

「leadingプロパティに設定するWidgetはleadingWidthとtoolbarHeightより大きくならないように制限されている」

上記のように書かれていたため、デフォルトのleadingWidthかtoolbarHeightを大きくすることがキーポイントになるようです

解決する前

この状態ではデフォルトのleadingWidthが56.0であるため
画像の幅を56.0以上大きくしても反映されません

logo.dart

return Scaffold(
      appBar: AppBar(
          leading: IconButton(
            icon: Image.asset(
              'images/logo.png',
              width: 100,
        ),
        onPressed: () {
          Navigator.pushNamed(context, 'initial_page');
        },
      )),
    );

解決した後

私の場合はロゴが横長でしたので、leadingWidthプロパティを400(ロゴの幅より大きい数字)に設定するだけでOKでした

logo.dart

return Scaffold(
      appBar: AppBar(
          leadingWidth: 400,
          leading: IconButton(
            icon: Image.asset(
              'images/logo.png',
              width: 100,
            ),
            onPressed: () {
              Navigator.pushNamed(context, 'initial_page');
            },
          )),
    );