Flutter学習つぶやき

(SwiftUIの) Spacerは (Flutterでは) SpacerとSizedBoxに分かれるのか。

(Flutterの)pushReplacementを使うと(iOSの)window.rootViewControllerにviewControllerをセットしてmakeKeyAndVisible() 🤯をやらなくて済みそう。

hackenbacker

Flutterの画面遷移はpush←→popだけなのでメチャ楽チン🥰
iOSはpush←→pop、present←→dismissの対応を間違えたら死ぬ💀
presentingViewControllerの有無でpopとdismissを場合分けして..とかやりだしたら発狂する🤯

hackenbacker

Material3を有効にすると学習に使っているサンプルプログラムと見た目が違ってしまうのだが、

class MyApp ...
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: false,
      ),

これで調整できることがわかった。

hackenbacker

Iconsを検索するときは本家よりもこちら materialui.coが便利。
だが、ChatGPTに日本語で聞いたら一発で出てくる。
例「FlutterのIconsでドットが縦に３つ並んでいるものの名前は？」 => more_vert

hackenbacker

AppBar(actions:[])でアイコン間隔を調整するのにSizedBoxをいちいちアイコンの間に挿入しないといけないの？

actions: [
          SizedBox(width:16),
          Icon(Icons.cast),
          SizedBox(width:16),
          Icon(Icons.search),
          SizedBox(width:16),
          Icon(Icons.more_vert),
          SizedBox(width:16)],

hackenbacker

  final rightBarItems = <IconData>[
    Icons.cast,
    Icons.search,
    Icons.more_vert,
  ];

...

    actions: rightBarItems
          .map((iconData) => Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Icon(iconData),
          ))
          .toList(),

hackenbacker

Flutterは(iOSの)rightBarButtonItemsの並び順を逆にしなくても良いので素晴らしい。

hackenbacker

(iOSの)leftBarButtonItems相当のことがやりたい場合はleadingを用いる。

AppBar(
  title: Text('Sample AppBar'),
  // デフォルトの戻るボタンや Drawer ボタンを表示させたくない場合、
  // automaticallyImplyLeading を false にする
  automaticallyImplyLeading: false,
  // leading: で左側に表示するウィジェットをカスタマイズ
  leading: Row(
    // 左側に並べたいウィジェットが幅以上に増えないように
    // mainAxisSize を min にしておくのがポイント
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
        },
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {
        },
      ),
    ],
  ),
  actions: [] // 右側に並べたいアイコン

いくつかのポイント

automaticallyImplyLeading をオフにする
ページ（Route）をプッシュして戻るボタンが自動生成されるような場合や、Drawer ボタンを自動表示している場合は、Flutter がデフォルトの戻るボタンやメニューボタンを左側に挿入します。
これらを使用せず、完全にカスタムしたい場合は automaticallyImplyLeading: false に設定しましょう。
leadingWidth の活用
デフォルトでは、leading に配置したウィジェットの幅はシステムが決めています。配置するアイコンが多い場合など、幅を明示的に調整したいときは leadingWidth プロパティを使います。

hackenbacker

(iOS)のtitleViewに相当することをやりたい場合はtitleに渡すWidgetを工夫する。

AppBar(
  title: Text("センタリングしたいタイトル"),
  centerTitle: true, // タイトルを中央寄せするためのフラグ
)

titleに渡すWidgetはTextでなくても良いので、ボタンを表示するなどカスタマイズ可能。

AppBar(
  title: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [ ...  ],
  ),
  centerTitle: true,
)