CustomEmptyWidget constructor

const CustomEmptyWidget({
  1. Key? key,
  2. String? title,
  3. String? subtitle,
  4. String? image,
  5. String? packageImage,
  6. Widget? customWidget,
  7. Widget? imageWidget,
  8. bool hideTitle = false,
  9. bool hideSubTitle = false,
  10. TextStyle? titleTextStyle,
  11. TextStyle? subtitleTextStyle,
})

A highly customizable empty state widget for displaying "no content" scenarios.

This widget provides a flexible solution for showing empty states throughout the CulicidaeLab application. It supports various customization options including custom images, text styling, and complete widget replacement for maximum flexibility.

Design Philosophy

Empty states are crucial for user experience as they:

  • Provide clear feedback when no content is available
  • Guide users on what actions they can take
  • Maintain visual consistency across the application
  • Prevent confusion and improve usability

Usage Scenarios

  • Search Results: When no mosquito species match search criteria
  • Gallery Loading: While species data is being fetched
  • Classification: When no image has been selected yet
  • Disease Information: When no diseases are associated with a species
  • Network Errors: When data cannot be loaded from remote sources

Customization Options

The widget supports multiple levels of customization:

  • Standard: Use predefined image, title, and subtitle
  • Styled: Apply custom text styles and formatting
  • Widget-based: Replace image with custom widget (icons, illustrations)
  • Complete Override: Use entirely custom widget for unique layouts

Example Usage

// Basic usage with text only
CustomEmptyWidget(
  title: 'No mosquito species found',
  subtitle: 'Try adjusting your search criteria',
)

// With custom image and styling
CustomEmptyWidget(
  title: 'No classification results',
  subtitle: 'Please select an image to analyze',
  image: 'assets/images/empty_classification.png',
  titleTextStyle: TextStyle(fontSize: 20, color: Colors.teal),
)

// With custom icon widget
CustomEmptyWidget(
  title: 'No diseases found',
  imageWidget: Icon(Icons.health_and_safety, size: 64, color: Colors.grey),
)

Accessibility

The widget follows accessibility best practices:

  • Proper semantic structure for screen readers
  • Sufficient color contrast for text elements
  • Scalable text that respects user font size preferences
  • Meaningful content descriptions

See also:

Implementation

const CustomEmptyWidget({
    Key? key,
    this.title,
    this.subtitle,
    this.image,
    this.packageImage,
    this.customWidget,
    this.imageWidget,
    this.hideTitle = false,
    this.hideSubTitle = false,
    this.titleTextStyle,
    this.subtitleTextStyle,
  }) : super(key: key);