# Draft Messages
The Flutter SDK provides a way to create and manage draft messages.
Drafts are disabled by default. In order to enable this feature, you need to enable the `draftMessagesEnabled` flag in `StreamChatConfiguration`.
```dart
StreamChat(
client: client,
streamChatConfigData: StreamChatConfigurationData(
draftMessagesEnabled: true,
),
child: child,
),
```
Drafts on Flutter SDK are available since version v9.9.0
Draft messages are synchronized across devices and work seamlessly offline as well.
## Basic Usage
## Customization
By default, the only UI added to the SDK when drafts are enabled is a preview of the draft message in the channel list and thread list. When a draft is saved, the draft message is shown in the channel list and thread list until the message is published or deleted.
The channel draft preview is displayed in the `StreamChannelListTile` when the`channel.draft` exists, and the thread draft preview is displayed in the `StreamThreadListTile` when the `thread.draft` exists.
You can customize the drafts preview by swapping the `StreamChannelListTile` and `StreamThreadListTile` components through the `itemBuilder` property of `StreamChannelListView` and `StreamThreadListView`, respectively.
| Channel Draft Message | Thread Draft Message |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|  |  |
## Draft Events
## Draft List
The SDK provides a `StreamDraftListView` widget that shows an overview of all draft messages the user has created. It displays information about the channel and the draft message content.
The list is paginated by default, and only the most recently updated drafts are loaded initially. Older drafts are loaded when the user scrolls to the end of the draft list.
### Usage
The widget is backed by a controller named `StreamDraftListController`, which is responsible for loading the drafts and managing the state of the widget.
```dart
late final _draftListController = StreamDraftListController(
client: StreamChat.of(context).client,
filter: Filter.equal('key', 'value'), // Optional filter
sort: [SortOption.desc(DraftSortKey.createdAt)], // Optional sort
limit: 20, // Number of drafts per page
);
```
The `StreamDraftListController` has a few properties that can be used to customize the behavior of the widget:
- `filter`: A filter to apply to the drafts.
- `sort`: A list of sort options to apply to the drafts.
- `limit`: The maximum number of drafts to load per page.
Once the controller is created, it can be passed to the `StreamDraftListView` widget.
```dart
StreamDraftListView(
controller: _draftListController,
);
```
This will create a paginated list of drafts, which will load more drafts as the user scrolls to the end of the list.
## Handling Draft Taps
To handle taps on drafts, we can use the `onDraftTap` callback provided by the `StreamDraftListView` widget.
```dart
StreamDraftListView(
controller: _draftListController,
onDraftTap: (draft) {
// Handle the tap on the draft.
},
);
```
We can also handle long presses on drafts using the `onDraftLongPress` callback.
```dart
StreamDraftListView(
controller: _draftListController,
onDraftLongPress: (draft) {
// Handle the long press on the draft.
},
);
```
## Customizing Draft Items
You can customize the appearance of the draft items using the `itemBuilder` parameter.
```dart
StreamDraftListView(
controller: _draftListController,
itemBuilder: (context, drafts, index, defaultWidget) {
final draft = drafts[index];
// Return your custom widget here.
},
);
```
## Other Customizations
The `StreamDraftListView` widget provides a few other parameters that can be used to customize the appearance and behavior of the widget:
```dart
StreamDraftListView(
controller: _draftListController,
emptyBuilder: (context) {
// Return your custom empty state widget here.
},
loadingBuilder: (context) {
// Return your custom loading state widget here.
},
errorBuilder: (context, error) {
// Return your custom error state widget here.
},
separatorBuilder: (context, drafts, index) {
// Return your custom separator widget here.
},
);
```
---
This page was last updated at 2026-03-05T19:03:00.911Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/drafts/](https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/drafts/).