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.