talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #67 from GetStream/example/splitview

Browse Source 
add splitview example fixing components
This commit is contained in:
Salvatore Giordano
2020-08-03 15:45:16 +02:00
committed by GitHub
parent 59144e875f ebbf174e57
commit 40bcae4360
3 changed files with 218 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/split_view.dart
+139
View File
@@ -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 -1
View File
@@ -1,7 +1,7 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.0.0+1 version: 1.0.1+2
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/message_widget.dart
+78 -87
View File
@@ -212,100 +212,91 @@ class _MessageWidgetState extends State<MessageWidget> {
child: Transform( child: Transform(
alignment: Alignment.center, alignment: Alignment.center,
transform: Matrix4.rotationY(widget.reverse ? pi : 0), transform: Matrix4.rotationY(widget.reverse ? pi : 0),
child: Container( child: FractionallySizedBox(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: Container( widthFactor: 0.75,
constraints: BoxConstraints.loose( child: Column(
Size.fromWidth(MediaQuery.of(context).size.width * 0.8), crossAxisAlignment: CrossAxisAlignment.start,
), mainAxisSize: MainAxisSize.min,
child: Column( children: <Widget>[
crossAxisAlignment: CrossAxisAlignment.start, Column(
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ mainAxisSize: MainAxisSize.min,
IntrinsicWidth( children: <Widget>[
child: Column( Row(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Row( if (widget.showSendingIndicator == DisplayWidget.show)
mainAxisAlignment: MainAxisAlignment.start, _buildSendingIndicator(),
crossAxisAlignment: CrossAxisAlignment.end, SizedBox(
mainAxisSize: MainAxisSize.min, width: 2,
children: <Widget>[ ),
if (widget.showSendingIndicator == if (widget.showSendingIndicator == DisplayWidget.hide)
DisplayWidget.show) SizedBox(
_buildSendingIndicator(), width: 8,
SizedBox( ),
width: 2, 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: <Widget>[
..._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: <Widget>[
..._parseAttachments(context),
if (widget.message.text
.trim()
.isNotEmpty)
_buildTextBubble(context),
],
),
),
),
),
],
), ),
if (widget.showReplyIndicator &&
widget.message.replyCount > 0)
_buildReplyIndicator(leftPadding),
], ],
), ),
), if (widget.showReplyIndicator &&
if ((widget.message.createdAt != null && widget.message.replyCount > 0)
widget.showTimestamp) || _buildReplyIndicator(leftPadding),
widget.showUsername || ],
widget.readList?.isNotEmpty == true) ),
_buildBottomRow(leftPadding), if ((widget.message.createdAt != null &&
], widget.showTimestamp) ||
), widget.showUsername ||
widget.readList?.isNotEmpty == true)
_buildBottomRow(leftPadding),
],
), ),
), ),
), ),