> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# State Views

> Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets.

<Accordion title="AI Integration Quick Reference">
  | Field       | Value                                                                                                              |
  | ----------- | ------------------------------------------------------------------------------------------------------------------ |
  | Package     | `cometchat_chat_uikit`                                                                                             |
  | Import      | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';`                                                 |
  | Purpose     | Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets. |
  | Key classes | `CometChatMessageList` · `CometChatConversations`                                                                  |
  | Related     | [View Slots](/ui-kit/flutter/customization-view-slots)                                                             |
</Accordion>

Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with custom widgets.

## Replacing State Views

Each state view property accepts a `WidgetBuilder` — a function that takes `BuildContext` and returns a `Widget`.

| Property                | State                                          |
| ----------------------- | ---------------------------------------------- |
| `emptyStateView`        | No data to display                             |
| `errorStateView`        | An error occurred during data fetching         |
| `loadingStateView`      | Data is being fetched                          |
| `emptyChatGreetingView` | Empty chat with a greeting (message list only) |

## Example: Custom Empty State

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      emptyStateView: (context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.chat_bubble_outline, size: 64, color: Colors.grey),
              SizedBox(height: 16),
              Text(
                'No conversations yet',
                style: TextStyle(fontSize: 18, color: Colors.grey[700]),
              ),
              SizedBox(height: 8),
              Text(
                'Start a new chat to get going',
                style: TextStyle(fontSize: 14, color: Colors.grey),
              ),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Example: Custom Error State

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      errorStateView: (context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.error_outline, size: 48, color: Colors.red),
              SizedBox(height: 12),
              Text('Something went wrong'),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  // Trigger reload
                },
                child: Text('Try Again'),
              ),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Example: Custom Loading State

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      loadingStateView: (context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircularProgressIndicator(color: Color(0xFF6851D6)),
              SizedBox(height: 16),
              Text('Loading messages...'),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Example: Empty Chat Greeting

The message list supports a special `emptyChatGreetingView` for new conversations:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      emptyChatGreetingView: (context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.waving_hand, size: 48, color: Color(0xFF6851D6)),
              SizedBox(height: 16),
              Text('Say hello! 👋', style: TextStyle(fontSize: 18)),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Lifecycle Callbacks

Use lifecycle callbacks to run custom logic when states change:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      onLoad: (messages) {
        debugPrint('Loaded ${messages.length} messages');
      },
      onEmpty: () {
        debugPrint('No messages found');
      },
      onError: (e) {
        debugPrint('Error: $e');
      },
    )
    ```
  </Tab>
</Tabs>

## Related

* [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.