この記事はand factory.inc Advent Calendar 2022 5日目の記事です。
昨日は @myoshita さんの [Android] Github Actions + PythonでGoogle Playの段階リリース状態をチェックする でした。
Flutterの開発時にエラー画面に遭遇したことのない人は少なくないと思います。debugモードで表示される画面は赤く、エラー感の強いあの画面はとても刺激が強いものになっていますが、release版ではグレーの画面で表示されます。
| debug | release |
|---|---|
 |
 |
debugモードで表示される画面はまだ開発者だけが目にするものですが、releaseモードで表示されるグレーの画面はユーザーに不安を与えてしまいますし、この画面から何をしたらいいのかがわからずアプリの体験を損なってしまう可能性が高いです。
もちろんこの画面が表示されないようにしっかりとしたQAプロセスをへてリリースされれば良いですが、不具合を１００％起こさないことは難しいため、もしもの時のためにエラー画面をカスタマイズすることができるか調査しました。
以下のようなコードによって実現していきます。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
...
builder: (BuildContext context, Widget? widget) {
ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
return MyErrorWidget(errorDetails: errorDetails);
};
return widget!;
},
);
}
}
Widgetのbuild中にエラーが発生した場合ErrorWidget.builderを設定することで、この関数で設定したWidgetを表示することができます。
ErrorWidget.builderではデフォルト値として_defaultErrorWidgetBuilderが実行されエラーメッセージが整形されています。
framework.dart
static ErrorWidgetBuilder builder = _defaultErrorWidgetBuilder;
static Widget _defaultErrorWidgetBuilder(FlutterErrorDetails details) {
String message = '';
assert(() {
message = '${_stringify(details.exception)}\nSee also: https://flutter.dev/docs/testing/errors';
return true;
}());
final Object exception = details.exception;
return ErrorWidget.withDetails(message: message, error: exception is FlutterError ? exception : null);
}
結果的に以下のような６４ゴール＊ンアイゲームオーバー風画面を作成することができました。
今回は、CustomPainterを使って、四角形の下辺だけを二次ベジエ曲線による波形のPathを描いて塗りつぶしたものを高さを変更するAnimationによって実装しました。
まとめ
グレーの画面をカスタマイズし、ユーザーに対してアプリを再起動を促したりすることで多少ユーザーの不安を減らすことができると思います。プロダクションのコードではkDebugModeなどでdebugモードとreleaseモードで表示される画面を分け、開発時にはFlutterErrorDetails.summaryを表示したり、バグレポートを起票する画面などに遷移させてあげることで開発者、QA担当者の体験を向上することにもつながるでしょう。
明日のAdvent Calendarの記事もよろしければご覧になってください。
リンク