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

Merge pull request #127 from GetStream/hotfix/messageinput

Browse Source 
Hotfix/messageinput
This commit is contained in:
Deven Joshi
2020-11-06 09:44:13 +05:30
committed by GitHub
parent be4805116f d51584e3ca
commit 81832e0ba5
6 changed files with 298 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/ios/Flutter/.last_build_id
+1 -1
View File
@@ -1 +1 @@
bdf1751976c4ee1e2ef7638eabcfd1ea bb5f9103d9045cd6244bcae1f5f343e5
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.0.39+41 version: 1.0.40+42
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/giphy_attachment.dart
+187 -172
View File
@@ -41,196 +41,211 @@ class GiphyAttachment extends StatelessWidget {
return Column( return Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Card( DecoratedBox(
clipBehavior: Clip.antiAlias, decoration: BoxDecoration(),
shape: RoundedRectangleBorder( child: Card(
borderRadius: BorderRadius.only( elevation: 2,
topRight: Radius.circular(16.0), clipBehavior: Clip.antiAlias,
bottomRight: Radius.circular(0.0), shape: RoundedRectangleBorder(
topLeft: Radius.circular(16.0), borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16.0), topRight: Radius.circular(16.0),
bottomRight: Radius.circular(0.0),
topLeft: Radius.circular(16.0),
bottomLeft: Radius.circular(16.0),
),
), ),
), child: Column(
child: Column( mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
children: <Widget>[ Stack(
Stack( children: [
children: [ Padding(
Padding( padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0), child: GestureDetector(
child: GestureDetector( onTap: () {
onTap: () { Navigator.push(context,
Navigator.push(context, MaterialPageRoute(builder: (_) { MaterialPageRoute(builder: (_) {
return FullScreenImage( return FullScreenImage(
url: attachment.imageUrl ?? url: attachment.imageUrl ??
attachment.assetUrl ?? attachment.assetUrl ??
attachment.thumbUrl, attachment.thumbUrl,
); );
})); }));
},
child: CachedNetworkImage(
height: size?.height,
width: size?.width,
placeholder: (_, __) {
return Container(
width: size?.width,
height: size?.height,
child: Center(
child: CircularProgressIndicator(),
),
);
}, },
imageUrl: attachment.thumbUrl ?? child: CachedNetworkImage(
attachment.imageUrl ?? height: size?.height,
attachment.assetUrl, width: size?.width,
errorWidget: (context, url, error) => AttachmentError( placeholder: (_, __) {
attachment: attachment, return Container(
size: size, width: size?.width,
height: size?.height,
child: Center(
child: CircularProgressIndicator(),
),
);
},
imageUrl: attachment.thumbUrl ??
attachment.imageUrl ??
attachment.assetUrl,
errorWidget: (context, url, error) => AttachmentError(
attachment: attachment,
size: size,
),
fit: BoxFit.cover,
), ),
fit: BoxFit.cover,
), ),
), ),
), Positioned(
Positioned( left: 0,
left: 0, top: 0,
top: 0, child: Container(
child: Container( decoration: BoxDecoration(
decoration: BoxDecoration( color: Colors.white,
color: Colors.white, borderRadius: BorderRadius.only(
borderRadius: BorderRadius.only( bottomRight: Radius.circular(16.0),
bottomRight: Radius.circular(16.0), )),
)), child: Padding(
child: Padding( padding: const EdgeInsets.only(
padding: const EdgeInsets.only( left: 8.0,
left: 8.0, right: 8.0,
right: 8.0, top: 8.0,
top: 8.0, bottom: 4.0,
bottom: 4.0, ),
), child: Row(
child: Row( children: [
children: [ Icon(
Icon( StreamIcons.lightning,
StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor,
size: 16.0,
),
Text(
'GIPHY',
style: TextStyle(
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context).accentColor,
fontWeight: FontWeight.bold, size: 16.0,
fontSize: 11.0, ),
Text(
'GIPHY',
style: TextStyle(
color:
StreamChatTheme.of(context).accentColor,
fontWeight: FontWeight.bold,
fontSize: 11.0,
),
),
],
),
),
),
),
],
),
if (attachment.title != null)
Container(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Card(
elevation: 2,
child: IconButton(
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tight(Size(32, 32)),
icon: Icon(
StreamIcons.left,
size: 24.0,
),
splashRadius: 16,
onPressed: () {
streamChannel.channel.sendAction(message, {
'image_action': 'shuffle',
});
},
),
shape: CircleBorder(),
),
Expanded(
child: Center(
child: Text(
'"${attachment.title}"',
style: TextStyle(
fontStyle: FontStyle.italic,
),
), ),
), ),
],
),
),
),
),
],
),
if (attachment.title != null)
Container(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Card(
child: IconButton(
icon: Icon(
StreamIcons.left,
size: 24.0,
), ),
splashRadius: 24, Card(
onPressed: () { elevation: 2,
streamChannel.channel.sendAction(message, { child: IconButton(
'image_action': 'shuffle', padding: const EdgeInsets.all(0),
}); constraints: BoxConstraints.tight(Size(32, 32)),
}, icon: Icon(
), StreamIcons.right,
shape: CircleBorder(), size: 24.0,
), ),
Expanded( splashRadius: 16,
child: Center( onPressed: () {
child: Text( streamChannel.channel.sendAction(message, {
'"${attachment.title}"', 'image_action': 'shuffle',
style: TextStyle( });
fontStyle: FontStyle.italic, },
), ),
shape: CircleBorder(),
), ),
), ],
), ),
Card( ),
child: IconButton(
icon: Icon(
StreamIcons.right,
size: 24.0,
),
splashRadius: 24,
onPressed: () {
streamChannel.channel.sendAction(message, {
'image_action': 'shuffle',
});
},
),
shape: CircleBorder(),
),
],
), ),
SizedBox(
height: 4.0,
), ),
SizedBox( Container(
height: 4.0, color: Colors.black.withOpacity(0.2),
), width: double.infinity,
Container( height: 0.5,
color: Colors.black.withOpacity(0.2), ),
width: double.infinity, Row(
height: 0.5, mainAxisAlignment: MainAxisAlignment.start,
), crossAxisAlignment: CrossAxisAlignment.center,
Row( children: [
mainAxisAlignment: MainAxisAlignment.start, Expanded(
crossAxisAlignment: CrossAxisAlignment.center, child: FlatButton(
children: [ height: 50,
Expanded( onPressed: () {
child: FlatButton( streamChannel.channel.sendAction(message, {
height: 50, 'image_action': 'cancel',
onPressed: () { });
streamChannel.channel.sendAction(message, { },
'image_action': 'cancel', child: Text(
}); 'Cancel',
}, style: TextStyle(
child: Text( fontWeight: FontWeight.bold,
'Cancel', color: Colors.black.withOpacity(0.5)),
style: TextStyle( ),
fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(0.5)),
), ),
), ),
), Container(
Container( width: 0.5,
width: 0.5, color: Colors.black.withOpacity(0.2),
color: Colors.black.withOpacity(0.2), height: 50.0,
height: 50.0, ),
), Expanded(
Expanded( child: FlatButton(
child: FlatButton( height: 50,
height: 50, onPressed: () {
onPressed: () { streamChannel.channel.sendAction(message, {
streamChannel.channel.sendAction(message, { 'image_action': 'send',
'image_action': 'send', });
}); },
}, child: Text(
child: Text( 'Send',
'Send', style: TextStyle(
style: TextStyle( color: StreamChatTheme.of(context).accentColor,
color: StreamChatTheme.of(context).accentColor, fontWeight: FontWeight.bold),
fontWeight: FontWeight.bold), ),
), ),
), ),
), ],
], ),
), ],
], ),
), ),
), ),
SizedBox( SizedBox(
lib/src/message_input.dart
+98 -42
View File
@@ -6,6 +6,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart'; import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:http_parser/http_parser.dart'; import 'package:http_parser/http_parser.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:mime/mime.dart'; import 'package:mime/mime.dart';
@@ -220,22 +221,66 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildDmCheckbox() { Widget _buildDmCheckbox() {
return Row( return Container(
children: [ height: 36,
Checkbox( padding: const EdgeInsets.only(
value: _sendAsDm, left: 12,
onChanged: (val) => setState( bottom: 12,
() { top: 8,
_sendAsDm = val; ),
}, child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 16,
width: 16,
foregroundDecoration: BoxDecoration(
border: _sendAsDm
? null
: Border.all(
color: Colors.black.withOpacity(.5),
width: 2,
),
borderRadius: BorderRadius.circular(3),
),
child: Center(
child: Material(
borderRadius: BorderRadius.circular(3),
color: _sendAsDm
? StreamChatTheme.of(context).accentColor
: Colors.white,
child: InkWell(
onTap: () {
setState(() {
_sendAsDm = !_sendAsDm;
});
},
child: AnimatedCrossFade(
duration: Duration(milliseconds: 300),
reverseDuration: Duration(milliseconds: 300),
crossFadeState: _sendAsDm
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: Icon(
StreamIcons.check,
size: 16.0,
color: Colors.white,
),
secondChild: SizedBox(
height: 16,
width: 16,
),
),
),
),
),
), ),
activeColor: StreamChatTheme.of(context).accentColor, Padding(
), padding: const EdgeInsets.symmetric(horizontal: 16.0),
Padding( child: Text('Send also as direct message'),
padding: const EdgeInsets.symmetric(horizontal: 8.0), ),
child: Text('Send also as direct message'), ],
), ),
],
); );
} }
@@ -483,13 +528,6 @@ 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(
// spreadRadius: -8,
// blurRadius: 5.0,
// 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(
@@ -507,25 +545,19 @@ class MessageInputState extends State<MessageInput> {
child: Icon(StreamIcons.lightning, child: Icon(StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor), color: StreamChatTheme.of(context).accentColor),
), ),
Text('Instant Commands') Text(
'Instant Commands',
style: TextStyle(
color: Colors.black.withOpacity(.5),
),
)
], ],
), ),
), ),
...commands ...commands
.map( .map(
(c) => ListTile( (c) => ListTile(
leading: c.name == 'giphy' leading: c.name == 'giphy' ? _buildGiphyIcon() : null,
? CircleAvatar(
backgroundColor: Colors.black,
child: Image.asset(
'images/giphy_icon.png',
package: 'stream_chat_flutter',
width: 16.0,
height: 16.0,
),
maxRadius: 12.0,
)
: null,
title: Text.rich( title: Text.rich(
TextSpan( TextSpan(
text: '${c.name.capitalize()}', text: '${c.name.capitalize()}',
@@ -566,6 +598,31 @@ class MessageInputState extends State<MessageInput> {
}); });
} }
CircleAvatar _buildGiphyIcon() {
if (kIsWeb) {
return CircleAvatar(
backgroundColor: Colors.black,
child: Image.asset(
'images/giphy_icon.png',
package: 'stream_chat_flutter',
width: 24.0,
height: 24.0,
),
radius: 12,
);
} else {
return CircleAvatar(
child: SvgPicture.asset(
'svgs/giphy_icon.svg',
package: 'stream_chat_flutter',
width: 24.0,
height: 24.0,
),
radius: 12,
);
}
}
OverlayEntry _buildMentionsOverlayEntry() { OverlayEntry _buildMentionsOverlayEntry() {
final splits = textEditingController.text final splits = textEditingController.text
.substring(0, textEditingController.value.selection.start) .substring(0, textEditingController.value.selection.start)
@@ -606,13 +663,6 @@ 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(
spreadRadius: -8,
blurRadius: 5.0,
offset: Offset(0, -4),
),
],
color: StreamChatTheme.of(context).primaryColor, color: StreamChatTheme.of(context).primaryColor,
), ),
child: FutureBuilder<List<Member>>( child: FutureBuilder<List<Member>>(
@@ -625,6 +675,12 @@ class MessageInputState extends State<MessageInput> {
children: snapshot.data children: snapshot.data
.map((m) => ListTile( .map((m) => ListTile(
leading: UserAvatar( leading: UserAvatar(
constraints: BoxConstraints.tight(
Size(
40,
40,
),
),
user: m.user, user: m.user,
), ),
title: Text( title: Text(
pubspec.yaml
+3 -1
View File
@@ -15,6 +15,7 @@ dependencies:
photo_view: ^0.10.1 photo_view: ^0.10.1
rxdart: ^0.24.1 rxdart: ^0.24.1
jiffy: ^3.0.1 jiffy: ^3.0.1
flutter_svg: ^0.19.1
flutter_portal: ^0.3.0 flutter_portal: ^0.3.0
cached_network_image: ^2.2.0+1 cached_network_image: ^2.2.0+1
flutter_markdown: ^0.5.0 flutter_markdown: ^0.5.0
@@ -35,7 +36,8 @@ dependencies:
flutter: flutter:
assets: assets:
- images/giphy_icon.png - images/
- svgs/
fonts: fonts:
- family: stream-icons - family: stream-icons
fonts: fonts:
svgs/giphy_icon.svg
+8
View File
@@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="black"/>
<rect x="7" y="7" width="1" height="10" fill="#00FF99"/>
<rect x="16" y="10" width="1" height="8" fill="#9D34FF"/>
<rect x="7" y="6" width="7" height="1" fill="#FFFF9C"/>
<rect x="7" y="17" width="9" height="1" fill="#00CCFF"/>
<path d="M14 6H15V7.5H16V9H17V10H14V6Z" fill="#FF6666"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 527 B