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

Merge branch 'feature/new-ui' into feature/mono-repo

Browse Source
This commit is contained in:
Salvatore Giordano
2021-01-13 12:09:15 +01:00
parent 49c5a645c2 9cba3d6f2b
commit 62e524566e
22 changed files with 1941 additions and 1576 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/flutter_widgets/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();
},
),
],
),
],
);
},
);
}
} }
packages/flutter_widgets/example/lib/group_info_screen.dart
+13 -12
View File
@@ -137,20 +137,21 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
), ),
centerTitle: true, centerTitle: true,
actions: [ actions: [
StreamNeumorphicButton( if (!channel.channel.isDistinct)
child: InkWell( StreamNeumorphicButton(
onTap: () { child: InkWell(
_buildAddUserModal(context); onTap: () {
}, _buildAddUserModal(context);
child: Padding( },
padding: const EdgeInsets.all(8.0), child: Padding(
child: StreamSvgIcon.userAdd( padding: const EdgeInsets.all(8.0),
color: StreamChatTheme.of(context) child: StreamSvgIcon.userAdd(
.colorTheme color: StreamChatTheme.of(context)
.accentBlue), .colorTheme
.accentBlue),
),
), ),
), ),
),
], ],
), ),
body: ListView( body: ListView(
packages/flutter_widgets/example/lib/main.dart
+5 -2
View File
@@ -623,8 +623,8 @@ class _ChannelPageState extends State<ChannelPage> {
@override @override
void initState() { void initState() {
super.initState();
_focusNode = FocusNode(); _focusNode = FocusNode();
super.initState();
} }
@override @override
@@ -635,7 +635,9 @@ class _ChannelPageState extends State<ChannelPage> {
void _reply(Message message) { void _reply(Message message) {
setState(() => _quotedMessage = message); setState(() => _quotedMessage = message);
_focusNode.requestFocus(); WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
_focusNode.requestFocus();
});
} }
@override @override
@@ -752,6 +754,7 @@ class _ChannelPageState extends State<ChannelPage> {
quotedMessage: _quotedMessage, quotedMessage: _quotedMessage,
onQuotedMessageCleared: () { onQuotedMessageCleared: () {
setState(() => _quotedMessage = null); setState(() => _quotedMessage = null);
_focusNode.unfocus();
}, },
), ),
], ],
packages/flutter_widgets/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),
);
},
),
],
),
),
); );
} }
} }
packages/flutter_widgets/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, );
), }),
),
],
),
),
),
);
},
);
},
),
),
),
),
); );
} }
} }
packages/flutter_widgets/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.0+1 version: 1.1.1+2
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
packages/flutter_widgets/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,
),
],
),
),
),
), ),
), );
), },
); );
} }
packages/flutter_widgets/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();
}
},
),
); );
} }
packages/flutter_widgets/lib/src/extension.dart
+21
View File
@@ -1,7 +1,28 @@
import 'package:emojis/emoji.dart';
import 'package:characters/characters.dart';
final _emojis = Emoji.all();
extension StringExtension on String { extension StringExtension on String {
String capitalize() { String capitalize() {
return "${this[0].toUpperCase()}${this.substring(1)}"; return "${this[0].toUpperCase()}${this.substring(1)}";
} }
// Emojis guidelines
// 1 to 3 emojis: big size with no text bubble.
// 4+ emojis or emojis+text: standard size with text bubble.
bool get isOnlyEmoji {
final characters = this.trim().characters;
if (characters.isEmpty) return false;
if (characters.length > 3) return false;
return characters.every((c) {
return _emojis.firstWhere(
(Emoji emoji) => emoji.char.contains(c),
orElse: () => null,
) !=
null;
});
}
} }
/// List extension /// List extension
packages/flutter_widgets/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,
);
}
}
packages/flutter_widgets/lib/src/message_actions_modal.dart
+138 -149
View File
@@ -84,155 +84,146 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
? 1 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return GestureDetector( return TweenAnimationBuilder<double>(
behavior: HitTestBehavior.translucent, tween: Tween(begin: 0.0, end: 1.0),
onTap: () => Navigator.maybePop(context), duration: Duration(milliseconds: 300),
child: Stack( curve: Curves.easeInOutBack,
children: [ builder: (context, val, snapshot) {
Positioned.fill( return GestureDetector(
child: BackdropFilter( behavior: HitTestBehavior.translucent,
filter: ImageFilter.blur( onTap: () => Navigator.maybePop(context),
sigmaX: 10, child: Stack(
sigmaY: 10, children: [
), Positioned.fill(
child: Container( child: BackdropFilter(
color: StreamChatTheme.of(context).colorTheme.overlay, filter: ImageFilter.blur(
), sigmaX: 10,
), sigmaY: 10,
), ),
Center( child: Container(
child: SingleChildScrollView( color: StreamChatTheme.of(context).colorTheme.overlay,
child: Padding( ),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(widget.message.status == MessageSendingStatus.SENT ||
widget.message.status == null))
Align(
alignment: Alignment(
user.id == widget.message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: widget.message,
messageTheme: widget.messageTheme,
),
),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: widget.reverse,
message: widget.message.copyWith(
text: widget.message.text.length > 200
? '${widget.message.text.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showThreadReplyIndicator: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showReactionPickerIndicator:
widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null),
showInChannelIndicator: false,
showSendingIndicator: false,
shape: widget.messageShape,
),
),
);
}),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
builder: (context, val, wid) {
return Transform(
transform: Matrix4.identity()
..scale(val)
..rotateZ(-1.0 + val),
alignment: widget.reverse
? Alignment.topRight
: Alignment.topLeft,
child: Padding(
padding: EdgeInsets.only(
right: widget.reverse ? 16 : 0,
left: widget.reverse ? 0 : 48,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Material(
color: StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
context: context,
tiles: [
if (widget.showReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.parentId == null)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage)
_buildEditMessage(context),
if (widget.showCopyMessage)
_buildCopyButton(context),
if (widget.showFlagButton)
_buildFlagButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
],
).toList(),
),
),
),
),
);
})
],
), ),
), ),
), Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null))
Align(
alignment: Alignment(
user.id == widget.message.user.id
? (divFactor > 1.0
? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: widget.message,
messageTheme: widget.messageTheme,
),
),
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: widget.reverse,
message: widget.message.copyWith(
text: widget.message.text.length > 200
? '${widget.message.text.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showThreadReplyIndicator: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showReactionPickerIndicator:
widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null),
showInChannelIndicator: false,
showSendingIndicator: false,
shape: widget.messageShape,
),
),
Padding(
padding: EdgeInsets.only(
right: widget.reverse ? 8 : 0,
left: widget.reverse ? 0 : 48,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Material(
color: StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
context: context,
tiles: [
if (widget.showReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null) &&
widget.message.parentId == null)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage)
_buildEditMessage(context),
if (widget.showCopyMessage)
_buildCopyButton(context),
if (widget.showFlagButton)
_buildFlagButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
],
).toList(),
),
),
),
),
],
),
),
),
),
),
],
), ),
], );
), },
); );
} }
@@ -457,9 +448,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
), ),
], ],
), ),
onTap: () { onTap: () => _showFlagDialog(),
_showFlagDialog();
},
); );
} }
packages/flutter_widgets/lib/src/message_input.dart
+283 -294
View File
@@ -203,6 +203,8 @@ class MessageInputState extends State<MessageInput> {
bool _openFilePickerSection = false; bool _openFilePickerSection = false;
int _filePickerIndex = 0; int _filePickerIndex = 0;
double _filePickerSize = _kMinMediaPickerSize; double _filePickerSize = _kMinMediaPickerSize;
KeyboardVisibilityController _keyboardVisibilityController =
KeyboardVisibilityController();
/// The editing controller passed to the input TextField /// The editing controller passed to the input TextField
TextEditingController textEditingController; TextEditingController textEditingController;
@@ -358,31 +360,31 @@ class MessageInputState extends State<MessageInput> {
); );
} }
AnimatedCrossFade _animateSendButton(BuildContext context) { Widget _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return Padding(
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) && padding: const EdgeInsets.all(8.0),
_attachments.every((a) => a.uploaded == true)) child: AnimatedCrossFade(
? CrossFadeState.showFirst crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
: CrossFadeState.showSecond, _attachments.every((a) => a.uploaded == true))
firstChild: _buildSendButton(context), ? CrossFadeState.showFirst
secondChild: _buildIdleSendButton(context), : CrossFadeState.showSecond,
duration: Duration(milliseconds: 300), firstChild: _buildSendButton(context),
alignment: Alignment.center, secondChild: _buildIdleSendButton(context),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
),
); );
} }
Widget _buildExpandActionsButton() { Widget _buildExpandActionsButton() {
return AnimatedCrossFade( return Padding(
crossFadeState: padding: const EdgeInsets.all(8.0),
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond, child: AnimatedCrossFade(
firstChild: Padding( crossFadeState: _actionsShrunk
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), ? CrossFadeState.showFirst
child: IconButton( : CrossFadeState.showSecond,
onPressed: () { firstChild: IconButton(
setState(() { onPressed: () => setState(() => _actionsShrunk = false),
_actionsShrunk = false;
});
},
icon: StreamSvgIcon.emptyCircleLeft( icon: StreamSvgIcon.emptyCircleLeft(
color: StreamChatTheme.of(context).colorTheme.accentBlue, color: StreamChatTheme.of(context).colorTheme.accentBlue,
), ),
@@ -393,34 +395,36 @@ class MessageInputState extends State<MessageInput> {
), ),
splashRadius: 24, splashRadius: 24,
), ),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context)
.channel
?.config
?.commands
?.isNotEmpty ==
true)
_buildCommandButton(),
].insertBetween(const SizedBox(width: 8)),
),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
), ),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
true)
_buildCommandButton(),
],
),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
); );
} }
Expanded _buildTextInput(BuildContext context) { Expanded _buildTextInput(BuildContext context) {
final theme = StreamChatTheme.of(context);
return Expanded( return Expanded(
child: Center( child: Center(
child: Container( child: Container(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0), borderRadius: BorderRadius.circular(20.0),
border: Border.all( border: Border.all(color: theme.colorTheme.greyGainsboro),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
),
), ),
padding: _attachments.isEmpty ? null : EdgeInsets.all(6.0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -429,52 +433,48 @@ class MessageInputState extends State<MessageInput> {
_buildAttachments(), _buildAttachments(),
LimitedBox( LimitedBox(
maxHeight: widget.maxHeight, maxHeight: widget.maxHeight,
child: TextField( child: SizedBox(
key: Key('messageInputText'), height: 40,
enabled: _inputEnabled, child: TextField(
minLines: null, key: Key('messageInputText'),
maxLines: null, enabled: _inputEnabled,
onSubmitted: (_) { minLines: null,
sendMessage(); maxLines: null,
}, onSubmitted: (_) => sendMessage(),
keyboardType: widget.keyboardType, keyboardType: widget.keyboardType,
controller: textEditingController, controller: textEditingController,
focusNode: _focusNode, focusNode: _focusNode,
style: Theme.of(context).textTheme.bodyText2, style: theme.textTheme.body,
autofocus: false, autofocus: false,
textAlignVertical: TextAlignVertical.center, textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
hintText: _getHint(), hintText: _getHint(),
prefixText: _commandEnabled ? null : ' ', hintStyle: theme.textTheme.body.copyWith(
border: OutlineInputBorder( color: theme.colorTheme.grey,
borderSide: BorderSide(color: Colors.transparent)), ),
focusedBorder: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
errorBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
disabledBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
contentPadding: EdgeInsets.symmetric( disabledBorder: OutlineInputBorder(
horizontal: 16, borderSide: BorderSide(color: Colors.transparent)),
vertical: 13, contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
), prefixIcon: _commandEnabled
prefixIcon: _commandEnabled ? Container(
? Padding( decoration: BoxDecoration(
padding: borderRadius: BorderRadius.circular(12),
const EdgeInsets.symmetric(horizontal: 8.0), color: theme.colorTheme.accentBlue,
child: Chip( ),
backgroundColor: StreamChatTheme.of(context) height: 24,
.colorTheme margin: const EdgeInsets.all(8.0),
.accentBlue, padding: const EdgeInsets.only(right: 8, left: 4),
padding: EdgeInsets.zero, child: Row(
labelPadding:
EdgeInsets.symmetric(horizontal: 8.0),
label: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
StreamSvgIcon.lightning( StreamSvgIcon.lightning(
color: Colors.white, color: Colors.white,
@@ -484,27 +484,32 @@ class MessageInputState extends State<MessageInput> {
_chosenCommand?.name?.toUpperCase() ?? '', _chosenCommand?.name?.toUpperCase() ?? '',
style: StreamChatTheme.of(context) style: StreamChatTheme.of(context)
.textTheme .textTheme
.footnote .footnoteBold
.copyWith( .copyWith(
color: Colors.white, color: Colors.white,
), ),
), ),
], ],
), ),
), )
) : null,
: null, suffixIcon: _commandEnabled
suffixIcon: _commandEnabled ? IconButton(
? IconButton( icon: StreamSvgIcon.close_small(),
icon: StreamSvgIcon.close_small(), splashRadius: 24,
splashRadius: 24, padding: const EdgeInsets.all(0),
onPressed: () { constraints: BoxConstraints.tightFor(
setState(() => _commandEnabled = false); height: 24,
}, width: 24,
) ),
: null, onPressed: () {
setState(() => _commandEnabled = false);
},
)
: null,
),
textCapitalization: TextCapitalization.sentences,
), ),
textCapitalization: TextCapitalization.sentences,
), ),
) )
], ],
@@ -1515,128 +1520,124 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildReplyToMessage() { Widget _buildReplyToMessage() {
if (!_hasQuotedMessage) { if (!_hasQuotedMessage) return Offstage();
return Offstage();
}
final containsUrl = widget.quotedMessage.attachments final containsUrl = widget.quotedMessage.attachments
?.any((element) => element.ogScrapeUrl != null) == ?.any((element) => element.ogScrapeUrl != null) ==
true; true;
return Transform( return Transform(
transform: Matrix4.rotationY(pi), transform: Matrix4.rotationY(pi),
alignment: Alignment.center, alignment: Alignment.center,
child: QuotedMessageWidget( child: Padding(
reverse: true, padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
showBorder: !containsUrl, child: QuotedMessageWidget(
message: widget.quotedMessage, reverse: true,
messageTheme: StreamChatTheme.of(context).otherMessageTheme, showBorder: !containsUrl,
message: widget.quotedMessage,
messageTheme: StreamChatTheme.of(context).otherMessageTheme,
),
), ),
); );
} }
Widget _buildAttachments() { Widget _buildAttachments() {
return _attachments.isEmpty if (_attachments.isEmpty) return Offstage();
? Container() return Column(
: Column( children: [
children: [ if (_attachments.any((e) => e.attachment?.type == 'file'))
if (_attachments.any((e) => e.attachment?.type == 'file')) LimitedBox(
LimitedBox( maxHeight: 136.0,
maxHeight: 136.0, child: ListView(
child: ListView( reverse: true,
reverse: true, shrinkWrap: true,
shrinkWrap: true, children: _attachments.reversed
children: _attachments.reversed .where((e) => e.attachment?.type == 'file')
.where((e) => e.attachment?.type == 'file') .map(
.map( (e) => Padding(
(e) => Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0),
padding: child: ClipRRect(
const EdgeInsets.symmetric(horizontal: 8.0), borderRadius: BorderRadius.circular(10),
child: ClipRRect( clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(10), child: FileAttachment(
clipBehavior: Clip.antiAlias, attachment: e.attachment,
child: FileAttachment( attachmentType: FileAttachmentType.local,
attachment: e.attachment, file: e.file,
attachmentType: FileAttachmentType.local, size: Size(
file: e.file, MediaQuery.of(context).size.width * 0.65,
size: Size( 56.0,
MediaQuery.of(context).size.width * 0.65, ),
56.0, trailing: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: CircleAvatar(
backgroundColor: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.6),
maxRadius: 12.0,
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.white,
), ),
trailing: Padding( ),
padding: const EdgeInsets.all(8.0), onTap: () {
child: InkWell( setState(() {
child: CircleAvatar( _attachments.remove(e);
backgroundColor: });
StreamChatTheme.of(context) },
.colorTheme ),
.black ),
.withOpacity(0.6), ),
maxRadius: 12.0, ),
child: StreamSvgIcon.close( ),
color: StreamChatTheme.of(context) )
.colorTheme .toList(),
.white, ),
),
if (_attachments.any((e) => e.attachment?.type != 'file'))
LimitedBox(
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
), ),
), ),
onTap: () {
setState(() {
_attachments.remove(e);
});
},
), ),
), ],
), ),
), ),
), ),
) )
.toList(), .toList(),
), ),
), ),
if (_attachments.any((e) => e.attachment?.type != 'file')) ],
LimitedBox( );
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding:
const EdgeInsets.all(16.0),
child:
CircularProgressIndicator(),
),
),
),
],
),
),
),
)
.toList(),
),
),
],
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -1746,80 +1747,74 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildCommandButton() { Widget _buildCommandButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.lightning(
child: IconButton( color: _commandsOverlay != null
icon: StreamSvgIcon.lightning( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _commandsOverlay != null : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
); );
} }
Widget _buildAttachmentButton() { Widget _buildAttachmentButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.attach(
child: IconButton( color: _openFilePickerSection
icon: StreamSvgIcon.attach( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _openFilePickerSection : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
); );
} }
@@ -2118,31 +2113,24 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildIdleSendButton(BuildContext context) { Widget _buildIdleSendButton(BuildContext context) {
return Padding( return StreamSvgIcon(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), assetName: _getIdleSendIcon(),
child: StreamSvgIcon( color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
assetName: _getIdleSendIcon(),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
),
); );
} }
Widget _buildSendButton(BuildContext context) { Widget _buildSendButton(BuildContext context) {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), onPressed: sendMessage,
child: IconButton( padding: const EdgeInsets.all(0),
onPressed: sendMessage, splashRadius: 24,
visualDensity: VisualDensity.compact, constraints: BoxConstraints.tightFor(
padding: const EdgeInsets.all(0), height: 24,
splashRadius: 24, width: 24,
constraints: BoxConstraints.tightFor( ),
height: 24, icon: StreamSvgIcon(
width: 24, assetName: _getSendIcon(),
), color: StreamChatTheme.of(context).colorTheme.accentBlue,
icon: StreamSvgIcon(
assetName: _getSendIcon(),
color: StreamChatTheme.of(context).colorTheme.accentBlue,
),
), ),
); );
} }
@@ -2263,7 +2251,8 @@ class MessageInputState extends State<MessageInput> {
_emojiNames = Emoji.all().map((e) => e.name); _emojiNames = Emoji.all().map((e) => e.name);
if (!kIsWeb) { if (!kIsWeb) {
_keyboardListener = KeyboardVisibility.onChange.listen((visible) { _keyboardListener =
_keyboardVisibilityController.onChange.listen((visible) {
if (_focusNode.hasFocus) { if (_focusNode.hasFocus) {
_onChanged(context, textEditingController.text); _onChanged(context, textEditingController.text);
} }
packages/flutter_widgets/lib/src/message_list_view.dart
+256 -201
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';
@@ -17,6 +18,7 @@ import '../stream_chat_flutter.dart';
import 'date_divider.dart'; import 'date_divider.dart';
import 'stream_channel.dart'; import 'stream_channel.dart';
import 'swipeable.dart'; import 'swipeable.dart';
import 'extension.dart';
typedef MessageBuilder = Widget Function( typedef MessageBuilder = Widget Function(
BuildContext, BuildContext,
@@ -124,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
@@ -181,6 +184,8 @@ class MessageListView extends StatefulWidget {
final ShowMessageCallback onShowMessage; final ShowMessageCallback onShowMessage;
final bool showConnectionStateTile;
@override @override
_MessageListViewState createState() => _MessageListViewState(); _MessageListViewState createState() => _MessageListViewState();
} }
@@ -297,172 +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 == messages.length + 2) return Offstage(); },
if (i == messages.length + 1) return Offstage(); onEndOfPage: () async {
if (i == 0) return SizedBox(height: 30); _inBetweenList = false;
final message = messages[i]; _topPaginationActive = true;
final nextMessage = messages[i - 1]; _bottomPaginationActive = false;
if (!Jiffy(message.createdAt.toLocal()).isSame( return _paginateData(
nextMessage.createdAt.toLocal(), streamChannel,
Units.DAY, QueryDirection.top,
)) {
final divider = widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal(),
)
: DateDivider(
dateTime: nextMessage.createdAt.toLocal(),
); );
return Padding( },
padding: const EdgeInsets.symmetric(vertical: 12.0), onInBetweenOfPage: () {
child: divider, _inBetweenList = true;
); },
} child: ScrollablePositionedList.separated(
final timeDiff = key: ValueKey(initialIndex + initialAlignment),
Jiffy(nextMessage.createdAt.toLocal()).diff( itemPositionsListener: _itemPositionListener,
message.createdAt.toLocal(), addAutomaticKeepAlives: true,
Units.MINUTE, 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 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 Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildParentMessage(widget.parentMessage),
Container(
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
),
],
);
}
}
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,
@@ -602,37 +642,38 @@ class _MessageListViewState extends State<MessageListView> {
? streamChannel.queryTopMessages ? streamChannel.queryTopMessages
: streamChannel.queryBottomMessages; : streamChannel.queryBottomMessages;
return StreamBuilder<bool>( return StreamBuilder<bool>(
key: Key('LOADING-INDICATOR'), key: Key('LOADING-INDICATOR'),
stream: stream, stream: stream,
initialData: false, initialData: false,
builder: (context, snapshot) { builder: (context, snapshot) {
if (snapshot.hasError) { if (snapshot.hasError) {
return Container( return Container(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
.accentRed .accentRed
.withOpacity(.2), .withOpacity(.2),
child: Center( child: Center(
child: Text('Error loading messages'), child: Text('Error loading messages'),
),
);
}
if (!snapshot.data) {
if (direction == QueryDirection.top) {
return Container(
height: 52,
width: double.infinity,
);
}
return Offstage();
}
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: const CircularProgressIndicator(),
), ),
); );
}); }
if (!snapshot.data) {
if (!_isThreadConversation && direction == QueryDirection.top) {
return Container(
height: 52,
width: double.infinity,
);
}
return Offstage();
}
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: const CircularProgressIndicator(),
),
);
},
);
} }
Widget _buildTopMessage( Widget _buildTopMessage(
@@ -711,6 +752,7 @@ class _MessageListViewState extends State<MessageListView> {
Message message, Message message,
) { ) {
final isMyMessage = message.user.id == StreamChat.of(context).user.id; final isMyMessage = message.user.id == StreamChat.of(context).user.id;
final isOnlyEmoji = message.text.isOnlyEmoji;
return MessageWidget( return MessageWidget(
showThreadReplyIndicator: false, showThreadReplyIndicator: false,
@@ -724,12 +766,7 @@ class _MessageListViewState extends State<MessageListView> {
message: message, message: message,
reverse: isMyMessage, reverse: isMyMessage,
showUsername: !isMyMessage, showUsername: !isMyMessage,
padding: EdgeInsets.only( padding: const EdgeInsets.all(8.0),
top: 8.0,
left: 8.0,
right: 8.0,
bottom: 16.0,
),
showSendingIndicator: false, showSendingIndicator: false,
onThreadTap: _onThreadTap, onThreadTap: _onThreadTap,
borderRadiusGeometry: BorderRadius.only( borderRadiusGeometry: BorderRadius.only(
@@ -738,7 +775,7 @@ class _MessageListViewState extends State<MessageListView> {
topRight: Radius.circular(16), topRight: Radius.circular(16),
bottomRight: Radius.circular(16), bottomRight: Radius.circular(16),
), ),
borderSide: isMyMessage ? BorderSide.none : null, borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show, showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
messageTheme: isMyMessage messageTheme: isMyMessage
? StreamChatTheme.of(context).ownMessageTheme ? StreamChatTheme.of(context).ownMessageTheme
@@ -813,8 +850,19 @@ class _MessageListViewState extends State<MessageListView> {
final showSendingIndicator = final showSendingIndicator =
isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame); isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame);
bool showInChannelIndicator = !_isThreadConversation && isThreadMessage; final showInChannelIndicator = !_isThreadConversation && isThreadMessage;
bool showThreadReplyIndicator = !_isThreadConversation && hasReplies; final showThreadReplyIndicator = !_isThreadConversation && hasReplies;
final isOnlyEmoji = message.text.isOnlyEmoji;
final showMessageBorder =
showThreadReplyIndicator || showInChannelIndicator;
final borderSide = isMyMessage
? !showMessageBorder
? BorderSide.none
: null
: isOnlyEmoji && !showMessageBorder
? BorderSide.none
: null;
Widget child = MessageWidget( Widget child = MessageWidget(
key: ValueKey<String>('MESSAGE-${message.id}'), key: ValueKey<String>('MESSAGE-${message.id}'),
@@ -852,20 +900,27 @@ class _MessageListViewState extends State<MessageListView> {
showDeleteMessage: isMyMessage, showDeleteMessage: isMyMessage,
showThreadReplyMessage: !isThreadMessage, showThreadReplyMessage: !isThreadMessage,
showFlagButton: !isMyMessage, showFlagButton: !isMyMessage,
borderSide: isMyMessage ? BorderSide.none : null, borderSide: borderSide,
onThreadTap: _onThreadTap, onThreadTap: _onThreadTap,
onReplyTap: widget.onReplyTap, onReplyTap: widget.onReplyTap,
attachmentBorderRadiusGeometry: BorderRadius.only( attachmentBorderRadiusGeometry: BorderRadius.only(
topLeft: Radius.circular(attachmentBorderRadius), topLeft: Radius.circular(attachmentBorderRadius),
bottomLeft: Radius.circular( bottomLeft: Radius.circular(
timeDiff >= 1 || !isNextUserSame ? 0 : attachmentBorderRadius), (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
? 0
: attachmentBorderRadius,
),
topRight: Radius.circular(attachmentBorderRadius), topRight: Radius.circular(attachmentBorderRadius),
bottomRight: Radius.circular(attachmentBorderRadius), bottomRight: Radius.circular(attachmentBorderRadius),
), ),
attachmentPadding: const EdgeInsets.all(2), attachmentPadding: const EdgeInsets.all(2),
borderRadiusGeometry: BorderRadius.only( borderRadiusGeometry: BorderRadius.only(
topLeft: Radius.circular(16), topLeft: Radius.circular(16),
bottomLeft: Radius.circular(timeDiff >= 1 || !isNextUserSame ? 0 : 16), bottomLeft: Radius.circular(
(timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
? 0
: 16,
),
topRight: Radius.circular(16), topRight: Radius.circular(16),
bottomRight: Radius.circular(16), bottomRight: Radius.circular(16),
), ),
packages/flutter_widgets/lib/src/message_reactions_modal.dart
+130 -135
View File
@@ -56,86 +56,92 @@ class MessageReactionsModal extends StatelessWidget {
? 1 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return GestureDetector( return TweenAnimationBuilder<double>(
behavior: HitTestBehavior.translucent, tween: Tween(begin: 0.0, end: 1.0),
onTap: () => Navigator.maybePop(context), duration: Duration(milliseconds: 300),
child: Stack( curve: Curves.easeInOutBack,
children: [ builder: (context, val, snapshot) {
Positioned.fill( return GestureDetector(
child: BackdropFilter( behavior: HitTestBehavior.translucent,
filter: ImageFilter.blur( onTap: () => Navigator.maybePop(context),
sigmaX: 10, child: Stack(
sigmaY: 10, children: [
), Positioned.fill(
child: Container( child: BackdropFilter(
color: StreamChatTheme.of(context).colorTheme.overlay, filter: ImageFilter.blur(
), sigmaX: 10,
), sigmaY: 10,
), ),
Center( child: Container(
child: SingleChildScrollView( color: StreamChatTheme.of(context).colorTheme.overlay,
child: Padding( ),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.SENT ||
message.status == null))
Align(
alignment: Alignment(
user.id == message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: message,
messageTheme: messageTheme,
),
),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showThreadReplyIndicator: false,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
showInChannelIndicator: false,
showReactionPickerIndicator: showReactions &&
(message.status ==
MessageSendingStatus.SENT ||
message.status == null),
),
),
);
}),
if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context),
],
), ),
), ),
), Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.SENT ||
message.status == null))
Align(
alignment: Alignment(
user.id == message.user.id
? (divFactor > 1.0
? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: message,
messageTheme: messageTheme,
),
),
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showThreadReplyIndicator: false,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
showInChannelIndicator: false,
showReactionPickerIndicator: showReactions &&
(message.status ==
MessageSendingStatus.SENT ||
message.status == null),
),
),
if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context),
],
),
),
),
),
),
],
), ),
], );
), },
); );
} }
@@ -191,64 +197,53 @@ class MessageReactionsModal extends StatelessWidget {
BuildContext context, BuildContext context,
) { ) {
final isCurrentUser = reaction.user.id == currentUser.id; final isCurrentUser = reaction.user.id == currentUser.id;
return TweenAnimationBuilder<double>( return ConstrainedBox(
tween: Tween(begin: 0.0, end: 1.0), constraints: BoxConstraints.loose(Size(
duration: Duration(milliseconds: 300), 64,
curve: Curves.easeInOut, 98,
builder: (context, val, snapshot) { )),
return Transform.scale( child: Column(
scale: val, mainAxisSize: MainAxisSize.min,
child: ConstrainedBox( mainAxisAlignment: MainAxisAlignment.start,
constraints: BoxConstraints.loose(Size( crossAxisAlignment: CrossAxisAlignment.center,
64, children: [
98, Stack(
)), children: [
child: Column( UserAvatar(
mainAxisSize: MainAxisSize.min, onTap: onUserAvatarTap,
mainAxisAlignment: MainAxisAlignment.start, user: reaction.user,
crossAxisAlignment: CrossAxisAlignment.center, constraints: BoxConstraints.tightFor(
children: [ height: 64,
Stack( width: 64,
children: [ ),
UserAvatar( borderRadius: BorderRadius.circular(32),
onTap: onUserAvatarTap,
user: reaction.user,
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
borderRadius: BorderRadius.circular(32),
),
Positioned(
child: Align(
alignment: reverse
? Alignment.centerRight
: Alignment.centerLeft,
child: ReactionBubble(
reactions: [reaction],
flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor,
backgroundColor:
messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
bottom: 6,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
const SizedBox(height: 8),
Text(
reaction.user.name,
style: StreamChatTheme.of(context).textTheme.footnoteBold,
textAlign: TextAlign.center,
),
],
), ),
), Positioned(
); child: Align(
}); alignment:
reverse ? Alignment.centerRight : Alignment.centerLeft,
child: ReactionBubble(
reactions: [reaction],
flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor,
backgroundColor: messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
bottom: 6,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
const SizedBox(height: 8),
Text(
reaction.user.name,
style: StreamChatTheme.of(context).textTheme.footnoteBold,
textAlign: TextAlign.center,
),
],
),
);
} }
} }
packages/flutter_widgets/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'), ],
), ),
],
), ),
); );
} }
packages/flutter_widgets/lib/src/message_widget.dart
+29 -17
View File
@@ -272,6 +272,12 @@ class _MessageWidgetState extends State<MessageWidget> {
widget.message.attachments?.any((element) => element.type == 'giphy') == widget.message.attachments?.any((element) => element.type == 'giphy') ==
true; true;
bool get hasNonUrlAttachments =>
widget.message.attachments
?.where((it) => it.ogScrapeUrl == null)
?.isNotEmpty ==
true;
bool get showBottomRow => bool get showBottomRow =>
showThreadReplyIndicator || showThreadReplyIndicator ||
showUsername || showUsername ||
@@ -385,11 +391,8 @@ class _MessageWidgetState extends State<MessageWidget> {
), ),
shape: widget.shape ?? shape: widget.shape ??
RoundedRectangleBorder( RoundedRectangleBorder(
side: isOnlyEmoji && side:
!(showThreadReplyIndicator || widget.borderSide ??
showInChannel)
? BorderSide.none
: widget.borderSide ??
BorderSide( BorderSide(
color: widget color: widget
.messageTheme .messageTheme
@@ -412,8 +415,9 @@ class _MessageWidgetState extends State<MessageWidget> {
children: <Widget>[ children: <Widget>[
if (hasQuotedMessage) if (hasQuotedMessage)
_buildQuotedMessage(), _buildQuotedMessage(),
..._parseAttachments( if (hasNonUrlAttachments)
context), ..._parseAttachments(
context),
if (widget.message.text if (widget.message.text
.trim() .trim()
.isNotEmpty && .isNotEmpty &&
@@ -428,7 +432,7 @@ class _MessageWidgetState extends State<MessageWidget> {
if (widget.showReactionPickerIndicator) if (widget.showReactionPickerIndicator)
Positioned( Positioned(
right: 0, right: 0,
top: -6, top: -8,
child: Transform( child: Transform(
transform: Matrix4.rotationY( transform: Matrix4.rotationY(
widget.reverse ? pi : 0), widget.reverse ? pi : 0),
@@ -490,13 +494,21 @@ class _MessageWidgetState extends State<MessageWidget> {
widget.onQuotedMessageTap != null widget.onQuotedMessageTap != null
? () => widget.onQuotedMessageTap(widget.message.quotedMessageId) ? () => widget.onQuotedMessageTap(widget.message.quotedMessageId)
: null; : null;
return QuotedMessageWidget( return Padding(
onTap: onTap, padding: EdgeInsets.only(
message: widget.message.quotedMessage, right: 8,
messageTheme: isMyMessage left: 8,
? StreamChatTheme.of(context).otherMessageTheme top: 8,
: StreamChatTheme.of(context).ownMessageTheme, bottom: hasNonUrlAttachments ? 8 : 0,
reverse: widget.reverse, ),
child: QuotedMessageWidget(
onTap: onTap,
message: widget.message.quotedMessage,
messageTheme: isMyMessage
? StreamChatTheme.of(context).otherMessageTheme
: StreamChatTheme.of(context).ownMessageTheme,
reverse: widget.reverse,
),
); );
} }
@@ -927,7 +939,7 @@ class _MessageWidgetState extends State<MessageWidget> {
? widget.messageTheme.copyWith( ? widget.messageTheme.copyWith(
messageText: messageText:
widget.messageTheme.messageText.copyWith( widget.messageTheme.messageText.copyWith(
fontSize: 40, fontSize: 42,
)) ))
: widget.messageTheme, : widget.messageTheme,
), ),
@@ -942,7 +954,7 @@ class _MessageWidgetState extends State<MessageWidget> {
); );
} }
bool get isOnlyEmoji => textIsOnlyEmoji(widget.message.text); bool get isOnlyEmoji => widget.message.text.isOnlyEmoji;
Color _getBackgroundColor() { Color _getBackgroundColor() {
if (hasQuotedMessage) { if (hasQuotedMessage) {
packages/flutter_widgets/lib/src/quoted_message_widget.dart
+21 -26
View File
@@ -109,23 +109,20 @@ class QuotedMessageWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
child: Padding( child: Row(
padding: const EdgeInsets.only(top: 8, right: 4, left: 8), crossAxisAlignment: CrossAxisAlignment.end,
child: Row( mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end, children: [
mainAxisSize: MainAxisSize.min, Flexible(child: _buildMessage(context)),
children: [ SizedBox(width: 8),
Flexible(child: _buildMessage(context)), _buildUserAvatar(),
SizedBox(width: 4), ],
_buildUserAvatar(),
],
),
), ),
); );
} }
Widget _buildMessage(BuildContext context) { Widget _buildMessage(BuildContext context) {
final isOnlyEmoji = textIsOnlyEmoji(message.text); final isOnlyEmoji = message.text.isOnlyEmoji;
var msg = _hasAttachments && !_containsText var msg = _hasAttachments && !_containsText
? message.copyWith(text: message.attachments.last?.title ?? '') ? message.copyWith(text: message.attachments.last?.title ?? '')
: message; : message;
@@ -145,9 +142,12 @@ class QuotedMessageWidget extends StatelessWidget {
messageTheme: isOnlyEmoji && _containsText messageTheme: isOnlyEmoji && _containsText
? messageTheme.copyWith( ? messageTheme.copyWith(
messageText: messageTheme.messageText.copyWith( messageText: messageTheme.messageText.copyWith(
fontSize: 24, fontSize: 32,
)) ))
: messageTheme, : messageTheme.copyWith(
messageText: messageTheme.messageText.copyWith(
fontSize: 12,
)),
), ),
), ),
), ),
@@ -235,9 +235,7 @@ class QuotedMessageWidget extends StatelessWidget {
ShapeBorder _getDefaultShape(BuildContext context) { ShapeBorder _getDefaultShape(BuildContext context) {
return RoundedRectangleBorder( return RoundedRectangleBorder(
side: BorderSide( side: BorderSide(width: 0.0, color: Colors.transparent),
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
); );
} }
@@ -246,16 +244,13 @@ class QuotedMessageWidget extends StatelessWidget {
return Transform( return Transform(
transform: Matrix4.rotationY(reverse ? pi : 0), transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center, alignment: Alignment.center,
child: Padding( child: UserAvatar(
padding: const EdgeInsets.symmetric(horizontal: 4.0), user: message.user,
child: UserAvatar( constraints: BoxConstraints.tightFor(
user: message.user, height: 24,
constraints: BoxConstraints.tightFor( width: 24,
height: 24,
width: 24,
),
showOnlineStatus: false,
), ),
showOnlineStatus: false,
), ),
); );
} }
packages/flutter_widgets/lib/src/reaction_picker.dart
+82 -57
View File
@@ -1,8 +1,11 @@
import 'dart:math';
import 'package:ezanimation/ezanimation.dart'; import 'package:ezanimation/ezanimation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
import 'extension.dart';
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png)
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker_paint.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker_paint.png)
@@ -36,13 +39,10 @@ class _ReactionPickerState extends State<ReactionPicker>
if (animations.isEmpty && reactionIcons.isNotEmpty) { if (animations.isEmpty && reactionIcons.isNotEmpty) {
reactionIcons.forEach((element) { reactionIcons.forEach((element) {
animations.add( animations.add(
EzAnimation.sequence( EzAnimation.tween(
[ Tween(begin: 0.0, end: 1.0),
SequenceItem(0.0, 1.4),
SequenceItem(1.4, 1.0),
],
Duration(milliseconds: 500), Duration(milliseconds: 500),
vsync: this, curve: Curves.easeInOutBack,
), ),
); );
}); });
@@ -52,70 +52,95 @@ class _ReactionPickerState extends State<ReactionPicker>
return TweenAnimationBuilder<double>( return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0), tween: Tween(begin: 0.0, end: 1.0),
curve: Curves.easeInOutExpo, curve: Curves.easeInOutBack,
duration: Duration(milliseconds: 500), duration: Duration(milliseconds: 500),
builder: (context, val, wid) { builder: (context, val, wid) {
return Transform.scale( return Transform.scale(
scale: val, scale: val,
child: Material( child: Material(
borderRadius: BorderRadius.circular(24),
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.white,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: reactionIcons.map((reactionIcon) { children: reactionIcons
final ownReactionIndex = widget.message.ownReactions .map<Widget>((reactionIcon) {
?.indexWhere((reaction) => final ownReactionIndex = widget.message.ownReactions
reaction.type == reactionIcon.type) ?? ?.indexWhere((reaction) =>
-1; reaction.type == reactionIcon.type) ??
var index = reactionIcons.indexOf(reactionIcon); -1;
var index = reactionIcons.indexOf(reactionIcon);
return IconButton( return ConstrainedBox(
iconSize: 24, constraints: BoxConstraints.tightFor(
icon: AnimatedBuilder( height: 24,
animation: animations[index], width: 24,
builder: (context, val) { ),
return Transform( child: RawMaterialButton(
transform: Matrix4.identity() elevation: 0,
..scale(animations[index].value, padding: const EdgeInsets.all(0),
animations[index].value) clipBehavior: Clip.none,
..rotateZ(1.0 - animations[index].value), shape: ContinuousRectangleBorder(
child: StreamSvgIcon( borderRadius: BorderRadius.circular(16),
assetName: reactionIcon.assetName, ),
height: animations[index].value * 24.0, constraints: BoxConstraints.tightFor(
width: animations[index].value * 24.0, height: 24,
color: ownReactionIndex != -1 width: 24,
? StreamChatTheme.of(context) ),
.colorTheme child: AnimatedBuilder(
.accentBlue animation: animations[index],
: Theme.of(context) builder: (context, val) {
.iconTheme return Transform.scale(
.color alignment: Alignment.center,
.withOpacity(.5), scale: animations[index].value,
), child: StreamSvgIcon(
); assetName: reactionIcon.assetName,
}), height: max(
onPressed: () { 0,
if (ownReactionIndex != -1) { animations[index].value * 24.0,
removeReaction( ),
context, width: max(
widget.message.ownReactions[ownReactionIndex], 0,
); animations[index].value * 24.0,
} else { ),
sendReaction( color: ownReactionIndex != -1
context, ? StreamChatTheme.of(context)
reactionIcon.type, .colorTheme
); .accentBlue
} : Theme.of(context)
}, .iconTheme
); .color
}).toList(), .withOpacity(.5),
),
);
}),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
widget.message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
),
);
})
.insertBetween(SizedBox(
width: 16,
))
.toList(),
), ),
), ),
), ),
packages/flutter_widgets/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,
}, );
},
),
), ),
); );
} }
packages/flutter_widgets/lib/src/utils.dart
+8 -28
View File
@@ -1,4 +1,3 @@
import 'package:emojis/emoji.dart';
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:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
@@ -38,27 +37,21 @@ Future<bool> showConfirmationDialog(
return Column( return Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
SizedBox( SizedBox(height: 26.0),
height: 26.0,
),
if (icon != null) icon, if (icon != null) icon,
SizedBox( SizedBox(height: 26.0),
height: 26.0,
),
Text( Text(
title, title,
style: StreamChatTheme.of(context).textTheme.headlineBold, style: StreamChatTheme.of(context).textTheme.headlineBold,
), ),
SizedBox( SizedBox(height: 7.0),
height: 7.0, Text(
), question,
Text(question), textAlign: TextAlign.center,
SizedBox(
height: 36.0,
), ),
SizedBox(height: 36.0),
Container( Container(
color: color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0, height: 1.0,
), ),
Row( Row(
@@ -293,16 +286,3 @@ StreamSvgIcon getFileTypeImage(String type) {
break; break;
} }
} }
final _emojis = Emoji.all();
bool textIsOnlyEmoji(String text) {
return text.trim().characters.isNotEmpty &&
text.trim().characters.every((c) =>
_emojis.firstWhere(
(Emoji emoji) => emoji.char.contains(c),
orElse: () => null,
) !=
null) &&
text.characters.length < 4;
}
packages/flutter_widgets/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';
packages/flutter_widgets/pubspec.yaml
+1 -1
View File
@@ -28,7 +28,7 @@ dependencies:
file_picker: ^2.1.5 file_picker: ^2.1.5
image_picker: ^0.6.7+17 image_picker: ^0.6.7+17
flutter_keyboard_visibility: ^4.0.2 flutter_keyboard_visibility: ^4.0.2
stream_chat: ^0.2.23+1 stream_chat: ^0.2.23+2
mime: ^0.9.7 mime: ^0.9.7
video_compress: ^2.1.1 video_compress: ^2.1.1
visibility_detector: ^0.1.5 visibility_detector: ^0.1.5