開発

【Flutter】 Androidアプリで画面遷移時に色のフラッシュが発生する

発生した問題

FlutterアプリをAndroidでビルドした際、画面遷移時に背景にColorScheme.surfaceに設定された色が一瞬フラッシュする現象が発生しました。

環境

Flutter 3.27.3

Pixel 6a(Android 14)

解決方法

// NOTE: 不要なコードは省略しています
return MaterialApp.router(
  title: 'Android App',
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: <TargetPlatform, PageTransitionsBuilder>{
        TargetPlatform.android: ZoomPageTransitionsBuilder(
          backgroundColor: [設定したい色], // ここを変更する
        ),
      },
    ),
  )
);

解説

FlutterのThemeDataにはpageTransitionThemeという引数があります

  factory ThemeData({
	  ...
    PageTransitionsTheme? pageTransitionsTheme, // これ
    ...
  }) {
	  ...
	}

この引数に値を渡さない場合、Flutter側で用意されている_defaultBuildersが使用されます

  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: ZoomPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
  };

この中で、Android端末でビルドした際に使用されるZoomPageTransitionsBuilderにはbackgroundColorという引数があります。

  const ZoomPageTransitionsBuilder({
    this.allowSnapshotting = true,
    this.allowEnterRouteSnapshotting = true,
    this.backgroundColor,
  });

この引数に値を渡さない場合、colorScheme.surfaceが使用されるため、Androidで画面遷移するときに背景にColorScheme.surfaceに設定された色がフラッシュする現象が発生します。

final Color enterTransitionBackgroundColor = backgroundColor ?? Theme.of(context).colorScheme.surface;

この問題は、ThemeDataを設定する際に、pageTransitionsThemeに背景色を指定したZoomPageTransitionsBuilderを渡すことで解決できます。そのため、解決方法として以下の実装が推奨されます。

pageTransitionsTheme: PageTransitionsTheme(
  builders: <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: ZoomPageTransitionsBuilder(
      backgroundColor: [設定したい色], // ここを変更する
    ),
  },
),

上記の通り、backgroundColorを設定することで、遷移時の背景色が適切に指定でき、フラッシュする現象が防げます。

-開発
-,