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

fix: Added modals instead

Browse Source
This commit is contained in:
Deven Joshi
2021-01-11 21:22:32 +05:30
parent 7b32379d07
commit c987066329
2 changed files with 216 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_actions_modal.dart
+144 -300
View File
@@ -1,4 +1,3 @@
import 'dart:math';
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
@@ -9,6 +8,7 @@ import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/reaction_picker.dart'; import 'package:stream_chat_flutter/src/reaction_picker.dart';
import 'package:stream_chat_flutter/src/stream_channel.dart'; import 'package:stream_chat_flutter/src/stream_channel.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/utils.dart';
import 'message_input.dart'; import 'message_input.dart';
import 'message_widget.dart'; import 'message_widget.dart';
@@ -64,21 +64,9 @@ class MessageActionsModal extends StatefulWidget {
} }
class _MessageActionsModalState extends State<MessageActionsModal> { class _MessageActionsModalState extends State<MessageActionsModal> {
ActionsModalState state = ActionsModalState.modal;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
switch (state) { return _showMessageOptionsModal();
case ActionsModalState.modal:
return _showMessageOptionsModal();
break;
case ActionsModalState.confirmDialog:
return _showFlagDialog();
break;
case ActionsModalState.dismissMessage:
return _showDismissAlert();
break;
}
} }
Widget _showMessageOptionsModal() { Widget _showMessageOptionsModal() {
@@ -254,296 +242,154 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
); );
} }
Widget _showFlagDialog() { void _showFlagDialog() async {
return TweenAnimationBuilder<double>( final client = StreamChat.of(context).client;
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300), var answer = await showConfirmationDialog(context,
curve: Curves.easeInOut, title: 'Flag Message',
builder: (context, value, _) { icon: StreamSvgIcon.flag(
return GestureDetector( color: StreamChatTheme.of(context).colorTheme.accentRed,
behavior: HitTestBehavior.translucent, size: 24.0,
onTap: () => Navigator.maybePop(context), ),
child: Stack( question:
children: [ 'Do you want to send a copy of this message to a\nmoderator for further investigation?',
Positioned.fill( okText: 'FLAG',
child: BackdropFilter( cancelText: 'CANCEL');
filter: ImageFilter.blur(
sigmaX: 10, if (answer) {
sigmaY: 10, try {
), await client.flagMessage(widget.message.id);
child: Container( _showDismissAlert();
color: StreamChatTheme.of(context).colorTheme.overlay, } catch (err) {
), _showErrorAlert();
), }
), } else {
Transform.scale( Navigator.pop(context);
scale: value, }
child: Center(
child: Opacity(
opacity: 0.9,
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
clipBehavior: Clip.antiAlias,
child: Container(
width: 270.0,
height: 156.0,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 19.0,
),
Text(
'Flag Message',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold
.copyWith(fontSize: 17.0),
),
SizedBox(
height: 4.0,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0),
child: Text(
'Do you want to send a copy of this \nmessage to a moderator for further \ninvestigation?',
style: TextStyle(fontSize: 13.5),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 21.0,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Center(
child: InkWell(
child: Container(
height: 44.0,
alignment: Alignment.center,
child: Text(
'Cancel',
style: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(
fontSize: 17.0,
color: StreamChatTheme.of(
context)
.colorTheme
.accentBlue),
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: StreamChatTheme.of(
context)
.colorTheme
.grey
.withOpacity(0.8)),
right: BorderSide(
color: StreamChatTheme.of(
context)
.colorTheme
.grey
.withOpacity(0.8)),
),
),
),
onTap: () {
setState(() {
state = ActionsModalState.modal;
});
},
),
),
),
Expanded(
child: Center(
child: InkWell(
child: Container(
height: 44.0,
alignment: Alignment.center,
child: Text(
'Flag',
style: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(
fontWeight: FontWeight.bold,
fontSize: 17.0,
color: StreamChatTheme.of(
context)
.colorTheme
.accentBlue),
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: StreamChatTheme.of(
context)
.colorTheme
.grey
.withOpacity(0.8)),
),
),
),
onTap: () {
setState(() {
state = ActionsModalState
.dismissMessage;
});
final client =
StreamChat.of(context).client;
client.flagMessage(widget.message.id);
},
),
),
),
],
),
],
),
),
),
),
),
),
],
),
);
});
} }
Widget _showDismissAlert() { void _showDismissAlert() {
return TweenAnimationBuilder<double>( showModalBottomSheet(
key: GlobalKey(), backgroundColor: StreamChatTheme.of(context).colorTheme.white,
tween: Tween(begin: 0.0, end: 1.0), context: context,
duration: Duration(milliseconds: 300), shape: RoundedRectangleBorder(
curve: Curves.easeInOut, borderRadius: BorderRadius.only(
builder: (context, value, _) { topLeft: Radius.circular(16.0),
return GestureDetector( topRight: Radius.circular(16.0),
behavior: HitTestBehavior.translucent, )),
onTap: () => Navigator.maybePop(context), builder: (context) {
child: Stack( return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 26.0,
),
StreamSvgIcon.flag(
color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0,
),
SizedBox(
height: 26.0,
),
Text(
'Message flagged',
style: StreamChatTheme.of(context).textTheme.headlineBold,
),
SizedBox(
height: 7.0,
),
Text('The message has been reported to a moderator.'),
SizedBox(
height: 36.0,
),
Container(
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Positioned.fill( FlatButton(
child: BackdropFilter( child: Text(
filter: ImageFilter.blur( 'OK',
sigmaX: 10, style: TextStyle(
sigmaY: 10, color:
), StreamChatTheme.of(context).colorTheme.accentBlue,
child: Container( fontWeight: FontWeight.w400),
color: StreamChatTheme.of(context).colorTheme.overlay,
),
),
),
Transform.scale(
scale: value,
child: Center(
child: Opacity(
opacity: 0.9,
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
clipBehavior: Clip.antiAlias,
child: Container(
width: 270.0,
height: 156.0,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 19.0,
),
Text(
'Message Flagged',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold
.copyWith(fontSize: 17.0),
),
SizedBox(
height: 4.0,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0),
child: Text(
'This message has been reported to a\nmoderator.',
style: TextStyle(fontSize: 13.5),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 21.0,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Center(
child: InkWell(
child: Container(
height: 44.0,
alignment: Alignment.center,
child: Text(
'Dismiss',
style: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(
fontWeight: FontWeight.bold,
fontSize: 17.0,
color: StreamChatTheme.of(
context)
.colorTheme
.accentBlue),
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: StreamChatTheme.of(
context)
.colorTheme
.grey
.withOpacity(0.8)),
),
),
),
onTap: () {
setState(() {
state = ActionsModalState.modal;
});
},
),
),
),
],
),
],
),
),
),
),
), ),
onPressed: () {
Navigator.of(context).pop();
},
), ),
], ],
), ),
); ],
}); );
},
);
}
void _showErrorAlert() {
showModalBottomSheet(
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
)),
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 26.0,
),
StreamSvgIcon.error(
color: StreamChatTheme.of(context).colorTheme.accentRed,
size: 24.0,
),
SizedBox(
height: 26.0,
),
Text(
'Something went wrong',
style: StreamChatTheme.of(context).textTheme.headlineBold,
),
SizedBox(
height: 7.0,
),
Text('The operation couldn\'t be completed.'),
SizedBox(
height: 36.0,
),
Container(
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text(
'OK',
style: TextStyle(
color:
StreamChatTheme.of(context).colorTheme.accentBlue,
fontWeight: FontWeight.w400),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
],
);
},
);
} }
Widget _buildReplyButton(BuildContext context) { Widget _buildReplyButton(BuildContext context) {
@@ -586,9 +432,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
], ],
), ),
onTap: () { onTap: () {
setState(() { _showFlagDialog();
state = ActionsModalState.confirmDialog;
});
}, },
); );
} }
lib/src/utils.dart
+72 -1
View File
@@ -75,7 +75,7 @@ Future<bool> showConfirmationDialog(
fontWeight: FontWeight.w400), fontWeight: FontWeight.w400),
), ),
onPressed: () { onPressed: () {
Navigator.of(context).pop(); Navigator.of(context).pop(false);
}, },
), ),
FlatButton( FlatButton(
@@ -95,6 +95,77 @@ Future<bool> showConfirmationDialog(
}); });
} }
Future<bool> showInfoDialog(
BuildContext context, {
String title,
Widget icon,
String question,
String okText,
StreamChatThemeData theme,
}) {
return showModalBottomSheet(
backgroundColor:
theme.colorTheme.white ?? StreamChatTheme.of(context).colorTheme.white,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
)),
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 26.0,
),
if (icon != null) icon,
SizedBox(
height: 26.0,
),
Text(
title,
style: theme.textTheme.headlineBold ??
StreamChatTheme.of(context).textTheme.headlineBold,
),
SizedBox(
height: 7.0,
),
Text(question),
SizedBox(
height: 36.0,
),
Container(
color: theme.colorTheme.black.withOpacity(.08) ??
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
child: Text(
okText,
style: TextStyle(
color: theme.colorTheme.black.withOpacity(0.5) ??
StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
fontWeight: FontWeight.w400),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
],
);
},
);
}
/// Get random png with initials /// Get random png with initials
String getRandomPicUrl(User user) => String getRandomPicUrl(User user) =>
'https://getstream.io/random_png/?id=${user.id}&name=${user.name}'; 'https://getstream.io/random_png/?id=${user.id}&name=${user.name}';