---
url: https://talkjs.com/docs/UI_Components/Flutter/Widgets/ConversationList
---

# ConversationList

Display a list of the current user's conversations.

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/Flutter/Widgets/ConversationList.md)

## class ConversationList

A list of conversations that the current user is a part of.

It makes available a callback, `onSelectConversation`, that gets triggered when
the user clicks on one of the conversations.

In most cases, you will just want this handler to navigate to a screen that contains a [ChatBox](/docs/UI_Components/Flutter/Widgets/Chatbox/#Chatbox).
showing the conversation that has just been selected.

### Constructor

```dart
const ConversationList({
  Key? key,
  required Session session,
  bool enableZoom = false,
  bool? showFeedHeader,
  String? theme,
  ThemeOptions? themeOptions,
  ConversationPredicate? feedFilter,
  SelectConversationHandler? onSelectConversation,
  LoadingStateHandler? onLoadingStateChanged,
  ErrorHandler? onError,
});
```

Creates a ConversationList UI.

**NOTE**: All the parameters passed to the constructor are also available as read-only properties of the constructed object.

#### Parameters

##### key (optional)

: Key?

A [Key](https://api.flutter.dev/flutter/foundation/Key-class.html) is an identifier for Flutter Widgets.

##### session

: [Session](/docs/UI_Components/Flutter/Session/#Session)

The TalkJS [Session](/docs/UI_Components/Flutter/Session/#Session) object to use for this ConversationList.

##### enableZoom (optional)

: bool

Controls whether the user can pinch to zoom the UI.

Defaults to `false`.

##### showFeedHeader

: bool?

Controls if the feed header containing the toggle to enable desktop notifications is shown.

Defaults to `true`.

##### theme (optional)

: String?

Overrides the theme used for this chat UI. Overriding the theme only works with themes created in the Theme Editor.

If you omit both the `theme` and `themeOptions` properties, the UI uses the theme that is selected in the current user's role.

If both the `theme` and `themeOptions` properties are specified, the `themeOptions` property takes precedence.

##### themeOptions (optional)

: [ThemeOptions](/docs/UI_Components/Flutter/Other_Interfaces/#ThemeOptions)?

Overrides the theme used for this chat UI. Overriding the theme only works with themes created in the Theme Editor.

You can use the `themeOptions` property instead of `theme` to pass variables to your theme.

If you omit both the `theme` and `themeOptions` properties, the UI uses the theme that is selected in the current user's role.

If both the `theme` and `themeOptions` properties are specified, the `themeOptions` property takes precedence.

##### feedFilter (optional)

: [ConversationPredicate](/docs/UI_Components/Flutter/Other_Interfaces/#ConversationPredicate)?

Controls which conversations are shown in the conversation feed.

Lets you filter conversations in the conversation list, depending on access
level, custom conversation attributes or message read status.

See [ConversationPredicate](/docs/UI_Components/Flutter/Other_Interfaces/#ConversationPredicate) for all available options.

Example

```dart
// only show conversations with unread messages
feedFilter: SimpleConversationPredicate(
  hasUnreadMessages: true,
),
```

Example

```dart
// only show conversations with unread messages OR whose subject equals "Pink shoes"
feedFilter: CompoundConversationPredicate.any([
  SimpleConversationPredicate(
    hasUnreadMessages: true,
  ),
  SimpleConversationPredicate(
    subject: FieldPredicate.equals('Pink shoes'),
  ),
]),
```

##### onSelectConversation (optional)

: [SelectConversationHandler](#SelectConversationHandler)?

Triggers when a user clicks a conversation in the feed

##### onLoadingStateChanged (optional)

: [LoadingStateHandler](#LoadingStateHandler)?

Triggers when the loading state of the ConversationList changes.

The [Getting Started](/docs/UI_Components/Flutter/#add-a-loading-indicator-optional) guide has an example on how to use the `onLoadingStateChanged` callback to show
a loading indicator while the ChatBox is loading.

##### onError (optional)

: [ErrorHandler](/docs/UI_Components/Flutter/Other_Interfaces/#ErrorHandler)?

Triggered when the TalkSession encounters an unrecoverable error.

For example, if the session cannot authenticate, or if you specify an incorrect app ID.

## Event handlers

### typedef SelectConversationHandler

```dart
typedef SelectConversationHandler = void Function(SelectConversationEvent event);
```

See [SelectConversationEvent](/docs/UI_Components/Flutter/Other_Interfaces/#SelectConversationEvent) for the callback parameter.

### typedef LoadingStateHandler

```dart
typedef LoadingStateHandler = void Function(LoadingState state);
```

Notifies when the loading state of the ChatBox changes.

The [LoadingState](/docs/UI_Components/Flutter/Other_Interfaces/#LoadingState) can be either `loading` or `loaded`, and it can be useful for showing a
placeholder widget while the ChatBox is loading.

The [Getting Started](/docs/UI_Components/Flutter/#add-a-loading-indicator-optional) guide has an example on how to use the `onLoadingStateChanged` callback to show
a loading indicator while the ChatBox is loading.