Smart Empty State #

A customizable and reusable empty state widget for Flutter applications.

smart_empty_state provides ready-to-use empty and error states with simple customization options for icons, titles, messages, actions, and styling.

Features #

• Built-in empty and error states
• No data state
• Search not found state
• No internet connection state
• Error state
• Permission denied state
• Custom icons
• Custom titles and messages
• Custom action buttons
• Custom themes
• Responsive layout
• Simple and reusable API
• Works with your existing Flutter theme

Installation #

Add smart_empty_state to your pubspec.yaml:

dependencies:
  smart_empty_state: ^0.0.1

Then run:

flutter pub get

Usage #

Import the package:

import 'package:smart_empty_state/smart_empty_state.dart';

Use SmartEmptyState with one of the built-in state types:

SmartEmptyState(
  type: EmptyStateType.noData,
)

Built-in States #

No Data #

Display a state when there is no available data:

SmartEmptyState(
  type: EmptyStateType.noData,
)

Search Not Found #

Display a state when a search returns no results:

SmartEmptyState(
  type: EmptyStateType.searchNotFound,
)

No Internet #

Display a state when there is no internet connection:

SmartEmptyState(
  type: EmptyStateType.noInternet,
  onAction: () {
    // Retry request
  },
)

Error #

Display a state when something goes wrong:

SmartEmptyState(
  type: EmptyStateType.error,
  onAction: () {
    // Try again
  },
)

Permission Denied #

Display a state when a required permission has been denied:

SmartEmptyState(
  type: EmptyStateType.permissionDenied,
  onAction: () {
    // Request permission
  },
)

Custom Configuration #

You can customize the default state using EmptyStateConfig:

SmartEmptyState(
  type: EmptyStateType.noData,
  config: EmptyStateConfig(
    icon: Icons.favorite_outline,
    title: 'No Favorites',
    message: 'You have not added any favorites yet.',
    actionText: 'Explore',
  ),
  onAction: () {
    // Navigate to explore
  },
)

You can customize:

• Icon
• Title
• Message
• Action text

Custom Action #

You can define the action callback directly inside EmptyStateConfig:

SmartEmptyState(
  type: EmptyStateType.noInternet,
  config: EmptyStateConfig(
    actionText: 'Retry',
    onAction: () {
      // Retry request
    },
  ),
)

Custom Theme #

Customize the appearance using SmartEmptyStateTheme:

SmartEmptyState(
  type: EmptyStateType.noData,
  theme: SmartEmptyStateTheme(
    iconContainerSize: 120,
    iconSize: 60,
    horizontalPadding: 32,
    maxMessageWidth: 300,
  ),
)

Custom Colors and Text Styles #

You can also customize colors and text styles:

SmartEmptyState(
  type: EmptyStateType.noData,
  theme: SmartEmptyStateTheme(
    iconBackgroundColor: Colors.blue.shade50,
    iconColor: Colors.blue,
    titleStyle: const TextStyle(
      fontSize: 22,
      fontWeight: FontWeight.bold,
    ),
    messageStyle: const TextStyle(
      fontSize: 16,
    ),
  ),
)

Supported Types #

Example #

The package includes an example application demonstrating the available empty states and customization options.

You can find it inside the example directory.

Documentation #

For more information about the package API, check the generated API documentation on pub.flutter-io.cn.

Contributing #

Contributions, issues, and feature requests are welcome.

Feel free to open an issue or submit a pull request with improvements.

License #

This project is licensed under the terms specified in the LICENSE file.