diff --git a/example/lib/split_view.dart b/example/lib/split_view.dart new file mode 100644 index 00000000..f99e69fc --- /dev/null +++ b/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 { + Channel selectedChannel; + + @override + Widget build(BuildContext context) { + return Flex( + direction: Axis.horizontal, + children: [ + 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: [ + Expanded( + child: MessageListView(), + ), + MessageInput(), + ], + ), + ); + }, + ); + }, + ); + } +} diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 266926c8..3f3837b4 100644 --- a/example/pubspec.yaml +++ b/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" diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 3294ab17..fc6aecf2 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -212,100 +212,91 @@ class _MessageWidgetState extends State { child: Transform( alignment: Alignment.center, transform: Matrix4.rotationY(widget.reverse ? pi : 0), - child: Container( + child: FractionallySizedBox( alignment: Alignment.centerLeft, - child: Container( - constraints: BoxConstraints.loose( - Size.fromWidth(MediaQuery.of(context).size.width * 0.8), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - IntrinsicWidth( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + widthFactor: 0.75, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: [ - Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.end, - mainAxisSize: MainAxisSize.min, - children: [ - if (widget.showSendingIndicator == - DisplayWidget.show) - _buildSendingIndicator(), - SizedBox( - width: 2, + if (widget.showSendingIndicator == DisplayWidget.show) + _buildSendingIndicator(), + SizedBox( + width: 2, + ), + if (widget.showSendingIndicator == DisplayWidget.hide) + SizedBox( + width: 8, + ), + if (widget.showUserAvatar == DisplayWidget.show) + _buildUserAvatar(), + SizedBox( + width: 6, + ), + if (widget.showUserAvatar == DisplayWidget.hide) + SizedBox( + width: widget.messageTheme.avatarTheme.constraints + .maxWidth + + 8, + ), + Flexible( + child: Padding( + padding: widget.showReactions + ? EdgeInsets.only( + top: _reactionPadding, + ) + : EdgeInsets.zero, + child: PortalEntry( + portalAnchor: Alignment(0, 1), + childAnchor: Alignment.topRight, + portal: _buildReactionIndicator(context), + child: (widget.message.isDeleted && + widget.message.status != + MessageSendingStatus.FAILED_DELETE) + ? Transform( + alignment: Alignment.center, + transform: Matrix4.rotationY( + widget.reverse ? pi : 0), + child: DeletedMessage( + messageTheme: widget.messageTheme, + ), + ) + : Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + ..._parseAttachments(context), + if (widget.message.text + .trim() + .isNotEmpty) + _buildTextBubble(context), + ], + ), ), - if (widget.showSendingIndicator == - DisplayWidget.hide) - SizedBox( - width: 8, - ), - if (widget.showUserAvatar == DisplayWidget.show) - _buildUserAvatar(), - SizedBox( - width: 6, - ), - if (widget.showUserAvatar == DisplayWidget.hide) - SizedBox( - width: widget.messageTheme.avatarTheme - .constraints.maxWidth + - 8, - ), - Flexible( - child: Padding( - padding: widget.showReactions - ? EdgeInsets.only( - top: _reactionPadding, - ) - : EdgeInsets.zero, - child: PortalEntry( - portalAnchor: Alignment(0, 1), - childAnchor: Alignment.topRight, - portal: _buildReactionIndicator(context), - child: (widget.message.isDeleted && - widget.message.status != - MessageSendingStatus - .FAILED_DELETE) - ? Transform( - alignment: Alignment.center, - transform: Matrix4.rotationY( - widget.reverse ? pi : 0), - child: DeletedMessage( - messageTheme: widget.messageTheme, - ), - ) - : Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - ..._parseAttachments(context), - if (widget.message.text - .trim() - .isNotEmpty) - _buildTextBubble(context), - ], - ), - ), - ), - ), - ], + ), ), - if (widget.showReplyIndicator && - widget.message.replyCount > 0) - _buildReplyIndicator(leftPadding), ], ), - ), - if ((widget.message.createdAt != null && - widget.showTimestamp) || - widget.showUsername || - widget.readList?.isNotEmpty == true) - _buildBottomRow(leftPadding), - ], - ), + if (widget.showReplyIndicator && + widget.message.replyCount > 0) + _buildReplyIndicator(leftPadding), + ], + ), + if ((widget.message.createdAt != null && + widget.showTimestamp) || + widget.showUsername || + widget.readList?.isNotEmpty == true) + _buildBottomRow(leftPadding), + ], ), ), ),