플러터 ErrorWidget 커스터마이징: 사용자 친화적인 에러 화면 구현하기

 

Flutter 애플리케이션에서 오류가 발생했을 때, 기본적으로 빨간 화면에 오류 메시지가 표시됩니다.

이는 개발 중에는 유용하지만, 사용자에게는 친숙하지 않은 경험을 줄 수 있습니다.

 

이 글에서는 Flutter에서 ErrorWidget을 커스터마이즈하여 사용자 친화적인 오류 메시지를 구현하는 방법을 알아보겠습니다.Flutter 개발을 하다 보면, 때때로 예상치 못한 에러로 인해 앱이 중단되는 상황을 겪게 됩니다.

기본적으로 Flutter는 이런 상황에서 붉은색 배경에 에러 메시지를 보여주는 ErrorWidget을 사용합니다.

이는 개발 중에는 유용할 수 있지만, 프로덕션 환경에서는 사용자에게 다소 충격적일 수 있습니다.

이번 포스팅에서는 ErrorWidget을 사용자 친화적으로 커스터마이징하는 방법을 알아보겠습니다.

ErrorWidget이란?

ErrorWidget은 Flutter에서 위젯 빌드가 실패할 때 기본적으로 표시되는 화면입니다.

예를 들어, 예외가 발생하거나 다른 이유로 위젯이 제대로 빌드되지 않을 때 붉은 배경에 에러 메시지가 나타나게 됩니다.

기본 ErrorWidget의 문제점

개발 중에는 이 기본 에러 화면이 유용할 수 있지만, 프로덕션 환경에서는 사용자 경험을 저해할 수 있습니다.

붉은색 화면은 사용자를 놀라게 할 수 있고, 단순한 텍스트 에러 메시지는 비전문가에게 혼란을 줄 수 있습니다.

따라서 에러 화면을 애플리케이션의 스타일에 맞게 커스터마이징하는 것이 좋습니다.

ErrorWidget 커스터마이징 방법

Flutter에서 ErrorWidget을 커스터마이징하려면 ErrorWidget.builder를 재정의해야 합니다.

이 작업은 주로 main() 함수에서 애플리케이션을 실행하기 전에 수행됩니다. 다음은 기본적인 커스터마이징 예제입니다.

void main() {
  ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Error'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Icon(
                Icons.error_outline_outlined,
                color: Colors.red,
                size: 100,
              ),
              Text(
                'Oops... something went wrong',
              ),
            ],
          ),
        ),
      ),
    );
  };
  runApp(const MyApp());
}

 

이 예제에서 에러가 발생하면 사용자에게 상단에 앱바와 "Oops... something went wrong"라는 메시지가 있는 화면이 표시됩니다.

더 복잡한 ErrorWidget 구현

실제 애플리케이션에서는 에러 정보를 더 많이 제공하거나, 디버그와 릴리즈 모드에 따라 다른 메시지를 표시하고 싶을 수 있습니다.

아래는 디버그 모드에서는 예외 메시지를, 릴리즈 모드에서는 간단한 메시지를 보여주는 예제입니다.

void main() {
  ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Error'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Icon(
                Icons.error_outline_outlined,
                color: Colors.red,
                size: 100,
              ),
              Text(
                kReleaseMode
                    ? 'Oops... something went wrong'
                    : errorDetails.exception.toString(),
              ),
            ],
          ),
        ),
      ),
    );
  };
  runApp(const MyApp());
}

위 예제에서는 릴리즈 모드에서는 일반 사용자에게 친화적인 메시지를 보여주고, 디버그 모드에서는 개발자가 디버깅할 수 있도록 자세한 예외 메시지를 보여줍니다.

 

이처럼 Flutter의 ErrorWidget을 커스터마이징하면 앱의 일관된 사용자 경험을 유지하면서도 예외 상황에 대한 정보를 적절하게 전달할 수 있습니다.

여러분도 자신의 애플리케이션에 맞는 ErrorWidget을 만들어 보세요!

공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱