# Flutter Chat Components
> The official Flutter components for Stream Chat, a service for
> building chat applications.
[](https://pub.dartlang.org/packages/stream_chat_flutter)
[](https://codecov.io/gh/GetStream/stream-chat-flutter)
[](https://gitter.im/GetStream/stream-chat-flutter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
**Quick Links**
- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
- [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/)
- [Chat UI Kit](https://getstream.io/chat/ui-kit/)
## Flutter Chat Tutorial
The best place to start is the [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/).
It teaches you how to use this SDK and also shows how to make common changes.
## Example App
This repo includes a fully functional example app with setup instructions.
The example is available under the [example](https://github.com/GetStream/stream-chat-flutter/tree/master/example) folder.
## Add dependency
```yaml
dependencies:
stream_chat_flutter: ^0.1.19
```
You should then run `flutter packages get`
### Android
All set ✅
### iOS
The library uses [flutter file picker plugin](https://github.com/miguelpruivo/flutter_file_picker) to pick
files from the os.
Follow [this wiki](https://github.com/miguelpruivo/flutter_file_picker/wiki/Setup#ios) to fulfill iOS requirements.
We also use [video_player](https://pub.dev/packages/video_player) to reproduce videos. Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfill the requirements.
To pick images from the camera we use the [image_picker](https://pub.dev/packages/image_picker) plugin.
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
## Docs
### Business logic components
We provide 2 Widgets dedicated to business logic and state management:
- [StreamChat](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChat-class.html)
- [StreamChannel](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannel-class.html)
### UI Components
These are the available Widgets that you can use to build your application UI.
Every widget uses the `StreamChat` or `StreamChannel` widgets to manage the state and communicate with Stream services.
- [ChannelHeader](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelHeader-class.html)
- [ChannelImage](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelImage-class.html)
- [ChannelListView](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListView-class.html)
- [ChannelName](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelName-class.html)
- [ChannelPreview](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelPreview-class.html)
- [MessageInput](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageInput-class.html)
- [MessageListView](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageListView-class.html)
- [MessageWidget](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageWidget-class.html)
- [StreamChatTheme](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChatTheme-class.html)
- [ThreadHeader](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ThreadHeader-class.html)
### Customizing styles
The Flutter SDK comes with a fully designed set of widgets which you can customize to fit with your application style and typography.
Changing the theme of Chat widgets works in a very similar way that `MaterialApp` and `Theme` do.
Out of the box all chat widgets use their own default styling, there are two ways to change the styling:
1. Initialize the `StreamChatTheme` from your existing `MaterialApp` style
```dart
class MyApp extends StatelessWidget {
final Client client;
MyApp(this.client);
@override
Widget build(BuildContext context) {
final theme = ThemeData(
primarySwatch: Colors.green,
);
return MaterialApp(
theme: theme,
home: Container(
child: StreamChat(
streamChatThemeData: StreamChatThemeData.fromTheme(theme),
client: client,
child: ChannelListPage(),
),
),
);
}
}
```
2. Construct a custom theme and provide all the customizations needed
```dart
class MyApp extends StatelessWidget {
final Client client;
MyApp(this.client);
@override
Widget build(BuildContext context) {
final theme = ThemeData(
primarySwatch: Colors.green,
);
return MaterialApp(
theme: theme,
home: Container(
child: StreamChat(
streamChatThemeData: StreamChatThemeData.fromTheme(theme).copyWith(
ownMessageTheme: MessageTheme(
messageBackgroundColor: Colors.black,
messageText: TextStyle(
color: Colors.white,
),
avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(8),
),
),
),
client: client,
child: ChannelListPage(),
),
),
);
}
}
```
### Offline storage
By default the library saves information about channels and messages in a SQLite DB.
Set the property `persistenceEnabled` to false if you don't want to use the offline storage.
### Push notifications
To enable push notifications set the property `pushNotificationsEnabled` to `true`.
#### Android
Follow the guide at (this link)[https://pub.dev/packages/firebase_messaging#android-integration] to setup Firebase for Android.
Set the notification template on your GetStream dashboard to be like this:
```json
template = {}
data template = {
"message_id": "{{ message.id }}"
}
```
Create a Application.kt file to be like this:
```kotlin
class Application : FlutterApplication(), PluginRegistrantCallback {
override fun onCreate() {
super.onCreate()
FlutterFirebaseMessagingService.setPluginRegistrant(this)
}
override fun registerWith(registry: PluginRegistry?) {
PathProviderPlugin.registerWith(registry?.registrarFor(
"io.flutter.plugins.pathprovider.PathProviderPlugin"))
SharedPreferencesPlugin.registerWith(registry?.registrarFor(
"io.flutter.plugins.sharedpreferences.SharedPreferencesPlugin"))
FlutterLocalNotificationsPlugin.registerWith(registry?.registrarFor(
"com.dexterous.flutterlocalnotifications.FlutterLocalNotificationsPlugin"))
FirebaseMessagingPlugin.registerWith(registry?.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"))
}
}
```
Update the `AndroidManifest.xml` file to set the application class:
```xml
...