From 2fdadd48a1dac292aff853d4160b9f749165c8c1 Mon Sep 17 00:00:00 2001 From: Mangirdas Kazlauskas Date: Fri, 22 Sep 2023 21:16:53 +0300 Subject: [PATCH 1/3] feat: Add FlutterDeckImageSlideTheme --- lib/src/templates/image_slide.dart | 10 +-- lib/src/theme/flutter_deck_theme.dart | 10 +++ .../flutter_deck_image_slide_theme.dart | 87 +++++++++++++++++++ lib/src/theme/templates/templates.dart | 1 + 4 files changed, 103 insertions(+), 5 deletions(-) create mode 100644 lib/src/theme/templates/flutter_deck_image_slide_theme.dart diff --git a/lib/src/templates/image_slide.dart b/lib/src/templates/image_slide.dart index 5b43774..681e5d5 100644 --- a/lib/src/templates/image_slide.dart +++ b/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), ], ], ), diff --git a/lib/src/theme/flutter_deck_theme.dart b/lib/src/theme/flutter_deck_theme.dart index 168be8c..deb8da7 100644 --- a/lib/src/theme/flutter_deck_theme.dart +++ b/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 a title 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), diff --git a/lib/src/theme/templates/flutter_deck_image_slide_theme.dart b/lib/src/theme/templates/flutter_deck_image_slide_theme.dart new file mode 100644 index 0000000..6633c1f --- /dev/null +++ b/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(); + + 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); +} diff --git a/lib/src/theme/templates/templates.dart b/lib/src/theme/templates/templates.dart index 7fc438b..1fdb0d4 100644 --- a/lib/src/theme/templates/templates.dart +++ b/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'; From 568f884df19033b20ba8616a5638e03d46b43f64 Mon Sep 17 00:00:00 2001 From: Mangirdas Kazlauskas Date: Fri, 22 Sep 2023 21:17:55 +0300 Subject: [PATCH 2/3] docs: update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65be71b..b9881b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# NEXT + +- feat: add `FlutterDeckImageSlideTheme` + # 0.4.3 - fix: `FlutterDeckSlideStepsBuilder` triggers builder on slide change From 73a294edf8a8dc6184ddc51f6191dba36830603b Mon Sep 17 00:00:00 2001 From: Mangirdas Kazlauskas Date: Fri, 22 Sep 2023 21:20:32 +0300 Subject: [PATCH 3/3] docs: update widget docs --- lib/src/theme/flutter_deck_theme.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/theme/flutter_deck_theme.dart b/lib/src/theme/flutter_deck_theme.dart index deb8da7..eef8d3f 100644 --- a/lib/src/theme/flutter_deck_theme.dart +++ b/lib/src/theme/flutter_deck_theme.dart @@ -141,7 +141,7 @@ class FlutterDeckThemeData { /// The visual properties of a header. final FlutterDeckHeaderThemeData headerTheme; - /// The visual properties of a title slide. + /// The visual properties of an image slide. final FlutterDeckImageSlideThemeData imageSlideTheme; /// The base visual properties of a slide.