Merge pull request #67 from GetStream/example/splitview

add splitview example fixing components

example/lib/split_view.dart

@@ -0,0 +1,139 @@
+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(
+      builder: (context, child) => StreamChat(
+        child: child,
+        client: client,
+      ),
+      home: SplitView(),
+    );
+  }
+}
+
+class SplitView extends StatefulWidget {
+  @override
+  _SplitViewState createState() => _SplitViewState();
+}
+
+class _SplitViewState extends State<SplitView> {
+  Channel selectedChannel;
+
+  @override
+  Widget build(BuildContext context) {
+    return Flex(
+      direction: Axis.horizontal,
+      children: <Widget>[
+        Flexible(
+          child: ChannelListPage(
+            onTap: (channel) {
+              setState(() {
+                selectedChannel = channel;
+              });
+            },
+          ),
+          flex: 1,
+        ),
+        Flexible(
+          child: Scaffold(
+            body: selectedChannel != null
+                ? StreamChannel(
+                    key: ValueKey(selectedChannel.cid),
+                    child: ChannelPage(),
+                    channel: selectedChannel,
+                  )
+                : Center(
+                    child: Text(
+                      'Pick a channel to show the messages 💬',
+                      style: Theme.of(context).textTheme.headline5,
+                    ),
+                  ),
+          ),
+          flex: 2,
+        ),
+      ],
+    );
+  }
+}
+
+class ChannelListPage extends StatelessWidget {
+  final void Function(Channel) onTap;
+
+  ChannelListPage({this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ChannelsBloc(
+        child: ChannelListView(
+          onChannelTap: onTap != null
+              ? (channel, _) {
+                  onTap(channel);
+                }
+              : null,
+          filter: {
+            'members': {
+              '\$in': [StreamChat.of(context).user.id],
+            }
+          },
+          sort: [SortOption('last_message_at')],
+          pagination: PaginationParams(
+            limit: 20,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ChannelPage extends StatelessWidget {
+  const ChannelPage({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Navigator(
+      onGenerateRoute: (settings) {
+        return MaterialPageRoute(
+          builder: (context) {
+            return Scaffold(
+              appBar: ChannelHeader(
+                showBackButton: false,
+              ),
+              body: Column(
+                children: <Widget>[
+                  Expanded(
+                    child: MessageListView(),
+                  ),
+                  MessageInput(),
+                ],
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+}

example/pubspec.yaml

@@ -1,7 +1,7 @@
 name: example
 description: A new Flutter project.
 
-version: 1.0.0+1
+version: 1.0.1+2
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_widget.dart

@@ -212,18 +212,14 @@ class _MessageWidgetState extends State<MessageWidget> {
         child: Transform(
           alignment: Alignment.center,
           transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-          child: Container(
+          child: FractionallySizedBox(
             alignment: Alignment.centerLeft,
-            child: Container(
+            widthFactor: 0.75,
-              constraints: BoxConstraints.loose(
-                Size.fromWidth(MediaQuery.of(context).size.width * 0.8),
-              ),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: <Widget>[
-                  IntrinsicWidth(
+                Column(
-                    child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisSize: MainAxisSize.min,
                   children: <Widget>[
@@ -232,14 +228,12 @@ class _MessageWidgetState extends State<MessageWidget> {
                       crossAxisAlignment: CrossAxisAlignment.end,
                       mainAxisSize: MainAxisSize.min,
                       children: <Widget>[
-                            if (widget.showSendingIndicator ==
+                        if (widget.showSendingIndicator == DisplayWidget.show)
-                                DisplayWidget.show)
                           _buildSendingIndicator(),
                         SizedBox(
                           width: 2,
                         ),
-                            if (widget.showSendingIndicator ==
+                        if (widget.showSendingIndicator == DisplayWidget.hide)
-                                DisplayWidget.hide)
                           SizedBox(
                             width: 8,
                           ),
@@ -250,8 +244,8 @@ class _MessageWidgetState extends State<MessageWidget> {
                         ),
                         if (widget.showUserAvatar == DisplayWidget.hide)
                           SizedBox(
-                                width: widget.messageTheme.avatarTheme
+                            width: widget.messageTheme.avatarTheme.constraints
-                                        .constraints.maxWidth +
+                                    .maxWidth +
                                 8,
                           ),
                         Flexible(
@@ -267,8 +261,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                               portal: _buildReactionIndicator(context),
                               child: (widget.message.isDeleted &&
                                       widget.message.status !=
-                                              MessageSendingStatus
+                                          MessageSendingStatus.FAILED_DELETE)
-                                                  .FAILED_DELETE)
                                   ? Transform(
                                       alignment: Alignment.center,
                                       transform: Matrix4.rotationY(
@@ -298,7 +291,6 @@ class _MessageWidgetState extends State<MessageWidget> {
                       _buildReplyIndicator(leftPadding),
                   ],
                 ),
-                  ),
                 if ((widget.message.createdAt != null &&
                         widget.showTimestamp) ||
                     widget.showUsername ||
@@ -309,7 +301,6 @@ class _MessageWidgetState extends State<MessageWidget> {
           ),
         ),
       ),
-      ),
     );
   }