feat: add GalleryHeader/GalleryFooter theme classes (#546)

* chore: Add ImageHeaderTheme and ImageHeaderThemeData to stream_chat_theme.dart This commit adds the following classes to `stream_chat_theme.dart`: 1. `ImageHeaderTheme`, an `InheritedTheme` widget that can wrap other widgets and provide that sub-tree with an `ImageHeaderThemeData` 2. `ImageHeaderThemeData`, a class that allows for the customization of `ImageHeader` widgets * Make ImageHeaderThemeData constructor const * test: initial ImageHeaderThemeData tests Tests the copyWith, ==, and hashcode functions * test: add tests for default ImageHeaderThemeData values Tests the default values of ImageHeaderThemeData that gets built in a StreamChatThemeData against control values. * Update test name and add comments describing control * fix: use ImageHeaderTheme.of(context) instead of StreamChatTheme.of(context) This ensures that ImageHeader will always look for the closest ImageHeaderThemeData in the widget tree. * test: add dark theme default values test * run dartfmt on test file * test: lerping between ImageHeaderThemeData Added tests that lerp from one ImageHeaderThemeData to another (light to dark and dark to light) * test: merging ImageHeaderThemeData Added tests that merge light and dark ImageHeaderThemeData together (light + dark = dark, dark + light = light) * test: add a half-lerp test Added a test that lerps halway between light and dark ImageHeaderThemeData * chore: Add ImageFooterTheme and ImageFooterThemeData to stream_chat_theme.dart This commit adds the following classes to `stream_chat_theme.dart`: 1. `ImageFooterTheme`, an `InheritedTheme` widget that can wrap other widgets and provide that sub-tree with an `ImageFooterThemeData` 2. `ImageFooterThemeData`, a class that allows for the customization of `ImageFooter` widget * chore: apply ImageFooterThemeData to image_footer.dart * fix: make ImageFooterThemeData constructor const * test: add tests for ImageFooterThemeData * add a missing trailing comma * chore: rename ImageHeader & ImageFooter to GalleryHeader and GalleryFooter The respective theme classes and tests have also been renamed * Run dartfmt on test * test: fix failing tests due to renaming
2021-07-15 15:44:12 +02:00
parent 6399e8f2db
commit 485e077596
8 changed files with 874 additions and 63 deletions
@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/attachment_actions_modal.dart';
+import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
+
+/// Header/AppBar widget for media display screen
+class GalleryHeader extends StatelessWidget implements PreferredSizeWidget {
+  /// Creates a channel header
+  const GalleryHeader({
+    Key? key,
+    required this.message,
+    this.currentIndex = 0,
+    this.showBackButton = true,
+    this.onBackPressed,
+    this.onShowMessage,
+    this.onTitleTap,
+    this.onImageTap,
+    this.userName = '',
+    this.sentAt = '',
+  })  : preferredSize = const Size.fromHeight(kToolbarHeight),
+        super(key: key);
+
+  /// True if this header shows the leading back button
+  final bool showBackButton;
+
+  /// Callback to call when pressing the back button.
+  /// By default it calls [Navigator.pop]
+  final VoidCallback? onBackPressed;
+
+  /// Callback to call when pressing the show message button.
+  final VoidCallback? onShowMessage;
+
+  /// Callback to call when the header is tapped.
+  final VoidCallback? onTitleTap;
+
+  /// Callback to call when the image is tapped.
+  final VoidCallback? onImageTap;
+
+  /// Message which attachments are attached to
+  final Message message;
+
+  /// Username of sender
+  final String userName;
+
+  /// Text which connotes the time the message was sent
+  final String sentAt;
+
+  /// Stores the current index of media shown
+  final int currentIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    final galleryHeaderThemeData = GalleryHeaderTheme.of(context);
+    return AppBar(
+      textTheme: Theme.of(context).textTheme,
+      brightness: Theme.of(context).brightness,
+      elevation: 1,
+      leading: showBackButton
+          ? IconButton(
+              icon: StreamSvgIcon.close(
+                color: galleryHeaderThemeData.closeButtonColor,
+                size: 24,
+              ),
+              onPressed: onBackPressed,
+            )
+          : const SizedBox(),
+      backgroundColor: galleryHeaderThemeData.backgroundColor,
+      actions: <Widget>[
+        if (message.type != 'ephemeral')
+          IconButton(
+            icon: StreamSvgIcon.iconMenuPoint(
+              color: galleryHeaderThemeData.iconMenuPointColor,
+            ),
+            onPressed: () {
+              _showMessageActionModalBottomSheet(context);
+            },
+          ),
+      ],
+      centerTitle: true,
+      title: message.type != 'ephemeral'
+          ? InkWell(
+              onTap: onTitleTap,
+              child: SizedBox(
+                height: preferredSize.height,
+                width: preferredSize.width,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  mainAxisSize: MainAxisSize.min,
+                  children: <Widget>[
+                    Text(
+                      userName,
+                      style: galleryHeaderThemeData.titleTextStyle,
+                    ),
+                    Text(
+                      sentAt,
+                      style: galleryHeaderThemeData.subtitleTextStyle,
+                    ),
+                  ],
+                ),
+              ),
+            )
+          : const SizedBox(),
+    );
+  }
+
+  @override
+  final Size preferredSize;
+
+  void _showMessageActionModalBottomSheet(BuildContext context) async {
+    final channel = StreamChannel.of(context).channel;
+    final galleryHeaderThemeData =
+        StreamChatTheme.of(context).galleryHeaderTheme;
+
+    final result = await showDialog(
+      useRootNavigator: false,
+      context: context,
+      barrierColor: galleryHeaderThemeData.bottomSheetBarrierColor,
+      builder: (context) => StreamChannel(
+        channel: channel,
+        child: AttachmentActionsModal(
+          message: message,
+          currentIndex: currentIndex,
+          onShowMessage: onShowMessage,
+        ),
+      ),
+    );
+
+    if (result != null) {
+      Navigator.pop(context, result);
+    }
+  }
+}