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

Merge branch 'feature/new-ui' into feature/loading

Browse Source
This commit is contained in:
Salvatore Giordano
2020-11-20 11:42:54 +01:00
committed by GitHub
parent e021ea5cd6 e8664a747e
commit e9cd4613ef
9 changed files with 147 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+4
View File
@@ -1,3 +1,7 @@
## 0.2.13+1
- Use TextEditingController.addListener instead of TextField.onChanged
## 0.2.13
- Update llc dependency
README.md
+5
View File
@@ -55,6 +55,11 @@ We also use [video_player](https://pub.dev/packages/video_player) to reproduce v
To pick images from the camera, we use the [image_picker](https://pub.dev/packages/image_picker) plugin.
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
### Troubleshooting
It may happen that you have some problems building the app.
If it seems related to the [flutter file picker plugin](https://github.com/miguelpruivo/flutter_file_picker) make sure to check [this page](https://github.com/miguelpruivo/flutter_file_picker/wiki/Troubleshooting)
## Docs
### Business logic components
example/lib/advanced_options_page.dart
+4
View File
@@ -282,6 +282,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
}),
userToken,
);
if (!kIsWeb) {
initNotifications(client);
}
} catch (e) {
var errorText = 'Error connecting, retry';
if (e is Map) {
example/lib/main.dart
+3
View File
@@ -30,6 +30,9 @@ void main() async {
User(id: userId),
token,
);
if (!kIsWeb) {
initNotifications(client);
}
}
runApp(MyApp(client));
lib/src/media_list_view.dart
+1
View File
@@ -44,6 +44,7 @@ class _MediaListViewState extends State<MediaListView> {
placeholder: MemoryImage(kTransparentImage),
image: MediaThumbnailProvider(
media: media,
highQuality: true,
),
fit: BoxFit.cover,
),
lib/src/message_input.dart
+87 -95
View File
@@ -19,6 +19,7 @@ import 'package:stream_chat_flutter/src/media_list_view.dart';
import 'package:stream_chat_flutter/src/message_list_view.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/user_avatar.dart';
import 'package:stream_chat_flutter/src/video_thumbnail.dart';
import 'package:substring_highlight/substring_highlight.dart';
import '../stream_chat_flutter.dart';
@@ -41,6 +42,8 @@ enum DefaultAttachmentTypes {
file,
}
const _kMinMediaPickerSize = 360.0;
/// Inactive state
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/message_input.png)
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/message_input_paint.png)
@@ -182,7 +185,7 @@ class MessageInputState extends State<MessageInput> {
bool _sendAsDm = false;
bool _openFilePickerSection = false;
int _filePickerIndex = 0;
double _filePickerSize = 250.0;
double _filePickerSize = _kMinMediaPickerSize;
/// The editing controller passed to the input TextField
TextEditingController textEditingController;
@@ -363,27 +366,6 @@ class MessageInputState extends State<MessageInput> {
keyboardType: widget.keyboardType,
controller: textEditingController,
focusNode: _focusNode,
onChanged: (s) {
StreamChannel.of(context).channel.keyStroke();
setState(() {
_messageIsPresent = s.trim().isNotEmpty;
_actionsShrunk = s.trim().isNotEmpty;
});
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
_emojiOverlay?.remove();
_emojiOverlay = null;
_checkCommands(s, context);
_checkMentions(s, context);
_checkEmoji(s, context);
},
style: Theme.of(context).textTheme.bodyText2,
autofocus: false,
textAlignVertical: TextAlignVertical.center,
@@ -440,6 +422,28 @@ class MessageInputState extends State<MessageInput> {
);
}
void _onChanged(BuildContext context, String s) {
StreamChannel.of(context).channel.keyStroke();
setState(() {
_messageIsPresent = s.trim().isNotEmpty;
_actionsShrunk = s.trim().isNotEmpty;
});
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
_emojiOverlay?.remove();
_emojiOverlay = null;
_checkCommands(s.trim(), context);
_checkMentions(s, context);
_checkEmoji(s, context);
}
String _getHint() {
if (_commandEnabled && _chosenCommand.name == 'giphy') {
return 'Search GIFs';
@@ -451,14 +455,14 @@ class MessageInputState extends State<MessageInput> {
}
void _checkEmoji(String s, BuildContext context) {
if (textEditingController.selection.isCollapsed &&
(s.isNotEmpty && s[textEditingController.selection.start - 1] == ':' ||
textEditingController.text
.substring(
0,
textEditingController.selection.start,
)
.contains(':'))) {
if (s.isNotEmpty &&
textEditingController.selection.baseOffset > 0 &&
textEditingController.text
.substring(
0,
textEditingController.selection.baseOffset,
)
.contains(':')) {
final textToSelection = textEditingController.text
.substring(0, textEditingController.value.selection.start);
final splits = textToSelection.split(':');
@@ -478,13 +482,13 @@ class MessageInputState extends State<MessageInput> {
}
void _checkMentions(String s, BuildContext context) {
if (textEditingController.selection.isCollapsed &&
(s.isNotEmpty && s[textEditingController.selection.start - 1] == '@' ||
textEditingController.text
.substring(0, textEditingController.selection.start)
.split(' ')
.last
.contains('@'))) {
if (s.isNotEmpty &&
textEditingController.selection.baseOffset > 0 &&
textEditingController.text
.substring(0, textEditingController.selection.baseOffset)
.split(' ')
.last
.contains('@')) {
_mentionsOverlay = _buildMentionsOverlayEntry();
Overlay.of(context).insert(_mentionsOverlay);
}
@@ -654,9 +658,11 @@ class MessageInputState extends State<MessageInput> {
},
),
IconButton(
icon: Icon(
StreamIcons.camera,
size: 24,
icon: SvgPicture.asset(
'svgs/icon_camera.svg',
package: 'stream_chat_flutter',
height: 24,
width: 24,
color: _filePickerIndex == 2
? StreamChatTheme.of(context).accentColor
: Colors.black.withOpacity(0.5),
@@ -684,7 +690,7 @@ class MessageInputState extends State<MessageInput> {
setState(() {
_animateContainer = false;
_filePickerSize = (_filePickerSize - update.delta.dy).clamp(
240.0,
_kMinMediaPickerSize,
MediaQuery.of(context).size.height / 1.7,
);
});
@@ -753,9 +759,10 @@ class MessageInputState extends State<MessageInput> {
.any((element) => element.id == media.id)) {
_addAttachment(media);
} else {
_attachments
.removeWhere((element) => element.id == media.id);
setState(() {});
setState(() {
_attachments
.removeWhere((element) => element.id == media.id);
});
}
},
);
@@ -813,35 +820,7 @@ class MessageInputState extends State<MessageInput> {
}
void _addAttachment(Media medium) async {
final mediaFile = await medium.getFile();
final thumbBytes = await medium.getThumbnail();
final file = PlatformFile(
path: mediaFile.path,
bytes: mediaFile.readAsBytesSync(),
);
final thumbFile = PlatformFile(
bytes: thumbBytes,
name: '${file.name ?? file.path?.split('/')?.last}_thumbnail.jpeg',
);
setState(() {
_inputEnabled = true;
});
if (file == null) {
return;
}
final channel = StreamChannel.of(context).channel;
final attachment = _SendingAttachment(
file: file,
thumbFile: thumbFile,
attachment: Attachment(
localUri: file.path != null ? Uri.parse(file.path) : null,
type: medium.mediaType == MediaType.image ? 'image' : 'video',
),
id: medium.id,
);
@@ -849,11 +828,23 @@ class MessageInputState extends State<MessageInput> {
_attachments.add(attachment);
});
final thumbUrl = await _uploadImage(
thumbFile,
channel,
final mediaFile = await medium.getFile();
final file = PlatformFile(
path: mediaFile.path,
bytes: mediaFile.readAsBytesSync(),
);
final channel = StreamChannel.of(context).channel;
setState(() {
attachment
..file = file
..attachment = Attachment(
localUri: file.path != null ? Uri.parse(file.path) : null,
type: medium.mediaType == MediaType.image ? 'image' : 'video',
);
});
final url = await _uploadAttachment(
file,
medium.mediaType == MediaType.image
@@ -868,12 +859,10 @@ class MessageInputState extends State<MessageInput> {
if (fileType == DefaultAttachmentTypes.image) {
attachment.attachment = attachment.attachment.copyWith(
imageUrl: url,
thumbUrl: thumbUrl,
);
} else {
attachment.attachment = attachment.attachment.copyWith(
assetUrl: url,
thumbUrl: thumbUrl,
);
}
@@ -1221,6 +1210,10 @@ class MessageInputState extends State<MessageInput> {
);
}
if (attachment.attachment == null) {
return SizedBox();
}
switch (attachment.attachment.type) {
case 'image':
case 'giphy':
@@ -1230,22 +1223,20 @@ class MessageInputState extends State<MessageInput> {
fit: BoxFit.cover,
)
: Image.network(
attachment.attachment.imageUrl ??
attachment.attachment.thumbUrl,
attachment.attachment.imageUrl,
fit: BoxFit.cover,
);
break;
case 'video':
return Stack(
children: [
Container(
child: attachment.thumbFile != null
? Image.memory(
attachment.thumbFile.bytes,
fit: BoxFit.cover,
)
: Icon(Icons.videocam),
color: Colors.black26,
Positioned.fill(
child: Container(
child: VideoThumbnail(
file: File(
attachment.file.path,
)),
),
),
Positioned(
left: 8,
@@ -1314,7 +1305,7 @@ class MessageInputState extends State<MessageInput> {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = 250.0;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
final status = await (Platform.isAndroid
@@ -1450,6 +1441,9 @@ class MessageInputState extends State<MessageInput> {
} else if (fileType == DefaultAttachmentTypes.video) {
pickedFile = await _imagePicker.getVideo(source: ImageSource.camera);
}
if (pickedFile == null) {
return;
}
final bytes = await pickedFile.readAsBytes();
file = PlatformFile(
path: pickedFile.path,
@@ -1718,11 +1712,7 @@ class MessageInputState extends State<MessageInput> {
if (!kIsWeb) {
_keyboardListener = KeyboardVisibility.onChange.listen((visible) {
if (visible) {
_checkCommands(textEditingController.text, context);
_checkMentions(textEditingController.text, context);
_checkEmoji(textEditingController.text, context);
}
_onChanged(context, textEditingController.text);
});
}
@@ -1732,6 +1722,10 @@ class MessageInputState extends State<MessageInput> {
_parseExistingMessage(widget.editMessage ?? widget.initialMessage);
}
textEditingController.addListener(() {
_onChanged(context, textEditingController.text);
});
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
_openFilePickerSection = false;
@@ -1774,14 +1768,12 @@ class MessageInputState extends State<MessageInput> {
class _SendingAttachment {
PlatformFile file;
PlatformFile thumbFile;
Attachment attachment;
bool uploaded;
String id;
_SendingAttachment({
this.file,
this.thumbFile,
this.attachment,
this.uploaded = false,
this.id,
lib/src/video_thumbnail.dart
+37
View File
@@ -0,0 +1,37 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class VideoThumbnail extends StatefulWidget {
final File file;
const VideoThumbnail({
Key key,
@required this.file,
}) : super(key: key);
@override
_VideoThumbnailState createState() => _VideoThumbnailState();
}
class _VideoThumbnailState extends State<VideoThumbnail> {
VideoPlayerController _videoPlayerController;
@override
Widget build(BuildContext context) {
return VideoPlayer(_videoPlayerController);
}
@override
void initState() {
_videoPlayerController = VideoPlayerController.file(widget.file)
..initialize();
super.initState();
}
@override
void dispose() {
_videoPlayerController.dispose();
super.dispose();
}
}
pubspec.yaml
+3 -2
View File
@@ -1,7 +1,7 @@
name: stream_chat_flutter
homepage: https://github.com/GetStream/stream-chat-flutter
description: Stream Chat official Flutter SDK. Build your own chat experience using Dart and Flutter.
version: 0.2.13
version: 0.2.13+1
repository: https://github.com/GetStream/stream-chat-flutter
issue_tracker: https://github.com/GetStream/stream-chat-flutter/issues
@@ -36,7 +36,8 @@ dependencies:
flutter_slidable: ^0.5.4
carousel_slider: ^2.2.1
clipboard: ^0.1.2+8
media_gallery: ^0.1.5
media_gallery:
git: https://github.com/imtoori/media_gallery.git
permission_handler: ^5.0.1+1
transparent_image: ^1.0.0
svgs/icon_camera.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3H9L7 5H3C2.44771 5 2 5.44772 2 6V20C2 20.5523 2.44771 21 3 21H21C21.5523 21 22 20.5523 22 20V6C22 5.44772 21.5523 5 21 5H17L15 3ZM7.828 7L9.828 5H14.172L16.172 7H20V19H4V7H7.828ZM12 18C8.96243 18 6.5 15.5376 6.5 12.5C6.5 9.46243 8.96243 7 12 7C15.0376 7 17.5 9.46243 17.5 12.5C17.5 15.5376 15.0376 18 12 18ZM15.5 12.5C15.5 14.433 13.933 16 12 16C10.067 16 8.5 14.433 8.5 12.5C8.5 10.567 10.067 9 12 9C13.933 9 15.5 10.567 15.5 12.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 606 B