feat: Added image actions modal

2020-11-13 19:41:45 +05:30
parent 3ad6a25a82
commit 64ed2b2187
3 changed files with 215 additions and 46 deletions
@@ -0,0 +1,145 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../stream_chat_flutter.dart';
+import 'stream_icons.dart';
+
+class ImageActionsModal extends StatelessWidget {
+  final String userName;
+  final String sentAt;
+
+  ImageActionsModal({this.userName, this.sentAt});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: () {
+        Navigator.pop(context);
+      },
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    Colors.black.withOpacity(0.8),
+                    Colors.transparent,
+                  ],
+                  stops: [0.0, 0.4],
+                )
+              ),
+            )
+          ),
+          _buildPage(context),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildPage(context) {
+    return Material(
+      color: Colors.transparent,
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Container(
+                  width: 40.0,
+                ),
+              ),
+              Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8.0),
+                    child: Text(
+                      userName,
+                      style: TextStyle(
+                        fontSize: 16.0,
+                        fontWeight: FontWeight.w700,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ),
+                  Text(
+                    sentAt,
+                    style:
+                        StreamChatTheme.of(context).channelPreviewTheme.subtitle.copyWith(color: Colors.white.withOpacity(0.5)),
+                  ),
+                ],
+              ),
+              IconButton(
+                icon: Icon(
+                  StreamIcons.close,
+                  size: 24.0,
+                  color: Colors.white,
+                ),
+                onPressed: () {
+                  Navigator.pop(context);
+                },
+              ),
+            ],
+          ),
+          Align(
+            alignment: Alignment.centerRight,
+            child: Container(
+              width: MediaQuery.of(context).size.width / 1.8,
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Material(
+                  clipBehavior: Clip.hardEdge,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(16),
+                  ),
+                  color: Color(0xffe5e5e5),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: ListTile.divideTiles(
+                      context: context,
+                      tiles: [
+                        _buildButton(context, 'Reply', StreamIcons.curve_line_down_left, () {}),
+                        _buildButton(context, 'Show in Chat', StreamIcons.eye, () {}),
+                        _buildButton(context, 'Save Image', StreamIcons.save_1, () {}),
+                        _buildButton(context, 'Copy', StreamIcons.copy, () {}),
+                        _buildButton(context, 'Delete', StreamIcons.delete, () {}, color: Colors.red),
+                      ],
+                    ).toList(),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildButton(context, String title, IconData iconData, VoidCallback onTap, {Color color}) {
+    var titleStyle = TextStyle(
+      fontSize: 14.5,
+      color: Colors.black,
+      fontWeight: FontWeight.w500,
+    );
+
+    return ListTile(
+      dense: true,
+      title: Text(
+        title,
+        style: color == null ? titleStyle : titleStyle.copyWith(color: color),
+      ),
+      leading: Icon(
+        iconData,
+        color: color ?? StreamChatTheme.of(context).primaryIconTheme.color,
+        size: 24.0,
+      ),
+      onTap: onTap,
+    );
+  }
+}