Zenn
Closed2

Flutter 2.xでアプリ作るときにハマったこと

Flutter
niccariniccari

2つタブがあるページで、

  1. 何らかのページ
  2. GestureDetectorを含んだリスト表示ページ(GestureDetectorのonTapでstateを更新する処理がある)

を実装した。このとき、1番目のページのFloatingActionButtonをタップして2番目のページに遷移した瞬間にsetState called during buildに陥った。FloatingActionButtonをタップしたときに2ページ目のGestureDetectorのonTapが実行されているようで、ビルド中にstateの更新が走ったためにクラッシュした模様。

結局、GestureDetectorを使わずButtonのonPressedイベントで対応して解決した。

niccariniccari

ダークテーマでの色カスタマイズ

Flutter 2.16.2現在、ダークテーマを以下の様に適用してもprimarySwatchは一部しか適用できない。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final darkTheme = 
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.deepOrange,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepOrange,
      ),
  );
)

ThemeDataのコンストラクタでは、ダークテーマ設定(brightness == Brightness.dark)だとprimarySwatchは無視される[1]ためで、初期化済みのThemeDataをcopyWithして設定しないといけない。

  @override
  Widget build(BuildContext context) {
    final darkTheme = ThemeData(
      brightness: Brightness.dark,
    );
    return MaterialApp(
...
      darkTheme: darkTheme.copyWith(
        indicatorColor: Colors.deepOrange[600],
        colorScheme: darkTheme.colorScheme.copyWith(
          primary: Colors.deepOrange[400],
          secondary: Colors.deepOrange[300],
        )
      ),
脚注

  1. https://github.com/flutter/flutter/blob/bf8208cd14a89280676758ce9ddb8c45cb31a199/packages/flutter/lib/src/material/theme_data.dart#L274-L290 ↩︎

このスクラップは2022/11/13にクローズされました