stream_chat_flutter 0.1.35

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

Official Flutter SDK for Stream Chat #

Flutter Chat

The official Flutter components for Stream Chat, a service for building chat applications.

Pub Gitter

Quick Links

Flutter Chat Tutorial #

The best place to start is the Flutter Chat Tutorial. It teaches you how to use this SDK and also shows how to make frequently required changes.

Example App #

This repo includes a fully functional example app with setup instructions. The example is available under the example folder.

Add dependency #

dependencies:
 stream_chat_flutter: ^0.1.21

You should then run flutter packages get

Alpha version #

Use version ^0.2.0-alpha+1 to use the latest available version.

Note that this is still an alpha version. There may be some bugs, and the API can change in breaking ways.

Thanks to whoever tries these versions and reports bugs or suggestions.

Android #

All set ✅

iOS #

The library uses flutter file picker plugin to pick files from the os. Follow this wiki to fulfill iOS requirements.

We also use video_player to reproduce videos. Follow this guide to fulfill the requirements.

To pick images from the camera, we use the image_picker plugin. Follow these instructions to check the requirements.

Docs #

Business logic components #

We provide 2 Widgets dedicated to business logic and state management:

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.

Customizing styles #

The Flutter SDK comes with a fully designed set of widgets that 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 default styling, and there are two ways to change the styling:

  1. Initialize the StreamChatTheme from your existing MaterialApp style
  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(),
          ),
        ),
      );
    }
  }
  1. Construct a custom theme and provide all the customizations needed
  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(),
          ),
        ),
      );
    }
  }

Contributing #

We welcome code changes that improve this library or fix a problem, please make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github. We are pleased to merge your code into the official repository. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.

0.1.35 #

  • Add backgroundColor as part of StreamChatThemeData

0.1.34 #

  • Add onUserAvatarTap

0.1.33 #

  • Add default user and channel image to StreamChatTheme

0.1.32 #

  • Update llc version

0.1.31 #

  • Add initialMessage property to MessageInput

0.1.30 #

  • Add simple rendering of file attachments

0.1.29 #

  • Add doImageUploadRequest and doFileUploadRequest to MessageInput to let users customize file uploading (eg: custom cdn)

0.1.28 #

  • Add onTap to ChannelImage

  • Add onImageTap and onTitleTap to ChannelHeader

  • Add onImageTap to ChannelListView

0.1.27 #

  • Show other member user's name and image in one to one channels

0.1.25 #

  • Fix overflow in mentions overlay

0.1.23 #

  • Hotfix

0.1.22 #

  • Better mime type detection

0.1.21 #

  • Fix video loading and error

0.1.20 #

  • Add message configuration properties to MessageListView

0.1.19 #

  • Fix video aspect ratio

  • Add property to decide whether to enable video fullscreen

  • Add property to hide the attachment button

  • Do not show send button if an attachment is still uploading

  • Unfocus and disable the TextField before opening the camera (workaround for flutter/flutter#42417)

  • Add gesture (vertical drag down) to close the keyboard

  • Add keyboard type parameters (set it to TextInputType.text to show the submit button that will even close the keyboard)

The property showVideoFullScreen was added mainly because of this issue brianegan/chewie#261

0.1.18 #

  • Add message list date separators

0.1.17 #

  • Add dark theme

0.1.16 #

  • Add possibility to show the other users username next to the message timestamp

0.1.15 #

  • Fix MessageInput overflow

0.1.14 #

  • Add automatic keep alive to streamchat

0.1.12 #

  • Fix dependency error on iOS using flutter_form_builder

0.1.11 #

  • Fix bug in ChannelPreview when list of messages is empty

0.1.10 #

  • Do not automatically dispose Client object when disposing StreamChat widget

0.1.9 #

  • Fix message ui overflow

0.1.8 #

  • Bug fix

0.1.7 #

  • Add chat commands

  • Add edit message

0.1.6+4 #

  • Add some documentation

0.1.5 #

  • Fix channels pagination

0.1.4 #

  • Fix message widget builder on reaction

0.1.3 #

  • Fix upload attachment

0.1.2 #

  • Fix avatar shape

0.1.1 #

  • Add ThreadHeader

0.0.1 #

  • First release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

void main() async {
  final client = Client(
    's2dxdhpxd94g',
    logLevel: Level.INFO,
  );

  await client.setUser(
    User(id: 'super-band-9'),
    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A',
  );

  runApp(MyApp(client));
}

class MyApp extends StatelessWidget {
  final Client client;

  MyApp(this.client);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: Container(
        child: StreamChat(
          client: client,
          child: ChannelListPage(),
        ),
      ),
    );
  }
}

class ChannelListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ChannelListView(
        filter: {
          'members': {
            '\$in': [StreamChat.of(context).user.id],
          }
        },
        sort: [SortOption('last_message_at')],
        pagination: PaginationParams(
          limit: 20,
        ),
        channelWidget: ChannelPage(),
      ),
    );
  }
}

class ChannelPage extends StatelessWidget {
  const ChannelPage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Stack(
              children: <Widget>[
                MessageListView(
                  threadBuilder: (_, parentMessage) {
                    return ThreadPage(
                      parent: parentMessage,
                    );
                  },
                ),
                Positioned.fill(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8.0,
                      vertical: 4,
                    ),
                    child: TypingIndicator(
                      alignment: Alignment.bottomRight,
                    ),
                  ),
                ),
              ],
            ),
          ),
          MessageInput(),
        ],
      ),
    );
  }
}

class ThreadPage extends StatelessWidget {
  final Message parent;

  ThreadPage({
    Key key,
    this.parent,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ThreadHeader(
        parent: parent,
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: MessageListView(
              parentMessage: parent,
            ),
          ),
          if (parent.type != 'deleted')
            MessageInput(
              parentMessage: parent,
            ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  stream_chat_flutter: ^0.1.35

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:stream_chat_flutter/stream_chat_flutter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
Health:
Code health derived from static analysis. [more]
96
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
88
Learn more about scoring.

We analyzed this package on Jun 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health suggestions

Fix lib/src/message_widget.dart. (-1.99 points)

Analysis of lib/src/message_widget.dart reported 4 hints:

line 712 col 52: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 731 col 52: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 750 col 52: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 796 col 58: 'title' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline6. This feature was deprecated after v1.13.8..

Fix lib/src/message_input.dart. (-1.49 points)

Analysis of lib/src/message_input.dart reported 3 hints:

line 234 col 46: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 628 col 34: 'pickImage' is deprecated and shouldn't be used. Use imagePicker.getImage() method instead..

line 630 col 34: 'pickVideo' is deprecated and shouldn't be used. Use imagePicker.getVideo() method instead..

Fix lib/src/channel_list_view.dart. (-0.50 points)

Analysis of lib/src/channel_list_view.dart reported 1 hint:

line 160 col 58: 'title' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline6. This feature was deprecated after v1.13.8..

Fix lib/src/message_list_view.dart. (-0.50 points)

Analysis of lib/src/message_list_view.dart reported 1 hint:

line 296 col 36: 'title' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline6. This feature was deprecated after v1.13.8..

Maintenance issues and suggestions

Support latest dependencies. (-20 points)

The version constraint in pubspec.yaml does not support the latest published versions for 2 dependencies (flutter_keyboard_visibility, flutter_markdown).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
cached_network_image ^2.1.0+1 2.2.0+1 2.3.0-beta.1+1
chewie ^0.9.10 0.9.10
file_picker ^1.6.3+2 1.9.0+1
flutter 0.0.0
flutter_keyboard_visibility ^2.0.0 2.0.0 3.0.0
flutter_markdown ^0.3.5 0.3.5 0.4.1
http_parser ^3.1.4 3.1.4
image_picker ^0.6.5 0.6.7
jiffy ^3.0.1 3.0.1
mime ^0.9.6+3 0.9.6+3
rxdart ^0.24.0 0.24.1
stream_chat ^0.1.28 0.1.30 0.2.0-alpha+19
url_launcher ^5.4.2 5.4.10
video_player ^0.10.8+1 0.10.11+1
visibility_detector ^0.1.4 0.1.5
Transitive dependencies
args 1.6.0
async 2.4.1
charcode 1.1.3
clock 1.0.1
collection 1.14.12
convert 2.1.1
crypto 2.1.5
dio 3.0.9
file 5.1.0
flutter_cache_manager 1.4.0
flutter_plugin_android_lifecycle 1.0.8
flutter_web_plugins 0.0.0
http 0.12.1
image_picker_platform_interface 1.1.0
intl 0.16.1
json_annotation 3.0.1
logging 0.11.4
markdown 2.1.4
meta 1.1.8
open_iconic_flutter 0.3.0
path 1.7.0
path_provider 1.6.10
path_provider_linux 0.0.1+1
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
platform 2.2.1
platform_detect 1.4.0
plugin_platform_interface 1.0.2
process 3.0.13
pub_semver 1.4.4
sky_engine 0.0.99
source_span 1.7.0
sqflite 1.3.0+2 1.3.1-dev.1
sqflite_common 1.0.1
stream_channel 2.0.0
string_scanner 1.0.5
synchronized 2.2.0
term_glyph 1.1.0
typed_data 1.1.6
url_launcher_macos 0.0.1+7
url_launcher_platform_interface 1.0.7
url_launcher_web 0.1.1+6
uuid 2.0.4
vector_math 2.0.8
video_player_platform_interface 2.0.2
video_player_web 0.1.3+1
wakelock 0.1.4+1
web_socket_channel 1.1.0
xdg_directories 0.1.0
Dev dependencies
pedantic ^1.9.0 1.9.0