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

Merge pull request #106 from GetStream/dj-develop-ui

Browse Source 
New Message Input
This commit is contained in:
Salvatore Giordano
2020-10-27 15:07:20 +01:00
committed by GitHub
parent a7f5d7a635 eb27807aa5
commit d1d7bd6f7e
4 changed files with 410 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
analysis_options.yaml
+2
View File
@@ -1,6 +1,8 @@
include: package:pedantic/analysis_options.yaml include: package:pedantic/analysis_options.yaml
analyzer: analyzer:
enable-experiment:
- extension-methods
exclude: exclude:
- lib/**/*.g.dart - lib/**/*.g.dart
- example/** - example/**
lib/src/message_actions_modal.dart
+19 -31
View File
@@ -213,41 +213,29 @@ class MessageActionsModal extends StatelessWidget {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
IconButton(
icon: Icon(
StreamIcons.edit,
size: 22,
color:
StreamChatTheme.of(context).primaryIconTheme.color,
),
onPressed: () {},
),
Text( Text(
'Edit message', 'Edit message',
style: Theme.of(context).textTheme.headline6, style: Theme.of(context).textTheme.headline6.copyWith(fontWeight: FontWeight.bold),
), ),
Container( IconButton(
height: 30, icon: Icon(
padding: const EdgeInsets.all(2.0), Icons.cancel_outlined,
child: AspectRatio( size: 22,
aspectRatio: 1, color:
child: RawMaterialButton( StreamChatTheme.of(context).primaryIconTheme.color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
elevation: 0,
highlightElevation: 0,
focusElevation: 0,
disabledElevation: 0,
hoverElevation: 0,
onPressed: () {
Navigator.of(context).pop();
},
fillColor:
Theme.of(context).brightness == Brightness.dark
? Colors.white.withOpacity(.1)
: Colors.black.withOpacity(.1),
padding: EdgeInsets.all(4),
child: Icon(
Icons.close,
size: 15,
color: StreamChatTheme.of(context)
.primaryIconTheme
.color,
),
),
), ),
onPressed: () {
Navigator.of(context).pop();
},
), ),
], ],
), ),
lib/src/message_input.dart
+388 -169
View File
@@ -1,5 +1,6 @@
import 'dart:async'; import 'dart:async';
import 'dart:io'; import 'dart:io';
import 'dart:math';
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
@@ -165,8 +166,13 @@ class MessageInputState extends State<MessageInput> {
bool _inputEnabled = true; bool _inputEnabled = true;
bool _messageIsPresent = false; bool _messageIsPresent = false;
bool _typingStarted = false; bool _typingStarted = false;
bool _commandEnabled = false;
OverlayEntry _commandsOverlay, _mentionsOverlay; OverlayEntry _commandsOverlay, _mentionsOverlay;
Command _chosenCommand;
bool _actionsShrunk = false;
bool _sendAsDm = false;
/// The editing controller passed to the input TextField /// The editing controller passed to the input TextField
TextEditingController textEditingController; TextEditingController textEditingController;
@@ -179,21 +185,19 @@ class MessageInputState extends State<MessageInput> {
_focusNode.unfocus(); _focusNode.unfocus();
} }
}, },
child: Padding( child: Column(
padding: const EdgeInsets.all(8.0), mainAxisSize: MainAxisSize.min,
child: Stack( children: [
clipBehavior: Clip.none, Padding(
children: <Widget>[ padding: const EdgeInsets.all(8.0),
_buildBorder(context), child: _buildTextField(context),
Column( ),
crossAxisAlignment: CrossAxisAlignment.start, if(widget.parentMessage != null)
children: [ Padding(
_buildAttachments(), padding: const EdgeInsets.symmetric(horizontal: 8.0),
_buildTextField(context), child: _buildDmCheckbox(),
],
), ),
], ],
),
), ),
), ),
); );
@@ -202,9 +206,9 @@ class MessageInputState extends State<MessageInput> {
Flex _buildTextField(BuildContext context) { Flex _buildTextField(BuildContext context) {
return Flex( return Flex(
direction: Axis.horizontal, direction: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
if (!widget.disableAttachments) _buildAttachmentButton(), if (!_commandEnabled) _buildExpandActionsButton(),
if (widget.actionsLocation == ActionsLocation.left) if (widget.actionsLocation == ActionsLocation.left)
...widget.actions ?? [], ...widget.actions ?? [],
_buildTextInput(context), _buildTextInput(context),
@@ -215,6 +219,18 @@ class MessageInputState extends State<MessageInput> {
); );
} }
Widget _buildDmCheckbox() {
return Row(
children: [
Checkbox(value: _sendAsDm, onChanged: (val) => setState(() {_sendAsDm = val;})),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text('Send also as direct message'),
),
],
);
}
AnimatedCrossFade _animateSendButton(BuildContext context) { AnimatedCrossFade _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return AnimatedCrossFade(
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) && crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
@@ -222,7 +238,34 @@ class MessageInputState extends State<MessageInput> {
? CrossFadeState.showFirst ? CrossFadeState.showFirst
: CrossFadeState.showSecond, : CrossFadeState.showSecond,
firstChild: _buildSendButton(context), firstChild: _buildSendButton(context),
secondChild: SizedBox(), secondChild: _buildIdleSendButton(context),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
);
}
Widget _buildExpandActionsButton() {
return AnimatedCrossFade(
crossFadeState:
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
firstChild: IconButton(
onPressed: () {
setState(() {
_actionsShrunk = false;
});
},
icon: Icon(
StreamIcons.circle_left,
color: StreamChatTheme.of(context).accentColor,
),
),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null) _buildCommandButton(),
],
),
duration: Duration(milliseconds: 300), duration: Duration(milliseconds: 300),
alignment: Alignment.center, alignment: Alignment.center,
); );
@@ -230,60 +273,134 @@ class MessageInputState extends State<MessageInput> {
Expanded _buildTextInput(BuildContext context) { Expanded _buildTextInput(BuildContext context) {
return Expanded( return Expanded(
child: LimitedBox( child: Center(
maxHeight: widget.maxHeight, child: LimitedBox(
child: TextField( maxHeight: widget.maxHeight,
key: Key('messageInputText'), child: Container(
enabled: _inputEnabled, clipBehavior: Clip.antiAlias,
minLines: null, decoration: BoxDecoration(
maxLines: null, borderRadius: BorderRadius.circular(32.0),
onSubmitted: (_) { border: Border.all(
sendMessage(); color: Colors.grey,
}, ),
keyboardType: widget.keyboardType, ),
controller: textEditingController, child: Column(
focusNode: _focusNode, mainAxisSize: MainAxisSize.min,
onChanged: (s) { children: [
StreamChannel.of(context).channel.keyStroke(); _buildAttachments(),
TextField(
key: Key('messageInputText'),
enabled: _inputEnabled,
minLines: null,
maxLines: null,
onSubmitted: (_) {
sendMessage();
},
keyboardType: widget.keyboardType,
controller: textEditingController,
focusNode: _focusNode,
onChanged: (s) {
StreamChannel.of(context).channel.keyStroke();
setState(() { setState(() {
_messageIsPresent = s.trim().isNotEmpty; _messageIsPresent = s.trim().isNotEmpty;
}); _actionsShrunk = s.trim().isNotEmpty;
});
_commandsOverlay?.remove(); _commandsOverlay?.remove();
_commandsOverlay = null; _commandsOverlay = null;
_mentionsOverlay?.remove(); _mentionsOverlay?.remove();
_mentionsOverlay = null; _mentionsOverlay = null;
if (s.startsWith('/')) { if (s.startsWith('/')) {
_commandsOverlay = _buildCommandsOverlayEntry(); var matchedCommandsList = StreamChannel.of(context)
Overlay.of(context).insert(_commandsOverlay); .channel
} .config
.commands.where((element) => element.name == s.substring(1)).toList();
if (textEditingController.selection.isCollapsed && if(matchedCommandsList.length == 1) {
(s[textEditingController.selection.start - 1] == '@' || _chosenCommand = matchedCommandsList[0];
textEditingController.text textEditingController.clear();
.substring(0, textEditingController.selection.start) _messageIsPresent = false;
.split(' ') setState(() {
.last _commandEnabled = true;
.contains('@'))) { });
_mentionsOverlay = _buildMentionsOverlayEntry(); _commandsOverlay.remove();
Overlay.of(context).insert(_mentionsOverlay); _commandsOverlay = null;
} } else {
}, _commandsOverlay = _buildCommandsOverlayEntry();
onTap: () { Overlay.of(context).insert(_commandsOverlay);
setState(() { }
_typingStarted = true; }
});
}, if (textEditingController.selection.isCollapsed &&
style: Theme.of(context).textTheme.bodyText2, (s[textEditingController.selection.start - 1] == '@' ||
autofocus: false, textEditingController.text
decoration: InputDecoration( .substring(
hintText: 'Write a message', 0, textEditingController.selection.start)
prefixText: ' ', .split(' ')
border: InputBorder.none, .last
.contains('@'))) {
_mentionsOverlay = _buildMentionsOverlayEntry();
Overlay.of(context).insert(_mentionsOverlay);
}
},
onTap: () {
setState(() {
_typingStarted = true;
});
},
style: Theme.of(context).textTheme.bodyText2,
autofocus: false,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
hintText: 'Write a message',
prefixText: _commandEnabled ? null : ' ',
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
contentPadding: EdgeInsets.all(8),
prefixIcon: _commandEnabled
? Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
child: Chip(
backgroundColor:
StreamChatTheme.of(context).accentColor,
label: Text(
_chosenCommand?.name ?? "",
style: TextStyle(color: Colors.white),
),
avatar: Icon(
StreamIcons.lightning,
color: Colors.white,
),
),
)
: null,
suffixIcon: _commandEnabled
? IconButton(
icon: Icon(Icons.cancel_outlined),
onPressed: () {
setState(() {
_commandEnabled = false;
});
},
)
: null,
),
textCapitalization: TextCapitalization.sentences,
),
],
),
), ),
textCapitalization: TextCapitalization.sentences,
), ),
), ),
); );
@@ -340,47 +457,79 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0, left: 0,
right: 0, right: 0,
child: Material( child: Padding(
color: StreamChatTheme.of(context).primaryColor, padding: const EdgeInsets.all(8.0),
child: Container( child: Card(
constraints: BoxConstraints.loose(Size.fromHeight(400)), elevation: 2.0,
decoration: BoxDecoration( color: StreamChatTheme.of(context).primaryColor,
boxShadow: [ clipBehavior: Clip.antiAlias,
BoxShadow( child: Container(
spreadRadius: -8, constraints: BoxConstraints.loose(Size.fromHeight(400)),
blurRadius: 5.0, decoration: BoxDecoration(
offset: Offset(0, -4), // boxShadow: [
), // BoxShadow(
], // spreadRadius: -8,
color: StreamChatTheme.of(context).primaryColor, // blurRadius: 5.0,
), // offset: Offset(0, -4),
child: ListView( // ),
padding: const EdgeInsets.all(0), // ],
shrinkWrap: true, color: StreamChatTheme.of(context).primaryColor,
children: commands borderRadius: BorderRadius.circular(8.0)),
.map( child: ListView(
(c) => ListTile( padding: const EdgeInsets.all(0),
title: Text.rich( shrinkWrap: true,
TextSpan( children: [
text: '${c.name}', if (commands.isNotEmpty)
style: TextStyle(fontWeight: FontWeight.bold), Padding(
children: [ padding: const EdgeInsets.only(left: 8.0, top: 8.0),
TextSpan( child: Row(
text: ' ${c.args}', children: [
style: TextStyle( Padding(
fontWeight: FontWeight.w300, padding:
), const EdgeInsets.symmetric(horizontal: 8.0),
), child: Icon(StreamIcons.lightning,
], color: StreamChatTheme.of(context).accentColor),
), ),
Text('Instant Commands')
],
), ),
subtitle: Text(c.description),
onTap: () {
_setCommand(c);
},
), ),
) ...commands
.toList(), .map(
(c) => ListTile(
title: Text.rich(
TextSpan(
text: '${c.name.capitalize()}',
style: TextStyle(fontWeight: FontWeight.bold),
children: [
TextSpan(
text: ' /${c.name} ${c.args}',
style: TextStyle(
fontWeight: FontWeight.w300,
),
),
],
),
),
trailing: CircleAvatar(
backgroundColor:
StreamChatTheme.of(context).accentColor,
child: Icon(
StreamIcons.lightning,
color: Colors.white,
size: 12.5,
),
maxRadius: 15,
),
//subtitle: Text(c.description),
onTap: () {
_setCommand(c);
},
),
)
.toList(),
],
),
), ),
), ),
), ),
@@ -417,8 +566,11 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0, left: 0,
right: 0, right: 0,
child: Material( child: Card(
margin: EdgeInsets.all(8.0),
elevation: 2.0,
color: StreamChatTheme.of(context).primaryColor, color: StreamChatTheme.of(context).primaryColor,
clipBehavior: Clip.antiAlias,
child: Container( child: Container(
constraints: BoxConstraints.loose(Size.fromHeight(400)), constraints: BoxConstraints.loose(Size.fromHeight(400)),
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -443,7 +595,15 @@ class MessageInputState extends State<MessageInput> {
leading: UserAvatar( leading: UserAvatar(
user: m.user, user: m.user,
), ),
title: Text('${m.user.name}'), title: Text(
'${m.user.name}',
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text('${m.userId}'),
trailing: Icon(
Icons.alternate_email,
color: StreamChatTheme.of(context).accentColor,
),
onTap: () { onTap: () {
_mentionedUsers.add(m.user); _mentionedUsers.add(m.user);
@@ -474,12 +634,12 @@ class MessageInputState extends State<MessageInput> {
} }
void _setCommand(Command c) { void _setCommand(Command c) {
textEditingController.value = TextEditingValue( textEditingController.clear();
text: '/${c.name} ', setState(() {
selection: TextSelection.collapsed( _chosenCommand = c;
offset: c.name.length + 2, _commandEnabled = true;
), _messageIsPresent = false;
); });
_commandsOverlay?.remove(); _commandsOverlay?.remove();
_commandsOverlay = null; _commandsOverlay = null;
} }
@@ -498,39 +658,47 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildAttachments() { Widget _buildAttachments() {
return Wrap( return _attachments.isEmpty
direction: Axis.horizontal, ? Container()
children: _attachments : LimitedBox(
.map( maxHeight: 76.0,
(attachment) => Padding( child: ListView(
padding: const EdgeInsets.all(8.0), scrollDirection: Axis.horizontal,
child: ClipRRect( children: _attachments
borderRadius: BorderRadius.circular(10), .map(
child: Stack( (attachment) => Padding(
children: <Widget>[ padding: const EdgeInsets.all(8.0),
Container( child: ClipRRect(
height: 50, borderRadius: BorderRadius.circular(10),
width: 50, child: Stack(
child: _buildAttachment(attachment), children: <Widget>[
), AspectRatio(
_buildRemoveButton(attachment), aspectRatio: 1.0,
attachment.uploaded child: Container(
? SizedBox() height: 50,
: Positioned.fill( width: 50,
child: Center( child: _buildAttachment(attachment),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
), ),
), ),
), _buildRemoveButton(attachment),
], attachment.uploaded
), ? SizedBox()
), : Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
),
),
),
],
),
),
),
)
.toList(),
), ),
) );
.toList(),
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -602,20 +770,39 @@ class MessageInputState extends State<MessageInput> {
} }
} }
Material _buildAttachmentButton() { Widget _buildCommandButton() {
return Material( return Center(
clipBehavior: Clip.hardEdge, child: InkWell(
shape: RoundedRectangleBorder( child: Padding(
borderRadius: BorderRadius.circular(32), padding: const EdgeInsets.only(
left: 4.0, right: 8.0, top: 8.0, bottom: 8.0),
child: Icon(StreamIcons.lightning),
),
onTap: () {
if (_commandsOverlay == null) {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
} else {
_commandsOverlay?.remove();
_commandsOverlay = null;
}
},
), ),
color: Colors.transparent, );
child: IconButton( }
onPressed: () {
Widget _buildAttachmentButton() {
var padding = widget.editMessage == null ? 4.0 : 8.0;
return Center(
child: InkWell(
child: Padding(
padding: EdgeInsets.only(
left: 8.0, right: padding, top: 8.0, bottom: 8.0),
child: Icon(StreamIcons.attach),
),
onTap: () {
showAttachmentModal(); showAttachmentModal();
}, },
icon: Icon(
Icons.add_circle_outline,
),
), ),
); );
} }
@@ -832,24 +1019,44 @@ class MessageInputState extends State<MessageInput> {
return res.file; return res.file;
} }
Widget _buildIdleSendButton(BuildContext context) {
return IconTheme(
data:
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: InkWell(
onTap: () {
sendMessage();
},
child: Icon(
StreamIcons.send_message,
color: Colors.grey,
),
)),
),
);
}
Widget _buildSendButton(BuildContext context) { Widget _buildSendButton(BuildContext context) {
return IconTheme( return IconTheme(
data: data:
StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme, StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
child: Material( child: Center(
clipBehavior: Clip.hardEdge, child: Padding(
shape: RoundedRectangleBorder( padding: const EdgeInsets.all(8.0),
borderRadius: BorderRadius.circular(32), child: InkWell(
), onTap: () {
color: Colors.transparent, sendMessage();
child: IconButton( },
key: Key('sendButton'), child: Transform.rotate(
onPressed: () { angle: widget.editMessage == null ? -pi / 2 : 0,
sendMessage(); child: Icon(
}, widget.editMessage == null ? StreamIcons.send_message : StreamIcons.check_send,
icon: Icon( color: StreamChatTheme.of(context).accentColor,
Icons.send, ),
color: StreamChatTheme.of(context).accentColor, ),
), ),
), ),
), ),
@@ -858,11 +1065,15 @@ class MessageInputState extends State<MessageInput> {
/// Sends the current message /// Sends the current message
void sendMessage() async { void sendMessage() async {
final text = textEditingController.text.trim(); var text = textEditingController.text.trim();
if (text.isEmpty && _attachments.isEmpty) { if (text.isEmpty && _attachments.isEmpty) {
return; return;
} }
if (_commandEnabled) {
text = '/${_chosenCommand.name} ' + text;
}
final attachments = List<_SendingAttachment>.from(_attachments); final attachments = List<_SendingAttachment>.from(_attachments);
textEditingController.clear(); textEditingController.clear();
@@ -871,6 +1082,7 @@ class MessageInputState extends State<MessageInput> {
setState(() { setState(() {
_messageIsPresent = false; _messageIsPresent = false;
_typingStarted = false; _typingStarted = false;
_commandEnabled = false;
}); });
_commandsOverlay?.remove(); _commandsOverlay?.remove();
@@ -896,6 +1108,7 @@ class MessageInputState extends State<MessageInput> {
attachments: _getAttachments(attachments).toList(), attachments: _getAttachments(attachments).toList(),
mentionedUsers: mentionedUsers:
_mentionedUsers.where((u) => text.contains('@${u.name}')).toList(), _mentionedUsers.where((u) => text.contains('@${u.name}')).toList(),
showInChannel: widget.parentMessage != null ? _sendAsDm : null,
); );
} }
@@ -1016,3 +1229,9 @@ class _SendingAttachment {
this.uploaded = false, this.uploaded = false,
}); });
} }
extension StringExtension on String {
String capitalize() {
return "${this[0].toUpperCase()}${this.substring(1)}";
}
}
pubspec.yaml
+1 -1
View File
@@ -6,7 +6,7 @@ repository: https://github.com/GetStream/stream-chat-flutter
issue_tracker: https://github.com/GetStream/stream-chat-flutter/issues issue_tracker: https://github.com/GetStream/stream-chat-flutter/issues
environment: environment:
sdk: ">=2.3.0 <3.0.0" sdk: ">=2.6.0 <3.0.0"
dependencies: dependencies:
flutter: flutter: