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

fix tutorial examples

Browse Source
This commit is contained in:
Salvatore Giordano
2021-01-22 15:24:19 +01:00
parent ce2db23ffb
commit 6035f177f9
8 changed files with 147 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/flutter_widgets/example/lib/custom_theme.dart
+3 -2
View File
@@ -41,11 +41,12 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final themeData = ThemeData(primarySwatch: Colors.green); final themeData = ThemeData(primarySwatch: Colors.green);
final defaultTheme = StreamChatThemeData.fromTheme(themeData); final defaultTheme = StreamChatThemeData.fromTheme(themeData);
final colorTheme = defaultTheme.colorTheme;
final customTheme = defaultTheme.merge(StreamChatThemeData( final customTheme = defaultTheme.merge(StreamChatThemeData(
ownMessageTheme: MessageTheme( ownMessageTheme: MessageTheme(
messageBackgroundColor: StreamChatTheme.of(context).colorTheme.black, messageBackgroundColor: colorTheme.black,
messageText: TextStyle( messageText: TextStyle(
color: StreamChatTheme.of(context).colorTheme.white, color: colorTheme.white,
), ),
avatarTheme: AvatarTheme( avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
packages/flutter_widgets/example/lib/customize_channel_preview.dart
+11
View File
@@ -80,6 +80,17 @@ class ChannelListPage extends StatelessWidget {
final opacity = channel.state.unreadCount > .0 ? 1.0 : 0.5; final opacity = channel.state.unreadCount > .0 ? 1.0 : 0.5;
return ListTile( return ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => StreamChannel(
child: ChannelPage(),
channel: channel,
),
),
);
},
leading: ChannelImage( leading: ChannelImage(
channel: channel, channel: channel,
), ),
packages/flutter_widgets/example/lib/customize_message_widget.dart
+5 -2
View File
@@ -97,7 +97,7 @@ class ChannelPage extends StatelessWidget {
List<Message> messages, List<Message> messages,
) { ) {
final message = details.message; final message = details.message;
final color = details.isMyMessage ? Colors.blueGrey : Colors.blue; final color = details.isMyMessage ? Colors.red : Colors.blue;
if (message.isSystem) { if (message.isSystem) {
return SizedBox(); return SizedBox();
} }
@@ -110,7 +110,10 @@ class ChannelPage extends StatelessWidget {
color: color, color: color,
width: 2, width: 2,
), ),
padding: const EdgeInsets.all(2), padding: const EdgeInsets.symmetric(
vertical: 2,
horizontal: 4,
),
attachmentBorderSide: BorderSide( attachmentBorderSide: BorderSide(
color: color, color: color,
width: 2, width: 2,
packages/flutter_widgets/lib/src/channel_list_view.dart
+80 -106
View File
@@ -529,123 +529,97 @@ class _ChannelListViewState extends State<ChannelListView>
}; };
} }
final backgroundColor = StreamChatTheme.of(context).colorTheme.whiteSmoke;
return StreamChannel( return StreamChannel(
key: ValueKey<String>('CHANNEL-${channel.id}'), key: ValueKey<String>('CHANNEL-${channel.id}'),
channel: channel, channel: channel,
child: Builder( child: Builder(
builder: (context) { builder: (context) {
Widget child; return Slidable(
if (widget.channelPreviewBuilder != null) { controller: _slideController,
child = Stack( enabled: widget.swipeToAction,
children: [ actionPane: SlidableBehindActionPane(),
widget.channelPreviewBuilder( actionExtentRatio: 0.12,
context, closeOnScroll: true,
channel, secondaryActions: <Widget>[
), IconSlideAction(
Positioned.fill( color: backgroundColor,
child: Material( icon: Icons.more_horiz,
color: Colors.transparent, onTap: () {
child: InkWell( showModalBottomSheet(
onTap: () { clipBehavior: Clip.hardEdge,
onTap(channel, widget.channelWidget); shape: RoundedRectangleBorder(
}, borderRadius: BorderRadius.only(
onLongPress: widget.onChannelLongPress != null topLeft: Radius.circular(32),
? () { topRight: Radius.circular(32),
widget.onChannelLongPress(channel); ),
}
: null,
), ),
), context: context,
), builder: (context) {
], return StreamChannel(
); child: ChannelBottomSheet(
} else { onViewInfoTap: () {
final backgroundColor = widget.onViewInfoTap(channel);
StreamChatTheme.of(context).colorTheme.whiteSmoke; },
child = Slidable( ),
controller: _slideController, channel: channel,
enabled: widget.swipeToAction, );
actionPane: SlidableBehindActionPane(), },
actionExtentRatio: 0.12, );
closeOnScroll: true, },
secondaryActions: <Widget>[ ),
if ([
'admin',
'owner',
].contains(channel.state.members
.firstWhere((m) => m.userId == channel.client.state.user.id,
orElse: () => null)
?.role))
IconSlideAction( IconSlideAction(
color: backgroundColor, color: backgroundColor,
icon: Icons.more_horiz, iconWidget: StreamSvgIcon.delete(
onTap: () { color: StreamChatTheme.of(context).colorTheme.accentRed,
showModalBottomSheet(
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
),
context: context,
builder: (context) {
return StreamChannel(
child: ChannelBottomSheet(
onViewInfoTap: () {
widget.onViewInfoTap(channel);
},
),
channel: channel,
);
},
);
},
),
if ([
'admin',
'owner',
].contains(channel.state.members
.firstWhere(
(m) => m.userId == channel.client.state.user.id,
orElse: () => null)
?.role))
IconSlideAction(
color: backgroundColor,
iconWidget: StreamSvgIcon.delete(
color: StreamChatTheme.of(context).colorTheme.accentRed,
),
onTap: () async {
final res = await showConfirmationDialog(
context,
title: 'Delete Conversation',
okText: 'DELETE',
question:
'Are you sure you want to delete this conversation?',
cancelText: 'CANCEL',
icon: StreamSvgIcon.delete(
color: StreamChatTheme.of(context)
.colorTheme
.accentRed,
),
);
if (res == true) {
await channel.delete();
}
},
), ),
], onTap: () async {
child: Container( final res = await showConfirmationDialog(
color: StreamChatTheme.of(context).colorTheme.whiteSnow, context,
child: ChannelPreview( title: 'Delete Conversation',
onLongPress: widget.onChannelLongPress, okText: 'DELETE',
channel: channel, question:
onImageTap: widget.onImageTap != null 'Are you sure you want to delete this conversation?',
? () { cancelText: 'CANCEL',
widget.onImageTap(channel); icon: StreamSvgIcon.delete(
} color:
: null, StreamChatTheme.of(context).colorTheme.accentRed,
onTap: (channel) { ),
onTap(channel, widget.channelWidget); );
if (res == true) {
await channel.delete();
}
}, },
), ),
), ],
); child: Container(
} color: StreamChatTheme.of(context).colorTheme.whiteSnow,
return child; child: widget.channelPreviewBuilder != null
? widget.channelPreviewBuilder(
context,
channel,
)
: ChannelPreview(
onLongPress: widget.onChannelLongPress,
channel: channel,
onImageTap: widget.onImageTap != null
? () {
widget.onImageTap(channel);
}
: null,
onTap: (channel) {
onTap(channel, widget.channelWidget);
},
),
),
);
}, },
), ),
); );
packages/flutter_widgets/lib/src/file_attachment.dart
+3 -3
View File
@@ -41,7 +41,7 @@ class _FileAttachmentState extends State<FileAttachment> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
if (MediaUtils.getMimeType(widget.attachment.title).type == 'video') { if (MediaUtils.getMimeType(widget.attachment.title)?.type == 'video') {
if (widget.attachmentType == FileAttachmentType.online) { if (widget.attachmentType == FileAttachmentType.online) {
_controller = VideoPlayerController.network( _controller = VideoPlayerController.network(
widget.attachment.assetUrl, widget.attachment.assetUrl,
@@ -128,7 +128,7 @@ class _FileAttachmentState extends State<FileAttachment> {
} }
Widget _getFileTypeImage() { Widget _getFileTypeImage() {
if ((MediaUtils.getMimeType(widget.attachment.title).type == 'image')) { if ((MediaUtils.getMimeType(widget.attachment.title)?.type == 'image')) {
switch (widget.attachmentType) { switch (widget.attachmentType) {
case FileAttachmentType.local: case FileAttachmentType.local:
return Image.memory( return Image.memory(
@@ -165,7 +165,7 @@ class _FileAttachmentState extends State<FileAttachment> {
} }
} }
if ((MediaUtils.getMimeType(widget.attachment.title).type == 'video')) { if ((MediaUtils.getMimeType(widget.attachment.title)?.type == 'video')) {
switch (widget.attachmentType) { switch (widget.attachmentType) {
case FileAttachmentType.local: case FileAttachmentType.local:
return FutureBuilder<File>( return FutureBuilder<File>(
packages/flutter_widgets/lib/src/message_widget.dart
+20 -11
View File
@@ -159,8 +159,8 @@ class MessageWidget extends StatefulWidget {
this.showReactionPickerIndicator = false, this.showReactionPickerIndicator = false,
this.showUserAvatar = DisplayWidget.show, this.showUserAvatar = DisplayWidget.show,
this.showSendingIndicator = true, this.showSendingIndicator = true,
this.showThreadReplyIndicator = true, this.showThreadReplyIndicator = false,
this.showInChannelIndicator = true, this.showInChannelIndicator = false,
this.onReplyTap, this.onReplyTap,
this.onThreadTap, this.onThreadTap,
this.showUsername = true, this.showUsername = true,
@@ -371,15 +371,24 @@ class _MessageWidgetState extends State<MessageWidget> {
alignment: Alignment.center, alignment: Alignment.center,
transform: Matrix4.rotationY( transform: Matrix4.rotationY(
widget.reverse ? pi : 0), widget.reverse ? pi : 0),
child: DeletedMessage( child: Container(
reverse: widget.reverse, margin: EdgeInsets.symmetric(
borderRadiusGeometry: widget horizontal:
.borderRadiusGeometry, widget.showUserAvatar ==
borderSide: DisplayWidget
widget.borderSide, .gone
shape: widget.shape, ? 0
messageTheme: : 4.0),
widget.messageTheme, child: DeletedMessage(
reverse: widget.reverse,
borderRadiusGeometry: widget
.borderRadiusGeometry,
borderSide:
widget.borderSide,
shape: widget.shape,
messageTheme:
widget.messageTheme,
),
), ),
) )
: Card( : Card(
packages/flutter_widgets/lib/src/reaction_bubble.dart
+1 -1
View File
@@ -67,7 +67,7 @@ class ReactionBubble extends StatelessWidget {
children: [ children: [
if (constraints.maxWidth < double.infinity) if (constraints.maxWidth < double.infinity)
...reactions ...reactions
.take((constraints.maxWidth) ~/ 22) .take((constraints.maxWidth) ~/ 24)
.map((reaction) { .map((reaction) {
return _buildReaction( return _buildReaction(
reactionIcons, reactionIcons,
packages/flutter_widgets/lib/src/stream_chat_theme.dart
+24 -35
View File
@@ -45,9 +45,6 @@ class StreamChatThemeData {
/// The text themes used in the widgets /// The text themes used in the widgets
final TextTheme textTheme; final TextTheme textTheme;
/// The button themes used in the widgets
final ButtonThemeData buttonTheme;
/// The text themes used in the widgets /// The text themes used in the widgets
final ColorTheme colorTheme; final ColorTheme colorTheme;
@@ -78,7 +75,6 @@ class StreamChatThemeData {
/// Create a theme from scratch /// Create a theme from scratch
const StreamChatThemeData({ const StreamChatThemeData({
this.textTheme, this.textTheme,
this.buttonTheme,
this.colorTheme, this.colorTheme,
this.channelPreviewTheme, this.channelPreviewTheme,
this.channelTheme, this.channelTheme,
@@ -93,24 +89,20 @@ class StreamChatThemeData {
/// Create a theme from a Material [Theme] /// Create a theme from a Material [Theme]
factory StreamChatThemeData.fromTheme(ThemeData theme) { factory StreamChatThemeData.fromTheme(ThemeData theme) {
final defaultTheme = getDefaultTheme(theme); final defaultTheme = getDefaultTheme(theme);
final customizedTheme = StreamChatThemeData( final customizedTheme = StreamChatThemeData.fromColorAndTextTheme(
primaryIconTheme: theme.primaryIconTheme, defaultTheme.colorTheme.copyWith(
ownMessageTheme: MessageTheme( accentBlue: theme.accentColor,
replies: TextStyle(color: theme.accentColor),
messageLinks: TextStyle(color: theme.accentColor),
), ),
otherMessageTheme: MessageTheme( defaultTheme.textTheme,
replies: TextStyle(color: theme.accentColor), ).copyWith(
messageLinks: TextStyle(color: theme.accentColor), // primaryIconTheme: theme.primaryIconTheme,
), );
);
return defaultTheme.merge(customizedTheme) ?? customizedTheme; return defaultTheme.merge(customizedTheme) ?? customizedTheme;
} }
/// Creates a copy of [StreamChatThemeData] with specified attributes overridden. /// Creates a copy of [StreamChatThemeData] with specified attributes overridden.
StreamChatThemeData copyWith({ StreamChatThemeData copyWith({
TextTheme textTheme, TextTheme textTheme,
ButtonThemeData buttonTheme,
ColorTheme colorTheme, ColorTheme colorTheme,
ChannelPreviewTheme channelPreviewTheme, ChannelPreviewTheme channelPreviewTheme,
ChannelTheme channelTheme, ChannelTheme channelTheme,
@@ -123,7 +115,6 @@ class StreamChatThemeData {
}) => }) =>
StreamChatThemeData( StreamChatThemeData(
textTheme: textTheme ?? this.textTheme, textTheme: textTheme ?? this.textTheme,
buttonTheme: buttonTheme ?? this.buttonTheme,
colorTheme: colorTheme ?? this.colorTheme, colorTheme: colorTheme ?? this.colorTheme,
primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme, primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme,
defaultChannelImage: defaultChannelImage ?? this.defaultChannelImage, defaultChannelImage: defaultChannelImage ?? this.defaultChannelImage,
@@ -139,7 +130,6 @@ class StreamChatThemeData {
if (other == null) return this; if (other == null) return this;
return copyWith( return copyWith(
textTheme: textTheme?.merge(other.textTheme) ?? other.textTheme, textTheme: textTheme?.merge(other.textTheme) ?? other.textTheme,
buttonTheme: other.buttonTheme,
colorTheme: colorTheme?.merge(other.colorTheme) ?? other.colorTheme, colorTheme: colorTheme?.merge(other.colorTheme) ?? other.colorTheme,
primaryIconTheme: other.primaryIconTheme, primaryIconTheme: other.primaryIconTheme,
defaultChannelImage: other.defaultChannelImage, defaultChannelImage: other.defaultChannelImage,
@@ -157,26 +147,14 @@ class StreamChatThemeData {
); );
} }
/// Get the default Stream Chat theme static StreamChatThemeData fromColorAndTextTheme(
static StreamChatThemeData getDefaultTheme(ThemeData theme) { ColorTheme colorTheme,
final accentColor = Color(0xff006cff); TextTheme textTheme,
final isDark = theme.brightness == Brightness.dark; ) {
final textTheme = isDark ? TextTheme.dark() : TextTheme.light(); final accentColor = colorTheme.accentBlue;
final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light();
return StreamChatThemeData( return StreamChatThemeData(
textTheme: textTheme, textTheme: textTheme,
colorTheme: colorTheme, colorTheme: colorTheme,
buttonTheme: ButtonThemeData(
height: 48.0,
buttonColor: isDark ? Color(0xffffffff) : Color(0xff006aff),
textTheme: ButtonTextTheme.accent,
colorScheme: theme.colorScheme.copyWith(
secondary: isDark ? Color(0xff005eff) : Color(0xffffffff),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(26),
),
),
primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)), primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)),
defaultChannelImage: (context, channel) => SizedBox(), defaultChannelImage: (context, channel) => SizedBox(),
defaultUserImage: (context, user) => Center( defaultUserImage: (context, user) => Center(
@@ -204,7 +182,7 @@ class StreamChatThemeData {
), ),
indicatorIconSize: 16.0), indicatorIconSize: 16.0),
channelTheme: ChannelTheme( channelTheme: ChannelTheme(
messageInputButtonIconTheme: theme.iconTheme.copyWith( messageInputButtonIconTheme: IconThemeData(
color: accentColor, color: accentColor,
), ),
channelHeaderTheme: ChannelHeaderTheme( channelHeaderTheme: ChannelHeaderTheme(
@@ -291,6 +269,17 @@ class StreamChatThemeData {
], ],
); );
} }
/// Get the default Stream Chat theme
static StreamChatThemeData getDefaultTheme(ThemeData theme) {
final isDark = theme.brightness == Brightness.dark;
final textTheme = isDark ? TextTheme.dark() : TextTheme.light();
final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light();
return fromColorAndTextTheme(
colorTheme,
textTheme,
);
}
} }
enum TextThemeType { enum TextThemeType {