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

fix: attachments ui

Browse Source
This commit is contained in:
Deven Joshi
2020-10-26 16:31:30 +05:30
parent 1f3328a5f8
commit f3a9b0939f
1 changed files with 102 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_input.dart
+102 -97
View File
@@ -197,8 +197,7 @@ class MessageInputState extends State<MessageInput> {
direction: Axis.horizontal, direction: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[ children: <Widget>[
if(!_commandEnabled) if (!_commandEnabled) _buildExpandActionsButton(),
_buildExpandActionsButton(),
if (widget.actionsLocation == ActionsLocation.left) if (widget.actionsLocation == ActionsLocation.left)
...widget.actions ?? [], ...widget.actions ?? [],
_buildTextInput(context), _buildTextInput(context),
@@ -224,16 +223,18 @@ class MessageInputState extends State<MessageInput> {
Widget _buildExpandActionsButton() { Widget _buildExpandActionsButton() {
return AnimatedCrossFade( return AnimatedCrossFade(
crossFadeState: _actionsShrunk crossFadeState:
? CrossFadeState.showFirst _actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
: CrossFadeState.showSecond,
firstChild: IconButton( firstChild: IconButton(
onPressed: () { onPressed: () {
setState(() { setState(() {
_actionsShrunk = false; _actionsShrunk = false;
}); });
}, },
icon: Icon(StreamIcons.circle_left, color: StreamChatTheme.of(context).accentColor,), icon: Icon(
StreamIcons.circle_left,
color: StreamChatTheme.of(context).accentColor,
),
), ),
secondChild: Row( secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
@@ -254,11 +255,10 @@ class MessageInputState extends State<MessageInput> {
maxHeight: widget.maxHeight, maxHeight: widget.maxHeight,
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0), borderRadius: BorderRadius.circular(16.0),
border: Border.all( border: Border.all(
color: Colors.grey, color: Colors.grey,
) )),
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@@ -295,7 +295,8 @@ class MessageInputState extends State<MessageInput> {
if (textEditingController.selection.isCollapsed && if (textEditingController.selection.isCollapsed &&
(s[textEditingController.selection.start - 1] == '@' || (s[textEditingController.selection.start - 1] == '@' ||
textEditingController.text textEditingController.text
.substring(0, textEditingController.selection.start) .substring(
0, textEditingController.selection.start)
.split(' ') .split(' ')
.last .last
.contains('@'))) { .contains('@'))) {
@@ -315,26 +316,23 @@ class MessageInputState extends State<MessageInput> {
hintText: 'Write a message', hintText: 'Write a message',
prefixText: _commandEnabled ? null : ' ', prefixText: _commandEnabled ? null : ' ',
border: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent) borderSide: BorderSide(color: Colors.transparent)),
),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent) borderSide: BorderSide(color: Colors.transparent)),
),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent) borderSide: BorderSide(color: Colors.transparent)),
),
errorBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent) borderSide: BorderSide(color: Colors.transparent)),
),
disabledBorder: OutlineInputBorder( disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent) borderSide: BorderSide(color: Colors.transparent)),
),
contentPadding: EdgeInsets.all(8), contentPadding: EdgeInsets.all(8),
prefixIcon: _commandEnabled prefixIcon: _commandEnabled
? Padding( ? Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding:
child: Chip( const EdgeInsets.symmetric(horizontal: 8.0),
backgroundColor: StreamChatTheme.of(context).accentColor, child: Chip(
backgroundColor:
StreamChatTheme.of(context).accentColor,
label: Text( label: Text(
_chosenCommand?.name ?? "", _chosenCommand?.name ?? "",
style: TextStyle(color: Colors.white), style: TextStyle(color: Colors.white),
@@ -344,7 +342,7 @@ class MessageInputState extends State<MessageInput> {
color: Colors.white, color: Colors.white,
), ),
), ),
) )
: null, : null,
suffixIcon: _commandEnabled suffixIcon: _commandEnabled
? IconButton( ? IconButton(
@@ -427,16 +425,15 @@ class MessageInputState extends State<MessageInput> {
child: Container( child: Container(
constraints: BoxConstraints.loose(Size.fromHeight(400)), constraints: BoxConstraints.loose(Size.fromHeight(400)),
decoration: BoxDecoration( decoration: BoxDecoration(
// boxShadow: [ // boxShadow: [
// BoxShadow( // BoxShadow(
// spreadRadius: -8, // spreadRadius: -8,
// blurRadius: 5.0, // blurRadius: 5.0,
// offset: Offset(0, -4), // offset: Offset(0, -4),
// ), // ),
// ], // ],
color: StreamChatTheme.of(context).primaryColor, color: StreamChatTheme.of(context).primaryColor,
borderRadius: BorderRadius.circular(8.0) borderRadius: BorderRadius.circular(8.0)),
),
child: ListView( child: ListView(
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
shrinkWrap: true, shrinkWrap: true,
@@ -447,7 +444,8 @@ class MessageInputState extends State<MessageInput> {
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Icon(StreamIcons.lightning, color: StreamChatTheme.of(context).accentColor), child: Icon(StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor),
), ),
Text('Instant Commands') Text('Instant Commands')
], ],
@@ -456,31 +454,36 @@ class MessageInputState extends State<MessageInput> {
...commands ...commands
.map( .map(
(c) => ListTile( (c) => ListTile(
title: Text.rich( title: Text.rich(
TextSpan(
text: '${c.name.capitalize()}',
style: TextStyle(fontWeight: FontWeight.bold),
children: [
TextSpan( TextSpan(
text: ' /${c.name} ${c.args}', text: '${c.name.capitalize()}',
style: TextStyle( style: TextStyle(fontWeight: FontWeight.bold),
fontWeight: FontWeight.w300, 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);
},
), ),
), )
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(), .toList(),
], ],
), ),
@@ -612,42 +615,44 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildAttachments() { Widget _buildAttachments() {
return LimitedBox( return _attachments.isEmpty
maxHeight: 80.0, ? Container()
child: ListView( : LimitedBox(
scrollDirection: Axis.horizontal, maxHeight: 80.0,
children: _attachments child: ListView(
.map( scrollDirection: Axis.horizontal,
(attachment) => Padding( children: _attachments
padding: const EdgeInsets.all(8.0), .map(
child: ClipRRect( (attachment) => Padding(
borderRadius: BorderRadius.circular(10), padding: const EdgeInsets.all(8.0),
child: Stack( child: ClipRRect(
children: <Widget>[ borderRadius: BorderRadius.circular(10),
Container( child: Stack(
height: 50, children: <Widget>[
width: 50, Container(
child: _buildAttachment(attachment), height: 50,
), width: 50,
_buildRemoveButton(attachment), child: _buildAttachment(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
),
),
), ),
], _buildRemoveButton(attachment),
), attachment.uploaded
), ? SizedBox()
), : Positioned.fill(
) child: Center(
.toList(), child: Padding(
), padding: const EdgeInsets.all(16.0),
); child: CircularProgressIndicator(),
),
),
),
],
),
),
),
)
.toList(),
),
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -728,7 +733,7 @@ class MessageInputState extends State<MessageInput> {
child: Icon(StreamIcons.lightning), child: Icon(StreamIcons.lightning),
), ),
onTap: () { onTap: () {
if(_commandsOverlay == null) { if (_commandsOverlay == null) {
_commandsOverlay = _buildCommandsOverlayEntry(); _commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay); Overlay.of(context).insert(_commandsOverlay);
} else { } else {
@@ -1018,7 +1023,7 @@ class MessageInputState extends State<MessageInput> {
return; return;
} }
if(_commandEnabled) { if (_commandEnabled) {
text = '/${_chosenCommand.name} ' + text; text = '/${_chosenCommand.name} ' + text;
} }
@@ -1181,4 +1186,4 @@ extension StringExtension on String {
String capitalize() { String capitalize() {
return "${this[0].toUpperCase()}${this.substring(1)}"; return "${this[0].toUpperCase()}${this.substring(1)}";
} }
} }