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

Merge branches 'feature/new-ui' and 'qa4-fixes' of github.com:GetStream/stream-chat-flutter into qa4-fixes

Browse Source
This commit is contained in:
Sahil Kumar
2021-01-13 18:42:43 +05:30
parent ed767ec65b aaf2d39473
commit 618acbc4e7
13 changed files with 1189 additions and 817 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/group_chat_details_screen.dart
+192 -91
View File
@@ -123,108 +123,209 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
onPressed: _isGroupNameEmpty onPressed: _isGroupNameEmpty
? null ? null
: () async { : () async {
final groupName = _groupNameController.text; try {
final client = StreamChat.of(context).client; final groupName = _groupNameController.text;
final channel = client final client = StreamChat.of(context).client;
.channel('messaging', id: Uuid().v4(), extraData: { final channel = client.channel('messaging',
'members': [ id: Uuid().v4(),
client.state.user.id, extraData: {
..._selectedUsers.map((e) => e.id), 'members': [
], client.state.user.id,
'name': groupName, ..._selectedUsers.map((e) => e.id),
}); ],
await channel.watch(); 'name': groupName,
Navigator.pushNamedAndRemoveUntil( });
context, await channel.watch();
Routes.CHANNEL_PAGE, Navigator.pushNamedAndRemoveUntil(
ModalRoute.withName(Routes.HOME), context,
arguments: ChannelPageArgs(channel: channel), Routes.CHANNEL_PAGE,
); ModalRoute.withName(Routes.HOME),
arguments: ChannelPageArgs(channel: channel),
);
} catch (err) {
_showErrorAlert();
}
}, },
), ),
), ),
], ],
), ),
body: Column( body: ValueListenableBuilder<ConnectionStatus>(
children: [ valueListenable: StreamChat.of(context).client.wsConnectionStatus,
Container( builder: (context, status, _) {
width: double.maxFinite, String statusString = '';
decoration: BoxDecoration( bool showStatus = true;
gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
), switch (status) {
child: Padding( case ConnectionStatus.connected:
padding: const EdgeInsets.symmetric( statusString = 'Connected';
vertical: 8, showStatus = false;
horizontal: 8, break;
), case ConnectionStatus.connecting:
child: Text( statusString = 'Reconnecting...';
'$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}', break;
style: TextStyle( case ConnectionStatus.disconnected:
color: StreamChatTheme.of(context).colorTheme.grey, statusString = 'Disconnected';
), break;
), }
), return InfoTile(
), showMessage: showStatus,
Expanded( tileAnchor: Alignment.topCenter,
child: GestureDetector( childAnchor: Alignment.topCenter,
behavior: HitTestBehavior.opaque, message: statusString,
onPanDown: (_) => FocusScope.of(context).unfocus(), child: Column(
child: ListView.separated( children: [
itemCount: _selectedUsers.length + 1, Container(
separatorBuilder: (_, __) => Container( width: double.maxFinite,
height: 1, decoration: BoxDecoration(
color: StreamChatTheme.of(context).colorTheme.greyWhisper, gradient:
), StreamChatTheme.of(context).colorTheme.bgGradient,
itemBuilder: (_, index) { ),
if (index == _selectedUsers.length) { child: Padding(
return Container( padding: const EdgeInsets.symmetric(
height: 1, vertical: 8,
color: horizontal: 8,
StreamChatTheme.of(context).colorTheme.greyWhisper, ),
); child: Text(
} '$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}',
final user = _selectedUsers[index]; style: TextStyle(
return ListTile( color: StreamChatTheme.of(context).colorTheme.grey,
key: ObjectKey(user), ),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
), ),
), ),
title: Text( ),
user.name, Expanded(
style: TextStyle(fontWeight: FontWeight.bold), child: GestureDetector(
), behavior: HitTestBehavior.opaque,
contentPadding: const EdgeInsets.symmetric( onPanDown: (_) => FocusScope.of(context).unfocus(),
horizontal: 12, child: ListView.separated(
vertical: 8, itemCount: _selectedUsers.length + 1,
), separatorBuilder: (_, __) => Container(
trailing: IconButton( height: 1,
icon: Icon( color: StreamChatTheme.of(context)
Icons.clear_rounded, .colorTheme
color: StreamChatTheme.of(context).colorTheme.black, .greyWhisper,
),
itemBuilder: (_, index) {
if (index == _selectedUsers.length) {
return Container(
height: 1,
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
);
}
final user = _selectedUsers[index];
return ListTile(
key: ObjectKey(user),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
),
),
title: Text(
user.name,
style: TextStyle(fontWeight: FontWeight.bold),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
trailing: IconButton(
icon: Icon(
Icons.clear_rounded,
color: StreamChatTheme.of(context)
.colorTheme
.black,
),
padding: const EdgeInsets.all(0),
splashRadius: 24,
onPressed: () {
setState(() {
_selectedUsers.remove(user);
});
if (_selectedUsers.isEmpty) {
Navigator.pop(context, _selectedUsers);
}
},
),
);
},
), ),
padding: const EdgeInsets.all(0),
splashRadius: 24,
onPressed: () {
setState(() {
_selectedUsers.remove(user);
});
if (_selectedUsers.isEmpty) {
Navigator.pop(context, _selectedUsers);
}
},
), ),
); ),
}, ],
), ),
), );
), }),
],
),
), ),
); );
} }
void _showErrorAlert() {
showModalBottomSheet(
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
)),
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 26.0,
),
StreamSvgIcon.error(
color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0,
),
SizedBox(
height: 26.0,
),
Text(
'Something went wrong',
style: StreamChatTheme.of(context).textTheme.headlineBold,
),
SizedBox(
height: 7.0,
),
Text('The operation couldn\'t be completed.'),
SizedBox(
height: 36.0,
),
Container(
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text(
'OK',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
],
);
},
);
}
} }
example/lib/main.dart
+36 -7
View File
@@ -763,7 +763,7 @@ class _ChannelPageState extends State<ChannelPage> {
} }
} }
class ThreadPage extends StatelessWidget { class ThreadPage extends StatefulWidget {
final Message parent; final Message parent;
final int initialScrollIndex; final int initialScrollIndex;
final double initialAlignment; final double initialAlignment;
@@ -775,25 +775,54 @@ class ThreadPage extends StatelessWidget {
this.initialAlignment, this.initialAlignment,
}) : super(key: key); }) : super(key: key);
@override
_ThreadPageState createState() => _ThreadPageState();
}
class _ThreadPageState extends State<ThreadPage> {
Message _quotedMessage;
FocusNode _focusNode = FocusNode();
@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
void _reply(Message message) {
setState(() => _quotedMessage = message);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
_focusNode.requestFocus();
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow, backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
appBar: ThreadHeader( appBar: ThreadHeader(
parent: parent, parent: widget.parent,
), ),
body: Column( body: Column(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: MessageListView( child: MessageListView(
parentMessage: parent, parentMessage: widget.parent,
initialScrollIndex: initialScrollIndex, initialScrollIndex: widget.initialScrollIndex,
initialAlignment: initialAlignment, initialAlignment: widget.initialAlignment,
onMessageSwiped: _reply,
onReplyTap: _reply,
), ),
), ),
if (parent.type != 'deleted') if (widget.parent.type != 'deleted')
MessageInput( MessageInput(
parentMessage: parent, parentMessage: widget.parent,
focusNode: _focusNode,
quotedMessage: _quotedMessage,
onQuotedMessageCleared: () {
setState(() => _quotedMessage = null);
_focusNode.unfocus();
},
), ),
], ],
), ),
example/lib/new_chat_screen.dart
+270 -230
View File
@@ -134,248 +134,288 @@ class _NewChatScreenState extends State<NewChatScreen> {
), ),
centerTitle: true, centerTitle: true,
), ),
body: StreamChannel( body: ValueListenableBuilder<ConnectionStatus>(
showLoading: false, valueListenable: StreamChat.of(context).client.wsConnectionStatus,
channel: channel, builder: (context, status, _) {
child: Column( String statusString = '';
crossAxisAlignment: CrossAxisAlignment.start, bool showStatus = true;
children: [
ChipsInputTextField<User>( switch (status) {
key: _chipInputTextFieldStateKey, case ConnectionStatus.connected:
controller: _controller, statusString = 'Connected';
focusNode: _searchFocusNode, showStatus = false;
chipBuilder: (context, user) { break;
return GestureDetector( case ConnectionStatus.connecting:
onTap: () { statusString = 'Reconnecting...';
_chipInputTextFieldState.removeItem(user); break;
_searchFocusNode.requestFocus(); case ConnectionStatus.disconnected:
}, statusString = 'Disconnected';
child: Stack( break;
alignment: AlignmentDirectional.centerStart, }
children: [ return InfoTile(
Container( showMessage: showStatus,
decoration: BoxDecoration( tileAnchor: Alignment.topCenter,
color: StreamChatTheme.of(context) childAnchor: Alignment.topCenter,
.colorTheme message: statusString,
.greyGainsboro, child: StreamChannel(
borderRadius: BorderRadius.circular(12), showLoading: false,
), channel: channel,
padding: const EdgeInsets.only(left: 24), child: Column(
child: Padding( crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.fromLTRB(8, 4, 12, 4), children: [
child: Text( ChipsInputTextField<User>(
user.name, key: _chipInputTextFieldStateKey,
maxLines: 1, controller: _controller,
style: TextStyle( focusNode: _searchFocusNode,
color: chipBuilder: (context, user) {
StreamChatTheme.of(context).colorTheme.black, return GestureDetector(
), onTap: () {
), _chipInputTextFieldState.removeItem(user);
), _searchFocusNode.requestFocus();
),
Container(
foregroundDecoration: BoxDecoration(
color: StreamChatTheme.of(context).colorTheme.overlay,
shape: BoxShape.circle,
),
child: UserAvatar(
showOnlineStatus: false,
user: user,
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
),
),
StreamSvgIcon.close(),
],
),
);
},
onChipAdded: (user) {
setState(() => _selectedUsers.add(user));
},
onChipRemoved: (user) {
setState(() => _selectedUsers.remove(user));
},
),
if (!_isSearchActive && !_selectedUsers.isNotEmpty)
Container(
child: InkWell(
onTap: () {
Navigator.pushNamed(
context,
Routes.NEW_GROUP_CHAT,
);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
StreamNeumorphicButton(
child: Center(
child: StreamSvgIcon.contacts(
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue,
size: 24,
),
),
),
SizedBox(width: 8),
Text(
'Create a Group',
style: StreamChatTheme.of(context).textTheme.bodyBold,
),
],
),
),
),
),
if (_showUserList)
Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? "Matches for \"$_userNameQuery\""
: 'On the platform',
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5))),
),
),
Expanded(
child: _showUserList
? GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (_) => FocusScope.of(context).unfocus(),
child: UsersBloc(
child: UserListView(
selectedUsers: _selectedUsers,
groupAlphabetically: _isSearchActive ? false : true,
onUserTap: (user, _) {
_controller.clear();
if (!_selectedUsers.contains(user)) {
_chipInputTextFieldState
..addItem(user)
..pauseItemAddition();
} else {
_chipInputTextFieldState.removeItem(user);
}
}, },
pagination: PaginationParams( child: Stack(
limit: 25, alignment: AlignmentDirectional.centerStart,
), children: [
filter: { Container(
if (_userNameQuery.isNotEmpty) decoration: BoxDecoration(
'name': { color: StreamChatTheme.of(context)
r'$autocomplete': _userNameQuery, .colorTheme
}, .greyGainsboro,
'id': { borderRadius: BorderRadius.circular(12),
r'$ne': StreamChat.of(context).user.id, ),
}, padding: const EdgeInsets.only(left: 24),
}, child: Padding(
sort: [ padding:
SortOption( const EdgeInsets.fromLTRB(8, 4, 12, 4),
'name', child: Text(
direction: 1, user.name,
), maxLines: 1,
], style: TextStyle(
emptyBuilder: (_) { color: StreamChatTheme.of(context)
return LayoutBuilder( .colorTheme
builder: (context, viewportConstraints) { .black,
return SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
), ),
child: Center( ),
child: Column( ),
children: [ ),
Padding( Container(
padding: const EdgeInsets.all(24), foregroundDecoration: BoxDecoration(
child: StreamSvgIcon.search( color: StreamChatTheme.of(context)
size: 96, .colorTheme
color: Colors.grey, .overlay,
shape: BoxShape.circle,
),
child: UserAvatar(
showOnlineStatus: false,
user: user,
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
),
),
StreamSvgIcon.close(),
],
),
);
},
onChipAdded: (user) {
setState(() => _selectedUsers.add(user));
},
onChipRemoved: (user) {
setState(() => _selectedUsers.remove(user));
},
),
if (!_isSearchActive && !_selectedUsers.isNotEmpty)
Container(
child: InkWell(
onTap: () {
Navigator.pushNamed(
context,
Routes.NEW_GROUP_CHAT,
);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
StreamNeumorphicButton(
child: Center(
child: StreamSvgIcon.contacts(
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue,
size: 24,
),
),
),
SizedBox(width: 8),
Text(
'Create a Group',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold,
),
],
),
),
),
),
if (_showUserList)
Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient:
StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? "Matches for \"$_userNameQuery\""
: 'On the platform',
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5))),
),
),
Expanded(
child: _showUserList
? GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (_) =>
FocusScope.of(context).unfocus(),
child: UsersBloc(
child: UserListView(
selectedUsers: _selectedUsers,
groupAlphabetically:
_isSearchActive ? false : true,
onUserTap: (user, _) {
_controller.clear();
if (!_selectedUsers.contains(user)) {
_chipInputTextFieldState
..addItem(user)
..pauseItemAddition();
} else {
_chipInputTextFieldState.removeItem(user);
}
},
pagination: PaginationParams(
limit: 25,
),
filter: {
if (_userNameQuery.isNotEmpty)
'name': {
r'$autocomplete': _userNameQuery,
},
'id': {
r'$ne': StreamChat.of(context).user.id,
},
},
sort: [
SortOption(
'name',
direction: 1,
),
],
emptyBuilder: (_) {
return LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
physics:
AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight:
viewportConstraints.maxHeight,
),
child: Center(
child: Column(
children: [
Padding(
padding:
const EdgeInsets.all(
24),
child: StreamSvgIcon.search(
size: 96,
color: Colors.grey,
),
),
Text(
'No user matches these keywords...',
style: StreamChatTheme.of(
context)
.textTheme
.footnote
.copyWith(
color: StreamChatTheme
.of(context)
.colorTheme
.black
.withOpacity(
.5)),
),
],
),
), ),
), ),
Text( );
'No user matches these keywords...', },
style: StreamChatTheme.of(context) );
.textTheme },
.footnote ),
.copyWith( ),
color: StreamChatTheme.of( )
context) : FutureBuilder<bool>(
.colorTheme future: channel.initialized,
.black builder: (context, snapshot) {
.withOpacity(.5)), if (snapshot.data == true) {
), return MessageListView();
], }
),
return Center(
child: Text(
'No chats here yet...',
style: TextStyle(
fontSize: 12,
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
), ),
), ),
); );
}, },
);
},
),
),
)
: FutureBuilder<bool>(
future: channel.initialized,
builder: (context, snapshot) {
if (snapshot.data == true) {
return MessageListView();
}
return Center(
child: Text(
'No chats here yet...',
style: TextStyle(
fontSize: 12,
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
), ),
), ),
MessageInput(
focusNode: _messageInputFocusNode,
preMessageSending: (message) async {
await channel.watch();
return message;
},
onMessageSent: (m) {
Navigator.pushNamedAndRemoveUntil(
context,
Routes.CHANNEL_PAGE,
ModalRoute.withName(Routes.HOME),
arguments: ChannelPageArgs(channel: channel),
); );
}, },
), ),
), ],
MessageInput( ),
focusNode: _messageInputFocusNode, ),
preMessageSending: (message) async { );
await channel.watch(); }),
return message;
},
onMessageSent: (m) {
Navigator.pushNamedAndRemoveUntil(
context,
Routes.CHANNEL_PAGE,
ModalRoute.withName(Routes.HOME),
arguments: ChannelPageArgs(channel: channel),
);
},
),
],
),
),
); );
} }
} }
example/lib/new_group_chat_screen.dart
+210 -179
View File
@@ -87,196 +87,227 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
) )
], ],
), ),
body: NestedScrollView( body: ValueListenableBuilder<ConnectionStatus>(
floatHeaderSlivers: true, valueListenable: StreamChat.of(context).client.wsConnectionStatus,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { builder: (context, status, _) {
return <Widget>[ String statusString = '';
SliverToBoxAdapter( bool showStatus = true;
child: SearchTextField(
controller: _controller, switch (status) {
), case ConnectionStatus.connected:
), statusString = 'Connected';
if (_selectedUsers.isNotEmpty) showStatus = false;
SliverToBoxAdapter( break;
child: Container( case ConnectionStatus.connecting:
height: 104, statusString = 'Reconnecting...';
child: ListView.separated( break;
scrollDirection: Axis.horizontal, case ConnectionStatus.disconnected:
itemCount: _selectedUsers.length, statusString = 'Disconnected';
padding: const EdgeInsets.all(8), break;
separatorBuilder: (_, __) => SizedBox(width: 16), }
itemBuilder: (_, index) { return InfoTile(
final user = _selectedUsers.elementAt(index); showMessage: showStatus,
return Column( tileAnchor: Alignment.topCenter,
children: [ childAnchor: Alignment.topCenter,
Stack( message: statusString,
children: [ child: NestedScrollView(
UserAvatar( floatHeaderSlivers: true,
onlineIndicatorAlignment: Alignment(0.9, 0.9), headerSliverBuilder:
user: user, (BuildContext context, bool innerBoxIsScrolled) {
showOnlineStatus: true, return <Widget>[
borderRadius: BorderRadius.circular(32), SliverToBoxAdapter(
constraints: BoxConstraints.tightFor( child: SearchTextField(
height: 64, controller: _controller,
width: 64, ),
), ),
), if (_selectedUsers.isNotEmpty)
Positioned( SliverToBoxAdapter(
top: -4, child: Container(
right: -4, height: 104,
child: GestureDetector( child: ListView.separated(
onTap: () { scrollDirection: Axis.horizontal,
if (_selectedUsers.contains(user)) { itemCount: _selectedUsers.length,
setState( padding: const EdgeInsets.all(8),
() => _selectedUsers.remove(user)); separatorBuilder: (_, __) => SizedBox(width: 16),
} itemBuilder: (_, index) {
}, final user = _selectedUsers.elementAt(index);
child: Container( return Column(
decoration: BoxDecoration( children: [
color: StreamChatTheme.of(context) Stack(
.colorTheme children: [
.white, UserAvatar(
shape: BoxShape.circle, onlineIndicatorAlignment:
border: Border.all( Alignment(0.9, 0.9),
color: StreamChatTheme.of(context) user: user,
.colorTheme showOnlineStatus: true,
.whiteSnow, borderRadius: BorderRadius.circular(32),
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
), ),
), Positioned(
child: StreamSvgIcon.close( top: -4,
color: StreamChatTheme.of(context) right: -4,
.colorTheme child: GestureDetector(
.black, onTap: () {
size: 24, if (_selectedUsers.contains(user)) {
setState(() =>
_selectedUsers.remove(user));
}
},
child: Container(
decoration: BoxDecoration(
color: StreamChatTheme.of(context)
.colorTheme
.white,
shape: BoxShape.circle,
border: Border.all(
color:
StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
),
),
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.black,
size: 24,
),
),
),
)
],
),
SizedBox(height: 4),
Text(
user.name.split(' ')[0],
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
), ),
), ),
), ],
) );
], },
), ),
SizedBox(height: 4), ),
Text( ),
user.name.split(' ')[0], SliverPersistentHeader(
style: TextStyle( pinned: true,
fontWeight: FontWeight.bold, delegate: _HeaderDelegate(
fontSize: 12, height: 30,
child: Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? 'Matches for \"$_userNameQuery\"'
: 'On the platform',
style: TextStyle(
color:
StreamChatTheme.of(context).colorTheme.grey,
),
), ),
), ),
], ),
);
},
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _HeaderDelegate(
height: 30,
child: Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? 'Matches for \"$_userNameQuery\"'
: 'On the platform',
style: TextStyle(
color: StreamChatTheme.of(context).colorTheme.grey,
), ),
), ),
), ];
), },
), body: GestureDetector(
), behavior: HitTestBehavior.opaque,
]; onPanDown: (_) => FocusScope.of(context).unfocus(),
}, child: UsersBloc(
body: GestureDetector( child: UserListView(
behavior: HitTestBehavior.opaque, selectedUsers: _selectedUsers,
onPanDown: (_) => FocusScope.of(context).unfocus(), pullToRefresh: false,
child: UsersBloc( groupAlphabetically: _isSearchActive ? false : true,
child: UserListView( onUserTap: (user, _) {
selectedUsers: _selectedUsers, if (!_selectedUsers.contains(user)) {
pullToRefresh: false, setState(() {
groupAlphabetically: _isSearchActive ? false : true, _selectedUsers.add(user);
onUserTap: (user, _) { });
if (!_selectedUsers.contains(user)) { } else {
setState(() { setState(() {
_selectedUsers.add(user); _selectedUsers.remove(user);
}); });
} else { }
setState(() { },
_selectedUsers.remove(user); pagination: PaginationParams(
}); limit: 25,
} ),
}, filter: {
pagination: PaginationParams( if (_userNameQuery.isNotEmpty)
limit: 25, 'name': {
), r'$autocomplete': _userNameQuery,
filter: { },
if (_userNameQuery.isNotEmpty) 'id': {
'name': { r'$ne': StreamChat.of(context).user.id,
r'$autocomplete': _userNameQuery, }
}, },
'id': { sort: [
r'$ne': StreamChat.of(context).user.id, SortOption(
} 'name',
}, direction: 1,
sort: [
SortOption(
'name',
direction: 1,
),
],
emptyBuilder: (_) {
return LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
), ),
child: Center( ],
child: Column( emptyBuilder: (_) {
children: [ return LayoutBuilder(
Padding( builder: (context, viewportConstraints) {
padding: const EdgeInsets.all(24), return SingleChildScrollView(
child: StreamSvgIcon.search( physics: AlwaysScrollableScrollPhysics(),
size: 96, child: ConstrainedBox(
color: StreamChatTheme.of(context) constraints: BoxConstraints(
.colorTheme minHeight: viewportConstraints.maxHeight,
.grey, ),
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(24),
child: StreamSvgIcon.search(
size: 96,
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
Text(
'No user matches these keywords...',
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
],
),
), ),
), ),
Text( );
'No user matches these keywords...', },
style: StreamChatTheme.of(context) );
.textTheme },
.footnote ),
.copyWith( ),
color: StreamChatTheme.of(context) ),
.colorTheme ),
.grey, );
), }),
),
],
),
),
),
);
},
);
},
),
),
),
),
); );
} }
} }
example/pubspec.yaml
+1 -1
View File
@@ -1,6 +1,6 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.1.1+1 version: 1.1.1+2
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/channel_header.dart
+79 -45
View File
@@ -3,6 +3,7 @@ import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/back_button.dart'; import 'package:stream_chat_flutter/src/back_button.dart';
import 'package:stream_chat_flutter/src/channel_info.dart'; import 'package:stream_chat_flutter/src/channel_info.dart';
import 'package:stream_chat_flutter/src/channel_name.dart'; import 'package:stream_chat_flutter/src/channel_name.dart';
import 'package:stream_chat_flutter/src/info_tile.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
@@ -68,6 +69,8 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
/// If true the typing indicator will be rendered if a user is typing /// If true the typing indicator will be rendered if a user is typing
final bool showTypingIndicator; final bool showTypingIndicator;
final bool showConnectionStateTile;
/// Creates a channel header /// Creates a channel header
ChannelHeader({ ChannelHeader({
Key key, Key key,
@@ -76,60 +79,91 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
this.onTitleTap, this.onTitleTap,
this.showTypingIndicator = true, this.showTypingIndicator = true,
this.onImageTap, this.onImageTap,
this.showConnectionStateTile = false,
}) : preferredSize = Size.fromHeight(kToolbarHeight), }) : preferredSize = Size.fromHeight(kToolbarHeight),
super(key: key); super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final channel = StreamChannel.of(context).channel; final channel = StreamChannel.of(context).channel;
return AppBar( final _client = StreamChat.of(context).client;
brightness: Theme.of(context).brightness,
elevation: 1, return ValueListenableBuilder<ConnectionStatus>(
leading: showBackButton valueListenable: _client.wsConnectionStatus,
? StreamBackButton( builder: (context, status, _) {
onPressed: onBackPressed, String statusString = '';
showUnreads: true, bool showStatus = true;
)
: SizedBox(), switch (status) {
backgroundColor: case ConnectionStatus.connected:
StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, statusString = 'Connected';
actions: <Widget>[ showStatus = false;
Padding( break;
padding: const EdgeInsets.only(right: 10.0), case ConnectionStatus.connecting:
child: Center( statusString = 'Reconnecting...';
child: ChannelImage( break;
onTap: onImageTap, case ConnectionStatus.disconnected:
), statusString = 'Disconnected';
), break;
), }
],
centerTitle: true, return InfoTile(
title: InkWell( showMessage: showConnectionStateTile ? showStatus : false,
onTap: onTitleTap, message: statusString,
child: Container( child: AppBar(
height: preferredSize.height, brightness: Theme.of(context).brightness,
width: preferredSize.width, elevation: 1,
child: Column( leading: showBackButton
crossAxisAlignment: CrossAxisAlignment.center, ? StreamBackButton(
mainAxisAlignment: MainAxisAlignment.center, onPressed: onBackPressed,
children: <Widget>[ showUnreads: true,
ChannelName( )
textStyle: StreamChatTheme.of(context) : SizedBox(),
.channelTheme backgroundColor: StreamChatTheme.of(context)
.channelHeaderTheme .channelTheme
.title, .channelHeaderTheme
), .color,
SizedBox(height: 2), actions: <Widget>[
ChannelInfo( Padding(
showTypingIndicator: showTypingIndicator, padding: const EdgeInsets.only(right: 10.0),
channel: channel, child: Center(
textStyle: child: ChannelImage(
StreamChatTheme.of(context).channelPreviewTheme.subtitle, onTap: onImageTap,
),
),
), ),
], ],
centerTitle: true,
title: InkWell(
onTap: onTitleTap,
child: Container(
height: preferredSize.height,
width: preferredSize.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ChannelName(
textStyle: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.title,
),
SizedBox(height: 2),
ChannelInfo(
showTypingIndicator: showTypingIndicator,
channel: channel,
textStyle: StreamChatTheme.of(context)
.channelPreviewTheme
.subtitle,
),
],
),
),
),
), ),
), );
), },
); );
} }
lib/src/channel_list_header.dart
+91 -59
View File
@@ -6,6 +6,7 @@ import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart'; import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'info_tile.dart';
import 'stream_chat.dart'; import 'stream_chat.dart';
typedef _TitleBuilder = Widget Function( typedef _TitleBuilder = Widget Function(
@@ -53,6 +54,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
this.titleBuilder, this.titleBuilder,
this.onUserAvatarTap, this.onUserAvatarTap,
this.onNewChatButtonTap, this.onNewChatButtonTap,
this.showConnectionStateTile = false,
}) : super(key: key); }) : super(key: key);
/// Pass this if you don't have a [Client] in your widget tree. /// Pass this if you don't have a [Client] in your widget tree.
@@ -68,77 +70,107 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
/// Callback to call when pressing the new chat button. /// Callback to call when pressing the new chat button.
final VoidCallback onNewChatButtonTap; final VoidCallback onNewChatButtonTap;
final bool showConnectionStateTile;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final _client = client ?? StreamChat.of(context).client; final _client = client ?? StreamChat.of(context).client;
final user = _client.state.user; final user = _client.state.user;
return AppBar( return ValueListenableBuilder<ConnectionStatus>(
brightness: Theme.of(context).brightness, valueListenable: _client.wsConnectionStatus,
elevation: 1, builder: (context, status, child) {
backgroundColor: String statusString = '';
StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, bool showStatus = true;
centerTitle: true,
leading: Center( switch (status) {
child: UserAvatar( case ConnectionStatus.connected:
user: user, statusString = 'Connected';
showOnlineStatus: false, showStatus = false;
onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(), break;
borderRadius: BorderRadius.circular(20), case ConnectionStatus.connecting:
constraints: BoxConstraints.tightFor( statusString = 'Reconnecting...';
height: 40, break;
width: 40, case ConnectionStatus.disconnected:
), statusString = 'Disconnected';
), break;
), }
actions: [
StreamNeumorphicButton( return InfoTile(
child: IconButton( showMessage: showConnectionStateTile ? showStatus : false,
icon: ValueListenableBuilder<ConnectionStatus>( message: statusString,
valueListenable: _client.wsConnectionStatus, child: AppBar(
builder: (context, status, child) { brightness: Theme.of(context).brightness,
var color; elevation: 1,
backgroundColor: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.color,
centerTitle: true,
leading: Center(
child: UserAvatar(
user: user,
showOnlineStatus: false,
onTap:
onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
borderRadius: BorderRadius.circular(20),
constraints: BoxConstraints.tightFor(
height: 40,
width: 40,
),
),
),
actions: [
StreamNeumorphicButton(
child: IconButton(
icon: ValueListenableBuilder<ConnectionStatus>(
valueListenable: _client.wsConnectionStatus,
builder: (context, status, child) {
var color;
switch (status) {
case ConnectionStatus.connected:
color =
StreamChatTheme.of(context).colorTheme.accentBlue;
break;
case ConnectionStatus.connecting:
color = Colors.grey;
break;
case ConnectionStatus.disconnected:
color = Colors.grey;
break;
}
return SvgPicture.asset(
'svgs/icon_pen_write.svg',
package: 'stream_chat_flutter',
width: 24.0,
height: 24.0,
color: color,
);
},
),
onPressed: onNewChatButtonTap,
),
)
],
title: Builder(
builder: (context) {
if (titleBuilder != null) {
return titleBuilder(context, status, _client);
}
switch (status) { switch (status) {
case ConnectionStatus.connected: case ConnectionStatus.connected:
color = StreamChatTheme.of(context).colorTheme.accentBlue; return _buildConnectedTitleState(context);
break;
case ConnectionStatus.connecting: case ConnectionStatus.connecting:
color = Colors.grey; return _buildConnectingTitleState(context);
break;
case ConnectionStatus.disconnected: case ConnectionStatus.disconnected:
color = Colors.grey; return _buildDisconnectedTitleState(context, _client);
break; default:
return Offstage();
} }
return SvgPicture.asset(
'svgs/icon_pen_write.svg',
package: 'stream_chat_flutter',
width: 24.0,
height: 24.0,
color: color,
);
}, },
), ),
onPressed: onNewChatButtonTap,
), ),
) );
], },
title: ValueListenableBuilder<ConnectionStatus>(
valueListenable: _client.wsConnectionStatus,
builder: (context, status, child) {
if (titleBuilder != null) {
return titleBuilder(context, status, _client);
}
switch (status) {
case ConnectionStatus.connected:
return _buildConnectedTitleState(context);
case ConnectionStatus.connecting:
return _buildConnectingTitleState(context);
case ConnectionStatus.disconnected:
return _buildDisconnectedTitleState(context, _client);
default:
return Offstage();
}
},
),
); );
} }
lib/src/info_tile.dart
+48
View File
@@ -0,0 +1,48 @@
import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
class InfoTile extends StatelessWidget {
final String message;
final Widget child;
final bool showMessage;
final Alignment tileAnchor;
final Alignment childAnchor;
final TextStyle textStyle;
final Color backgroundColor;
InfoTile(
{this.message,
this.child,
this.showMessage,
this.tileAnchor,
this.childAnchor,
this.textStyle,
this.backgroundColor});
@override
Widget build(BuildContext context) {
return PortalEntry(
visible: showMessage,
portalAnchor: tileAnchor ?? Alignment.topCenter,
childAnchor: childAnchor ?? Alignment.bottomCenter,
portal: Container(
height: 25.0,
color: backgroundColor ??
StreamChatTheme.of(context).colorTheme.grey.withOpacity(0.9),
child: Center(
child: Text(
message,
style: textStyle ??
StreamChatTheme.of(context).textTheme.body.copyWith(
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
child: child,
);
}
}
lib/src/message_list_view.dart
+198 -155
View File
@@ -7,6 +7,7 @@ import 'package:jiffy/jiffy.dart';
import 'package:rxdart/rxdart.dart'; import 'package:rxdart/rxdart.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart'; import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/info_tile.dart';
import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart'; import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart';
import 'package:stream_chat_flutter/src/message_widget.dart'; import 'package:stream_chat_flutter/src/message_widget.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
@@ -125,6 +126,7 @@ class MessageListView extends StatefulWidget {
this.highlightInitialMessage = false, this.highlightInitialMessage = false,
this.messageHighlightColor, this.messageHighlightColor,
this.onShowMessage, this.onShowMessage,
this.showConnectionStateTile = false,
}) : super(key: key); }) : super(key: key);
/// Function used to build a custom message widget /// Function used to build a custom message widget
@@ -182,6 +184,8 @@ class MessageListView extends StatefulWidget {
final ShowMessageCallback onShowMessage; final ShowMessageCallback onShowMessage;
final bool showConnectionStateTile;
@override @override
_MessageListViewState createState() => _MessageListViewState(); _MessageListViewState createState() => _MessageListViewState();
} }
@@ -298,168 +302,207 @@ class _MessageListViewState extends State<MessageListView> {
} }
_messageListLength = newMessagesListLength; _messageListLength = newMessagesListLength;
final _client = StreamChat.of(context).client;
return Stack( return Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
LazyLoadScrollView( ValueListenableBuilder<ConnectionStatus>(
onStartOfPage: () async { valueListenable: _client.wsConnectionStatus,
_inBetweenList = false; builder: (context, status, _) {
if (!_upToDate) { String statusString = '';
_topPaginationActive = false; bool showStatus = true;
_bottomPaginationActive = true;
return _paginateData( switch (status) {
streamChannel, case ConnectionStatus.connected:
QueryDirection.bottom, statusString = 'Connected';
); showStatus = false;
} break;
}, case ConnectionStatus.connecting:
onEndOfPage: () async { statusString = 'Reconnecting...';
_inBetweenList = false; break;
_topPaginationActive = true; case ConnectionStatus.disconnected:
_bottomPaginationActive = false; statusString = 'Disconnected';
return _paginateData( break;
streamChannel, }
QueryDirection.top,
); return InfoTile(
}, showMessage:
onInBetweenOfPage: () { widget.showConnectionStateTile ? showStatus : false,
_inBetweenList = true; tileAnchor: Alignment.topCenter,
}, childAnchor: Alignment.topCenter,
child: ScrollablePositionedList.separated( message: statusString,
key: ValueKey(initialIndex + initialAlignment), child: LazyLoadScrollView(
itemPositionsListener: _itemPositionListener, child: LazyLoadScrollView(
addAutomaticKeepAlives: true, onStartOfPage: () async {
initialScrollIndex: initialIndex ?? 0, _inBetweenList = false;
initialAlignment: initialAlignment ?? 0, if (!_upToDate) {
physics: widget.scrollPhysics, _topPaginationActive = false;
itemScrollController: _scrollController, _bottomPaginationActive = true;
reverse: true, return _paginateData(
itemCount: streamChannel,
messages.length + 2 + (_isThreadConversation ? 1 : 0), QueryDirection.bottom,
separatorBuilder: (context, i) { );
if (i == messages.length) return Offstage(); }
if (i == 0) return SizedBox(height: 30); },
if (i == messages.length + 1) { onEndOfPage: () async {
final replyCount = widget.parentMessage.replyCount; _inBetweenList = false;
return Container( _topPaginationActive = true;
decoration: BoxDecoration( _bottomPaginationActive = false;
gradient: return _paginateData(
StreamChatTheme.of(context).colorTheme.bgGradient, streamChannel,
), QueryDirection.top,
child: Padding( );
padding: const EdgeInsets.all(8.0), },
child: Text( onInBetweenOfPage: () {
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}', _inBetweenList = true;
textAlign: TextAlign.center, },
style: StreamChatTheme.of(context) child: ScrollablePositionedList.separated(
.channelTheme key: ValueKey(initialIndex + initialAlignment),
.channelHeaderTheme itemPositionsListener: _itemPositionListener,
.lastMessageAt, addAutomaticKeepAlives: true,
initialScrollIndex: initialIndex ?? 0,
initialAlignment: initialAlignment ?? 0,
physics: widget.scrollPhysics,
itemScrollController: _scrollController,
reverse: true,
itemCount: messages.length +
2 +
(_isThreadConversation ? 1 : 0),
separatorBuilder: (context, i) {
if (i == messages.length) return Offstage();
if (i == 0) return SizedBox(height: 30);
if (i == messages.length + 1) {
final replyCount =
widget.parentMessage.replyCount;
return Container(
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
);
}
final message = messages[i];
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame(
nextMessage.createdAt.toLocal(),
Units.DAY,
)) {
final divider =
widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal(),
)
: DateDivider(
dateTime:
nextMessage.createdAt.toLocal(),
);
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 12.0),
child: divider,
);
}
final timeDiff =
Jiffy(nextMessage.createdAt.toLocal()).diff(
message.createdAt.toLocal(),
Units.MINUTE,
);
final isNextUserSame =
message.user.id == nextMessage.user?.id;
final isThread = message.replyCount > 0;
final isDeleted = message.isDeleted;
if (timeDiff >= 1 ||
!isNextUserSame ||
isThread ||
isDeleted) {
return SizedBox(height: 8);
}
return SizedBox(height: 2);
},
itemBuilder: (context, i) {
if (i == messages.length + 2) {
if (widget.parentMessageBuilder != null) {
return widget.parentMessageBuilder(
context,
widget.parentMessage,
);
} else {
return buildParentMessage(
widget.parentMessage);
}
}
if (i == messages.length + 1) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.top,
);
}
if (i == 0) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.bottom,
);
}
final message = messages[i - 1];
Widget messageWidget;
if (i == 1) {
messageWidget = _buildBottomMessage(
context,
message,
messages,
streamChannel,
);
} else if (i == messages.length - 1) {
messageWidget = _buildTopMessage(
context,
message,
messages,
streamChannel,
);
} else {
if (widget.messageBuilder != null) {
messageWidget = Builder(
key: ValueKey<String>(
'MESSAGE-${message.id}'),
builder: (context) => widget.messageBuilder(
context,
MessageDetails(
context,
message,
messages,
i,
),
messages),
);
} else {
messageWidget =
buildMessage(message, messages, i);
}
}
return messageWidget;
},
), ),
), ),
); ),
}
final message = messages[i];
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame(
nextMessage.createdAt.toLocal(),
Units.DAY,
)) {
final divider = widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal(),
)
: DateDivider(
dateTime: nextMessage.createdAt.toLocal(),
);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: divider,
);
}
final timeDiff =
Jiffy(nextMessage.createdAt.toLocal()).diff(
message.createdAt.toLocal(),
Units.MINUTE,
); );
}),
final isNextUserSame =
message.user.id == nextMessage.user?.id;
final isThread = message.replyCount > 0;
final isDeleted = message.isDeleted;
if (timeDiff >= 1 ||
!isNextUserSame ||
isThread ||
isDeleted) {
return SizedBox(height: 8);
}
return SizedBox(height: 2);
},
itemBuilder: (context, i) {
if (i == messages.length + 2) {
if (widget.parentMessageBuilder != null) {
return widget.parentMessageBuilder(
context,
widget.parentMessage,
);
} else {
return buildParentMessage(widget.parentMessage);
}
}
if (i == messages.length + 1) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.top,
);
}
if (i == 0) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.bottom,
);
}
final message = messages[i - 1];
Widget messageWidget;
if (i == 1) {
messageWidget = _buildBottomMessage(
context,
message,
messages,
streamChannel,
);
} else if (i == messages.length - 1) {
messageWidget = _buildTopMessage(
context,
message,
messages,
streamChannel,
);
} else {
if (widget.messageBuilder != null) {
messageWidget = Builder(
key: ValueKey<String>('MESSAGE-${message.id}'),
builder: (context) => widget.messageBuilder(
context,
MessageDetails(
context,
message,
messages,
i,
),
messages),
);
} else {
messageWidget = buildMessage(message, messages, i);
}
}
return messageWidget;
},
),
),
if (widget.showScrollToBottom) _buildScrollToBottom(), if (widget.showScrollToBottom) _buildScrollToBottom(),
Positioned( Positioned(
top: 20.0, top: 20.0,
lib/src/message_search_list_view.dart
+43 -33
View File
@@ -2,6 +2,7 @@ import 'dart:convert';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/info_tile.dart';
import 'package:stream_chat_flutter/src/message_search_item.dart'; import 'package:stream_chat_flutter/src/message_search_item.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
@@ -63,6 +64,7 @@ class MessageSearchListView extends StatefulWidget {
this.onItemTap, this.onItemTap,
this.showResultCount = true, this.showResultCount = true,
this.pullToRefresh = true, this.pullToRefresh = true,
this.showErrorTile = false,
}) : super(key: key); }) : super(key: key);
/// Message String to search on /// Message String to search on
@@ -111,6 +113,8 @@ class MessageSearchListView extends StatefulWidget {
/// Set it to false to disable the pull-to-refresh widget /// Set it to false to disable the pull-to-refresh widget
final bool pullToRefresh; final bool pullToRefresh;
final bool showErrorTile;
@override @override
_MessageSearchListViewState createState() => _MessageSearchListViewState(); _MessageSearchListViewState createState() => _MessageSearchListViewState();
} }
@@ -205,41 +209,47 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
message = 'Check your connection and retry'; message = 'Check your connection and retry';
} }
} }
return Center( return InfoTile(
child: Column( showMessage: widget.showErrorTile,
mainAxisAlignment: MainAxisAlignment.center, tileAnchor: Alignment.topCenter,
children: <Widget>[ childAnchor: Alignment.topCenter,
Text.rich( message: 'An error occurred.',
TextSpan( child: Center(
children: [ child: Column(
WidgetSpan( mainAxisAlignment: MainAxisAlignment.center,
child: Padding( children: <Widget>[
padding: const EdgeInsets.only(right: 2.0), Text.rich(
child: Icon(Icons.error_outline), TextSpan(
children: [
WidgetSpan(
child: Padding(
padding: const EdgeInsets.only(right: 2.0),
child: Icon(Icons.error_outline),
),
), ),
), TextSpan(text: 'Error loading messages'),
TextSpan(text: 'Error loading messages'), ],
], ),
style: Theme.of(context).textTheme.headline6,
), ),
style: Theme.of(context).textTheme.headline6, Padding(
), padding: const EdgeInsets.only(top: 16.0),
Padding( child: Text(message),
padding: const EdgeInsets.only(top: 16.0), ),
child: Text(message), RaisedButton(
), onPressed: () {
RaisedButton( messageSearchBloc.search(
onPressed: () { filter: widget.filters,
messageSearchBloc.search( sort: widget.sortOptions,
filter: widget.filters, query: widget.messageQuery,
sort: widget.sortOptions, pagination: widget.paginationParams,
query: widget.messageQuery, messageFilter: widget.messageFilters,
pagination: widget.paginationParams, );
messageFilter: widget.messageFilters, },
); child: Text('Retry'),
}, ),
child: Text('Retry'), ],
), ),
],
), ),
); );
} }
lib/src/stream_chat.dart
+19 -16
View File
@@ -3,6 +3,7 @@ import 'dart:async';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_app_badger/flutter_app_badger.dart'; import 'package:flutter_app_badger/flutter_app_badger.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
@@ -67,22 +68,24 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = _getTheme(context, widget.streamChatThemeData); final theme = _getTheme(context, widget.streamChatThemeData);
return StreamChatTheme( return Portal(
data: theme, child: StreamChatTheme(
child: Builder( data: theme,
builder: (context) { child: Builder(
final materialTheme = Theme.of(context); builder: (context) {
final streamTheme = StreamChatTheme.of(context); final materialTheme = Theme.of(context);
return Theme( final streamTheme = StreamChatTheme.of(context);
data: materialTheme.copyWith( return Theme(
primaryIconTheme: streamTheme.primaryIconTheme, data: materialTheme.copyWith(
accentColor: streamTheme.colorTheme.accentBlue, primaryIconTheme: streamTheme.primaryIconTheme,
scaffoldBackgroundColor: streamTheme.colorTheme.white, accentColor: streamTheme.colorTheme.accentBlue,
buttonTheme: streamTheme.buttonTheme, scaffoldBackgroundColor: streamTheme.colorTheme.white,
), buttonTheme: streamTheme.buttonTheme,
child: widget.child, ),
); child: widget.child,
}, );
},
),
), ),
); );
} }
lib/stream_chat_flutter.dart
+1
View File
@@ -46,3 +46,4 @@ export 'src/unread_indicator.dart';
export 'src/option_list_tile.dart'; export 'src/option_list_tile.dart';
export 'src/channel_file_display_screen.dart'; export 'src/channel_file_display_screen.dart';
export 'src/channel_media_display_screen.dart'; export 'src/channel_media_display_screen.dart';
export 'src/info_tile.dart';
pubspec.yaml
+1 -1
View File
@@ -28,7 +28,7 @@ dependencies:
file_picker: ^2.0.12 file_picker: ^2.0.12
image_picker: ^0.6.7+2 image_picker: ^0.6.7+2
flutter_keyboard_visibility: ^4.0.2 flutter_keyboard_visibility: ^4.0.2
stream_chat: ^0.2.23 stream_chat: ^0.2.23+2
mime: ^0.9.6+3 mime: ^0.9.6+3
video_compress: ^2.1.1 video_compress: ^2.1.1
visibility_detector: ^0.1.5 visibility_detector: ^0.1.5