Personalizar tela de erro cinza – Flutter

Você já viu essa tela cinza feia na versão de lançamento do seu aplicativo? Na versão de depuração, você verá uma tela vermelha da morte com detalhes do erro, mas se estiver na versão de lançamento, verá uma tela cinza.

A tela de erro exibida na versão de depuração é boa, pois você é o único que a verá. Mas se o mesmo erro aparecer na versão de lançamento, ela mostrará uma tela cinza que retrata uma experiência ruim para os usuários. Já se perguntou se há alguma maneira de personalizá-lo? Isso é o que você pode conseguir depois de seguir o artigo:

Vamos nos aprofundar no código e ver como podemos conseguir isso:

• Primeiro de tudo, adicione um construtor em seu MaterialApp assim:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      ......
      builder: (BuildContext context, Widget? widget) {
        ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
          return CustomError(errorDetails: errorDetails);
        };
        return widget!;
      },
     ......
    );
  }

A mágica acontece em ErrorWidget.builder, quando ocorre um erro durante a construção de um widget, o widget quebrado é substituído pelo widget retornado por esta função e nosso widget de UI customizado é retornado.

• Vamos fazer um Stateless Widget para CustomError, no meu caso ficou assim:

class CustomError extends StatelessWidget {
  final FlutterErrorDetails errorDetails;

  const CustomError({
    Key? key,
    required this.errorDetails,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
                'assets/images/error_illustration.png'),
            Text(
              kDebugMode
                  ? errorDetails.summary.toString()
                  : 'Ops! Algo deu errado!',
              textAlign: TextAlign.center,
              style: const TextStyle(
                  color: kDebugMode ? Colors.red : Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 21),
            ),
            const SizedBox(height: 12),
            const Text(
              kDebugMode
                  ? 'https://docs.flutter.dev/testing/errors'
                  : "Encontramos um erro e notificamos nossa equipe de engenharia sobre isso. Desculpe pela inconveniência causada.",
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ],
        ),
      ),
    );
  }
}

Link da Imagem de erro (Link error)

Aqui, você pode distinguir entre as versões de lançamento e de depuração de forma programática usando o sinalizador kDebugMode de foundation.dart. Mostraremos os detalhes do erro apenas se o aplicativo estiver sendo executado na versão de depuração:

ErrorDetails é passado do construtor para nosso widget sem estado personalizado, do qual mostramos o resumo do erro.

Bom, isso é tudo! Acabamos!!

Sempre que uma tela cinza ou vermelha aparecer, ela renderizará nossa IU personalizada. Isso não é incrível?