Need to handle error UI states in Flutter?🙄 No problem just use this simple Flutter package🤩

The package will show a simple error message with a title and a description. Optional you can also add a refresh method that will also show a refresh icon.

Getting started 🚀

Just simply add the error_text_widget package to your dependencies:

dependencies:
  error_text_widget: <Newest version>

Use the Widget 👉

ErrorTextWidget()

To say it simple: This is it. This will now show a basic error message with a title/description.

Of course there is a lot of things you can customize. Let us take a look at it.

Refresh method 🔄

You can add a onRefresh method. This will display a refresh IconButton which will execute this method. Here you can pass a method that will refetch some data for example if something failed.

ErrorTextWidget(
   onRefresh: () => log('Refreshing data...'),
),

Customize the Widget 🧑‍🎨

ErrorTextWidget(
          titleText: 'This is a sample title',
          titleFontStyle: const TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
            color: Colors.redAccent,
          ),
          descriptionText: 'This is a sample description',
          descriptionFontStyle: TextStyle(
            color: Colors.redAccent[200],
          ),
          onRefreshIcon: Icon(
            Icons.refresh,
            color: Colors.redAccent[700],
          ),
          onRefresh: () => log('Refreshing data...'),
        ),

The widget can be customized very easily. Take a look at this code snippet. With this code our Widget will look like this:

Widget setup (optional)📥

void main() {
  ErrorTextWidget.setup(
    defaultTitleText: 'This is a sample title',
    defaultTitleTextStyle: const TextStyle(
      color: Colors.redAccent,
      fontWeight: FontWeight.bold,
      fontSize: 24.0,
    ),
    defaultDescriptionText: 'This is a sample description',
    defaultDescriptionTextStyle: const TextStyle(
      color: Colors.redAccent,
    ),
    defaultOnRefreshIcon: const Icon(
      Icons.refresh_rounded,
      color: Colors.redAccent,
    ),
  );

  runApp(const MyApp());
}

This is just an optional, but a very useful step: You can use the ErrorTextWidget.setup(); method in the main(){}, method to change and set the default values to your preferences. With this you can adjust the package to match your app design for example.

Tip: Using AppLocalization for setup❗️

builder: (context, child) {
            ErrorTextWidget.setup(
              defaultTitleText: AppLocalizations.of(context)!.errorTitle,
              defaultDescriptionText: AppLocalizations.of(context)!.errorDescription,
              defaultTitleTextStyle: AppTextStyles.title,
              defaultDescriptionTextStyle: AppTextStyles.description,
            );

        return child;
}

If you want to use a text from your localiztion files, you can not use it in the main() method, because you don't have access to the BuildContext here. In this case you can use the builder() method of your MaterialApp() as described above.