Merge pull request #465 from GetStream/swipe-actions
feat: Swipe actions
This commit is contained in:
@@ -12,6 +12,9 @@ import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
|
||||
/// Callback called when tapping on a channel
|
||||
typedef ChannelTapCallback = void Function(Channel, Widget?);
|
||||
|
||||
/// Callback called when tapping on a channel
|
||||
typedef ChannelInfoCallback = void Function(Channel);
|
||||
|
||||
/// Builder used to create a custom [ChannelPreview] from a [Channel]
|
||||
typedef ChannelPreviewBuilder = Widget Function(BuildContext, Channel);
|
||||
|
||||
@@ -78,6 +81,9 @@ class ChannelListView extends StatefulWidget {
|
||||
this.emptyBuilder,
|
||||
this.loadingBuilder,
|
||||
this.listBuilder,
|
||||
this.onMoreDetailsPressed,
|
||||
this.onDeletePressed,
|
||||
this.swipeActions,
|
||||
}) : super(key: key);
|
||||
|
||||
/// If true a default swipe to action behaviour will be added to this widget
|
||||
@@ -158,6 +164,15 @@ class ChannelListView extends StatefulWidget {
|
||||
/// The builder used when the channel list is empty.
|
||||
final WidgetBuilder? emptyBuilder;
|
||||
|
||||
/// Callback used when the more details slidable option is pressed
|
||||
final ChannelInfoCallback? onMoreDetailsPressed;
|
||||
|
||||
/// Callback used when the delete slidable option is pressed
|
||||
final ChannelInfoCallback? onDeletePressed;
|
||||
|
||||
/// List of actions for slidable
|
||||
final List<SwipeAction>? swipeActions;
|
||||
|
||||
@override
|
||||
_ChannelListViewState createState() => _ChannelListViewState();
|
||||
}
|
||||
@@ -465,61 +480,79 @@ class _ChannelListViewState extends State<ChannelListView> {
|
||||
enabled: widget.swipeToAction,
|
||||
actionPane: const SlidableBehindActionPane(),
|
||||
actionExtentRatio: 0.12,
|
||||
secondaryActions: <Widget>[
|
||||
IconSlideAction(
|
||||
color: backgroundColor,
|
||||
icon: Icons.more_horiz,
|
||||
onTap: () {
|
||||
showModalBottomSheet(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(32),
|
||||
topRight: Radius.circular(32),
|
||||
),
|
||||
),
|
||||
context: context,
|
||||
builder: (context) => StreamChannel(
|
||||
channel: channel,
|
||||
child: ChannelBottomSheet(
|
||||
onViewInfoTap: () {
|
||||
widget.onViewInfoTap?.call(channel);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
if ([
|
||||
'admin',
|
||||
'owner',
|
||||
].contains(channel.state!.members
|
||||
.firstWhereOrNull(
|
||||
(m) => m.userId == channel.client.state.user?.id)
|
||||
?.role))
|
||||
IconSlideAction(
|
||||
color: backgroundColor,
|
||||
iconWidget: StreamSvgIcon.delete(
|
||||
color: chatThemeData.colorTheme.accentRed,
|
||||
secondaryActions: widget.swipeActions
|
||||
?.map((e) => IconSlideAction(
|
||||
color: e.color,
|
||||
iconWidget: e.iconWidget,
|
||||
onTap: () {
|
||||
e.onTap?.call(channel);
|
||||
},
|
||||
))
|
||||
.toList() ??
|
||||
<Widget>[
|
||||
IconSlideAction(
|
||||
color: backgroundColor,
|
||||
icon: Icons.more_horiz,
|
||||
onTap: widget.onMoreDetailsPressed != null
|
||||
? () {
|
||||
widget.onMoreDetailsPressed!(channel);
|
||||
}
|
||||
: () {
|
||||
showModalBottomSheet(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(32),
|
||||
topRight: Radius.circular(32),
|
||||
),
|
||||
),
|
||||
context: context,
|
||||
builder: (context) => StreamChannel(
|
||||
channel: channel,
|
||||
child: ChannelBottomSheet(
|
||||
onViewInfoTap: () {
|
||||
widget.onViewInfoTap?.call(channel);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
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(
|
||||
if ([
|
||||
'admin',
|
||||
'owner',
|
||||
].contains(channel.state!.members
|
||||
.firstWhereOrNull(
|
||||
(m) => m.userId == channel.client.state.user?.id)
|
||||
?.role))
|
||||
IconSlideAction(
|
||||
color: backgroundColor,
|
||||
iconWidget: StreamSvgIcon.delete(
|
||||
color: chatThemeData.colorTheme.accentRed,
|
||||
),
|
||||
);
|
||||
if (res == true) {
|
||||
await channel.delete();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
onTap: widget.onDeletePressed != null
|
||||
? () {
|
||||
widget.onDeletePressed!(channel);
|
||||
}
|
||||
: () async {
|
||||
final res = await showConfirmationDialog(
|
||||
context,
|
||||
title: 'Delete Conversation',
|
||||
okText: 'DELETE',
|
||||
question:
|
||||
// ignore: lines_longer_than_80_chars
|
||||
'Are you sure you want to delete this conversation?',
|
||||
cancelText: 'CANCEL',
|
||||
icon: StreamSvgIcon.delete(
|
||||
color: chatThemeData.colorTheme.accentRed,
|
||||
),
|
||||
);
|
||||
if (res == true) {
|
||||
await channel.delete();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
child: Container(
|
||||
color: chatThemeData.colorTheme.whiteSnow,
|
||||
child: widget.channelPreviewBuilder?.call(context, channel) ??
|
||||
@@ -640,3 +673,22 @@ class _ChannelListViewState extends State<ChannelListView> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Class for slidable action
|
||||
class SwipeAction {
|
||||
/// Constructor for creating [SwipeAction]
|
||||
SwipeAction({
|
||||
this.color,
|
||||
required this.iconWidget,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
/// Background color of action
|
||||
Color? color;
|
||||
|
||||
/// Widget to display as icon
|
||||
Widget iconWidget;
|
||||
|
||||
/// Callback when icon is tapped
|
||||
ChannelInfoCallback? onTap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user