MainScreen Widget #

The MainScreen widget is a reusable Flutter component designed to manage different UI states, such as loading, empty content, and displaying data. It includes pull-to-refresh functionality, making it easy to refresh the content from a data source.

Table of Contents #

• Features
• Installation
• Usage
• Parameters
• Contributions
• License

Features #

• Displays loading indicator when data is being fetched.
• Shows a custom or default empty screen when there is no data.
• Wraps the main content in a pull-to-refresh functionality.

Installation #

To use the MainScreen widget in your Flutter project, follow these steps:

1. Add the following to your pubspec.yaml:

dependencies:
  main_widgets: <latest_version>

Usage #

You can use the MainScreen widget as follows:

    MainScreen(
      isLoading: true, // Set to true while data is being loaded
      isEmpty: false, // Set to true if there is no data to display
      child: YourMainContentWidget(), // The main content to display
      onRefresh: () async {
        // Add your refresh logic here
      },
    );

Parameters #

• isLoading (bool):

  • Description: Indicates whether the data is currently being loaded.
  • Usage: Set this parameter to true when you are fetching data to show a loading indicator.

• isEmpty (bool):

  • Description: Indicates whether the data is empty.
  • Usage: Set this parameter to true if there is no data available to display.

• child (Widget):

  • Description: The main content to display when data is available.
  • Usage: Pass your main content widget (e.g., a ListView, GridView, etc.) to this parameter.

• onRefresh (Future<void> Function()):

  • Description: Callback function that is triggered when the user performs a pull-to-refresh action.
  • Usage: Implement this function to handle the refresh logic, such as re-fetching data.

• emptyWidget (Widget?):

  • Description: A custom widget to display when the data is empty (optional).
  • Usage: If you want to display a specific widget when there's no data, provide it here. If not provided, a default empty state will be shown.

• message (String?):

  • Description: An optional message to display in the empty state widget.
  • Usage: Use this parameter to provide additional context or instructions when there is no data available.

Example Usage #

Here is an example demonstrating how to use these parameters in the MainScreen widget:

    MainScreen(
      isLoading: true, // Data is being loaded
      isEmpty: false, // Data is available
      child: YourMainContentWidget(), // Main content to display
      onRefresh: () async {
        // Logic for refreshing data
      },
      emptyWidget: CustomEmptyWidget(message: "No data available"), // Optional empty widget
      message: "Please check back later.", // Optional message for empty state
    );

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

Made with contrib.rocks.