Introduce YaruPageIndicatorTheme

lib/src/widgets/yaru_page_indicator.dart

@@ -1,6 +1,13 @@
 import 'package:flutter/material.dart';
 
 import 'yaru_carousel.dart';
+import 'yaru_page_indicator_theme.dart';
+
+typedef YaruDotDecorationBuilder = Decoration Function(
+  int index,
+  int selectedIndex,
+  int length,
+);
 
 /// A responsive page indicator.
 ///
@@ -16,11 +23,12 @@ class YaruPageIndicator extends StatelessWidget {
     super.key,
     required this.length,
     required this.page,
-    this.animationDuration = Duration.zero,
-    this.animationCurve = Curves.linear,
+    this.animationDuration,
+    this.animationCurve,
     this.onTap,
-    this.dotSize = 12.0,
-    this.dotSpacing = 48.0,
+    this.dotSize,
+    this.dotSpacing,
+    this.dotDecorationBuilder,
   }) : assert(page >= 0 && page <= length - 1);
 
   /// Determine the number of pages.
@@ -32,24 +40,41 @@ class YaruPageIndicator extends StatelessWidget {
 
   /// Duration of a transition between two dots.
   /// Use [Duration.zero] (defaults) to disable transition.
-  final Duration animationDuration;
+  ///
+  /// Defaults to [Duration.zero].
+  final Duration? animationDuration;
 
   /// Curve used in a transition between two dots.
-  final Curve animationCurve;
+  ///
+  /// Defaults to [Curves.linear].
+  final Curve? animationCurve;
 
   /// Callback called when tapping a dot.
   /// It passes the tapped page index as parameter.
   final ValueChanged<int>? onTap;
 
   /// Size of the dots.
-  final double dotSize;
+  ///
+  /// Defaults to 12.0
+  final double? dotSize;
 
   /// Base length for the space between the dots.
   /// Will be automatically reduced to fit the vertical constraints.
-  final double dotSpacing;
+  ///
+  /// Defaults to 48.0
+  final double? dotSpacing;
+
+  /// Decoration of the dots.
+  final YaruDotDecorationBuilder? dotDecorationBuilder;
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final indicatorTheme = YaruPageIndicatorTheme.of(context);
+
+    final dotSize = this.dotSize ?? indicatorTheme?.dotSize ?? 12.0;
+    final dotSpacing = this.dotSpacing ?? indicatorTheme?.dotSpacing ?? 48.0;
+
     return LayoutBuilder(
       builder: (context, constraints) {
         for (final layout in [
@@ -61,30 +86,46 @@ class YaruPageIndicator extends StatelessWidget {
           final maxWidth = layout[1];
 
           if (dotSize * length + dotSpacing * (length - 1) < maxWidth) {
-            return _buildDotIndicator(context, dotSize, dotSpacing);
+            return _buildDotIndicator(
+              theme,
+              indicatorTheme,
+              dotSize,
+              dotSpacing,
+            );
           }
         }
 
-        return _buildTextIndicator(context);
+        return _buildTextIndicator(theme);
       },
     );
   }
 
   Widget _buildDotIndicator(
-    BuildContext context,
+    ThemeData theme,
+    YaruPageIndicatorThemeData? indicatorTheme,
     double dotSize,
     double dotSpacing,
   ) {
+    final dotDecorationBuilder =
+        this.dotDecorationBuilder ?? indicatorTheme?.dotDecorationBuilder;
+    final animationDuration = this.animationDuration ??
+        indicatorTheme?.animationDuration ??
+        Duration.zero;
+    final animationCurve =
+        this.animationCurve ?? indicatorTheme?.animationCurve ?? Curves.linear;
+
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
       children: List<Widget>.generate(length, (index) {
-        final dotDecoration = BoxDecoration(
-          color: page == index
-              ? Theme.of(context).colorScheme.primary
-              : Theme.of(context).colorScheme.onSurface.withOpacity(.3),
-          shape: BoxShape.circle,
-        );
+        final dotDecoration = dotDecorationBuilder != null
+            ? dotDecorationBuilder.call(index, page, length)
+            : BoxDecoration(
+                color: page == index
+                    ? theme.colorScheme.primary
+                    : theme.colorScheme.onSurface.withOpacity(.3),
+                shape: BoxShape.circle,
+              );
 
         return GestureDetector(
           onTap: onTap == null ? null : () => onTap!(index),
@@ -114,10 +155,10 @@ class YaruPageIndicator extends StatelessWidget {
     );
   }
 
-  Widget _buildTextIndicator(BuildContext context) {
+  Widget _buildTextIndicator(ThemeData theme) {
     return Text(
       '${page + 1}/$length',
-      style: Theme.of(context).textTheme.bodySmall,
+      style: theme.textTheme.bodySmall,
       textAlign: TextAlign.center,
     );
   }

lib/src/widgets/yaru_page_indicator_theme.dart

@@ -0,0 +1,137 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'yaru_page_indicator.dart';
+
+/// Defines default property values for descendant [YaruPageIndicator] widgets.
+///
+/// Descendant widgets obtain the current [YaruPageIndicatorThemeData] object
+/// using `YaruPageIndicatorTheme.of(context)`. Instances of [YaruPageIndicatorThemeData]
+/// can be customized with [YaruPageIndicatorThemeData.copyWith].
+@immutable
+class YaruPageIndicatorThemeData
+    extends ThemeExtension<YaruPageIndicatorThemeData> with Diagnosticable {
+  /// Creates a theme that can be used for [YaruPageIndicatorTheme.data].
+  const YaruPageIndicatorThemeData({
+    this.animationDuration,
+    this.animationCurve,
+    this.dotSize,
+    this.dotSpacing,
+    this.dotDecorationBuilder,
+  });
+
+  /// Duration of a transition between two items.
+  /// Use [Duration.zero] (defaults) to disable transition.
+  final Duration? animationDuration;
+
+  /// Curve used in a transition between two items.
+  final Curve? animationCurve;
+
+  /// Size of the dots.
+  final double? dotSize;
+
+  /// Base length for the space between the dots.
+  /// Will be automatically reduced to fit the vertical constraints.
+  final double? dotSpacing;
+
+  /// Decoration of the dots.
+  final YaruDotDecorationBuilder? dotDecorationBuilder;
+
+  /// Creates a copy with the given fields replaced with new values.
+  @override
+  YaruPageIndicatorThemeData copyWith({
+    Duration? animationDuration,
+    Curve? animationCurve,
+    double? dotSize,
+    double? dotSpacing,
+    YaruDotDecorationBuilder? dotDecorationBuilder,
+  }) {
+    return YaruPageIndicatorThemeData(
+      animationDuration: animationDuration ?? this.animationDuration,
+      animationCurve: animationCurve ?? this.animationCurve,
+      dotSize: dotSize ?? this.dotSize,
+      dotSpacing: dotSpacing ?? this.dotSpacing,
+      dotDecorationBuilder: dotDecorationBuilder ?? this.dotDecorationBuilder,
+    );
+  }
+
+  @override
+  ThemeExtension<YaruPageIndicatorThemeData> lerp(
+    ThemeExtension<YaruPageIndicatorThemeData>? other,
+    double t,
+  ) {
+    final o = other as YaruPageIndicatorThemeData?;
+    return YaruPageIndicatorThemeData(
+      animationDuration: lerpDuration(
+        animationDuration ?? Duration.zero,
+        o?.animationDuration ?? Duration.zero,
+        t,
+      ),
+      animationCurve: t < 0.5 ? animationCurve : o?.animationCurve,
+      dotSize: lerpDouble(dotSize, o?.dotSize, t),
+      dotSpacing: lerpDouble(dotSpacing, o?.dotSpacing, t),
+      dotDecorationBuilder:
+          t < 0.5 ? dotDecorationBuilder : o?.dotDecorationBuilder,
+    );
+  }
+
+  @override
+  int get hashCode {
+    return Object.hash(
+      animationDuration,
+      animationCurve,
+      dotSize,
+      dotSpacing,
+      dotDecorationBuilder,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other.runtimeType != runtimeType) return false;
+    return other is YaruPageIndicatorThemeData &&
+        other.animationDuration == animationDuration &&
+        other.animationCurve == animationCurve &&
+        other.dotSize == dotSize &&
+        other.dotSpacing == dotSpacing &&
+        other.dotDecorationBuilder == dotDecorationBuilder;
+  }
+}
+
+/// Applies a theme to descendant [YaruPageIndicator] widgets.
+///
+/// Descendant widgets obtain the current [YaruPageIndicatorTheme] object using
+/// [YaruPageIndicatorTheme.of]. When a widget uses [YaruPageIndicatorTheme.of],
+/// it is automatically rebuilt if the theme later changes.
+///
+/// See also:
+///
+///  * [YaruPageIndicatorThemeData], which describes the actual configuration of
+///    a toggle button theme.
+class YaruPageIndicatorTheme extends InheritedWidget {
+  /// Constructs a theme that configures all descendant [YaruPageIndicator] widgets.
+  const YaruPageIndicatorTheme({
+    super.key,
+    required this.data,
+    required super.child,
+  });
+
+  /// The properties used for all descendant [PageIndicator] widgets.
+  final YaruPageIndicatorThemeData data;
+
+  /// Returns the configuration [data] from the closest [YaruPageIndicatorTheme]
+  /// ancestor. If there is no ancestor, it returns `null`.
+  static YaruPageIndicatorThemeData? of(BuildContext context) {
+    final t =
+        context.dependOnInheritedWidgetOfExactType<YaruPageIndicatorTheme>();
+    return t?.data ?? Theme.of(context).extension<YaruPageIndicatorThemeData>();
+  }
+
+  @override
+  bool updateShouldNotify(YaruPageIndicatorTheme oldWidget) {
+    return data != oldWidget.data;
+  }
+}