Merge pull request #18 from mkobuolys/feat/image-slide-theme

feat: add image slide theme

CHANGELOG.md

@@ -1,3 +1,7 @@
+# NEXT
+
+- feat: add `FlutterDeckImageSlideTheme`
+
 # 0.4.3
 
 - fix: `FlutterDeckSlideStepsBuilder` triggers builder on slide change

lib/src/templates/image_slide.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_deck/src/flutter_deck.dart';
 import 'package:flutter_deck/src/flutter_deck_layout.dart';
 import 'package:flutter_deck/src/templates/slide_base.dart';
-import 'package:flutter_deck/src/theme/flutter_deck_theme.dart';
+import 'package:flutter_deck/src/theme/templates/flutter_deck_image_slide_theme.dart';
 import 'package:flutter_deck/src/widgets/widgets.dart';
 
 /// A signature for a function that builds an image for a slide.
@@ -15,6 +15,8 @@ typedef ImageBuilder = Image Function(BuildContext context);
 /// and rendering the image using the provided [imageBuilder].
 ///
 /// To use a custom background, you can pass the [backgroundBuilder].
+///
+/// This template uses the [FlutterDeckImageSlideTheme] to style the slide.
 class FlutterDeckImageSlide extends StatelessWidget {
   /// Creates a new image slide.
   ///
@@ -40,6 +42,7 @@ class FlutterDeckImageSlide extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = FlutterDeckImageSlideTheme.of(context);
     final configuration = context.flutterDeck.configuration;
     final footerConfiguration = configuration.footer;
     final headerConfiguration = configuration.header;
@@ -55,10 +58,7 @@ class FlutterDeckImageSlide extends StatelessWidget {
             ),
             if (label != null) ...[
               const SizedBox(height: 4),
-              Text(
-                label!,
-                style: FlutterDeckTheme.of(context).textTheme.bodySmall,
-              ),
+              Text(label!, style: theme.labelTextStyle),
             ],
           ],
         ),

lib/src/theme/flutter_deck_theme.dart

@@ -84,6 +84,9 @@ class FlutterDeckThemeData {
         color: colorScheme.onBackground,
         textStyle: textTheme.header,
       ),
+      imageSlideTheme: FlutterDeckImageSlideThemeData(
+        labelTextStyle: textTheme.bodySmall,
+      ),
       slideTheme: FlutterDeckSlideThemeData(
         backgroundColor: colorScheme.background,
         color: colorScheme.onBackground,
@@ -117,6 +120,7 @@ class FlutterDeckThemeData {
     required this.codeHighlightTheme,
     required this.footerTheme,
     required this.headerTheme,
+    required this.imageSlideTheme,
     required this.slideTheme,
     required this.speakerInfoWidgetTheme,
     required this.splitSlideTheme,
@@ -137,6 +141,9 @@ class FlutterDeckThemeData {
   /// The visual properties of a header.
   final FlutterDeckHeaderThemeData headerTheme;
 
+  /// The visual properties of an image slide.
+  final FlutterDeckImageSlideThemeData imageSlideTheme;
+
   /// The base visual properties of a slide.
   final FlutterDeckSlideThemeData slideTheme;
 
@@ -162,6 +169,7 @@ class FlutterDeckThemeData {
     FlutterDeckCodeHighlightThemeData? codeHighlightTheme,
     FlutterDeckFooterThemeData? footerTheme,
     FlutterDeckHeaderThemeData? headerTheme,
+    FlutterDeckImageSlideThemeData? imageSlideTheme,
     FlutterDeckSlideThemeData? slideTheme,
     FlutterDeckSpeakerInfoWidgetThemeData? speakerInfoWidgetTheme,
     FlutterDeckSplitSlideThemeData? splitSlideTheme,
@@ -173,6 +181,7 @@ class FlutterDeckThemeData {
       codeHighlightTheme: this.codeHighlightTheme.merge(codeHighlightTheme),
       footerTheme: this.footerTheme.merge(footerTheme),
       headerTheme: this.headerTheme.merge(headerTheme),
+      imageSlideTheme: this.imageSlideTheme.merge(imageSlideTheme),
       slideTheme: this.slideTheme.merge(slideTheme),
       speakerInfoWidgetTheme:
           this.speakerInfoWidgetTheme.merge(speakerInfoWidgetTheme),
@@ -192,6 +201,7 @@ class FlutterDeckThemeData {
       codeHighlightTheme: codeHighlightTheme.merge(other.codeHighlightTheme),
       footerTheme: footerTheme.merge(other.footerTheme),
       headerTheme: headerTheme.merge(other.headerTheme),
+      imageSlideTheme: imageSlideTheme.merge(other.imageSlideTheme),
       slideTheme: slideTheme.merge(other.slideTheme),
       speakerInfoWidgetTheme:
           speakerInfoWidgetTheme.merge(other.speakerInfoWidgetTheme),

lib/src/theme/templates/flutter_deck_image_slide_theme.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_deck/src/templates/image_slide.dart';
+import 'package:flutter_deck/src/theme/flutter_deck_theme.dart';
+
+/// Defines the visual properties of [FlutterDeckImageSlide].
+///
+/// Used by [FlutterDeckImageSlideTheme] to control the visual properties of
+/// slides in a deck.
+///
+/// To obtain the current [FlutterDeckImageSlideThemeData], use
+/// [FlutterDeckImageSlideTheme.of] to access the closest ancestor
+/// [FlutterDeckImageSlideTheme] of the current [BuildContext].
+///
+/// See also:
+///
+/// * [FlutterDeckImageSlideTheme], an [InheritedWidget] that propagates the
+/// theme down its subtree.
+/// * [FlutterDeckTheme], which describes the overall theme information for the
+/// slide deck.
+class FlutterDeckImageSlideThemeData {
+  /// Creates a theme to style [FlutterDeckImageSlide].
+  const FlutterDeckImageSlideThemeData({
+    this.labelTextStyle,
+  });
+
+  /// Text style for the image label.
+  final TextStyle? labelTextStyle;
+
+  /// Creates a copy of this object with the given fields replaced with the new
+  /// values.
+  FlutterDeckImageSlideThemeData copyWith({
+    TextStyle? labelTextStyle,
+  }) {
+    return FlutterDeckImageSlideThemeData(
+      labelTextStyle: labelTextStyle ?? this.labelTextStyle,
+    );
+  }
+
+  /// Merge the given [FlutterDeckImageSlideThemeData] with this one.
+  FlutterDeckImageSlideThemeData merge(FlutterDeckImageSlideThemeData? other) {
+    if (other == null) return this;
+
+    return copyWith(
+      labelTextStyle:
+          labelTextStyle?.merge(other.labelTextStyle) ?? other.labelTextStyle,
+    );
+  }
+}
+
+/// An inherited widget that defines the visual properties of
+/// [FlutterDeckImageSlide].
+///
+/// Used by [FlutterDeckImageSlide] to control the visual properties of slides
+/// in the slide deck.
+class FlutterDeckImageSlideTheme extends InheritedTheme {
+  /// Creates a theme to style [FlutterDeckImageSlide].
+  ///
+  /// The [data] argument must not be null.
+  const FlutterDeckImageSlideTheme({
+    required this.data,
+    required super.child,
+    super.key,
+  });
+
+  /// The visual properties of [FlutterDeckImageSlide].
+  final FlutterDeckImageSlideThemeData data;
+
+  /// Returns the [data] from the closest [FlutterDeckImageSlideTheme] ancestor.
+  /// If there is no ancestor, it returns
+  /// [FlutterDeckThemeData.imageSlideTheme].
+  ///
+  /// The returned theme data will never be null.
+  static FlutterDeckImageSlideThemeData of(BuildContext context) {
+    final theme = context
+        .dependOnInheritedWidgetOfExactType<FlutterDeckImageSlideTheme>();
+
+    return theme?.data ?? FlutterDeckTheme.of(context).imageSlideTheme;
+  }
+
+  @override
+  bool updateShouldNotify(FlutterDeckImageSlideTheme oldWidget) =>
+      data != oldWidget.data;
+
+  @override
+  Widget wrap(BuildContext context, Widget child) =>
+      FlutterDeckImageSlideTheme(data: data, child: child);
+}

lib/src/theme/templates/templates.dart

@@ -1,3 +1,4 @@
+export 'flutter_deck_image_slide_theme.dart';
 export 'flutter_deck_slide_theme.dart';
 export 'flutter_deck_split_slide_theme.dart';
 export 'flutter_deck_title_slide_theme.dart';