style(ui_kit): add example demo-page auto-generation

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_component.g.dart

@@ -22,6 +22,8 @@ abstract class $FileSelectionButtonComponentCWProxy {
   FileSelectionButtonComponent invalidStyle(ButtonStyle<dynamic>? invalidStyle);
   FileSelectionButtonComponent onPressed(
       void Function(ControlState)? onPressed);
+  FileSelectionButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
   FileSelectionButtonComponent key(Key? key);
   FileSelectionButtonComponent call({
     MainAxisSize? mainAxisSize,
@@ -36,6 +38,7 @@ abstract class $FileSelectionButtonComponentCWProxy {
     ButtonStyle<dynamic>? selectedStyle,
     ButtonStyle<dynamic>? invalidStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   });
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart

@@ -16,14 +16,10 @@
 
 import 'dart:ui';
 
-import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-part 'file_selection_button_style.g.dart';
-
-@CopyWith()
 class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
   const FileSelectionButtonStyle({
     this.title,
@@ -117,4 +113,28 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     double t,
   ) =>
       FileSelectionButtonStyle.lerp(this, other, t);
+
+  @override
+  FileSelectionButtonStyle copyWith({
+    TextStyle? title,
+    TextStyle? subTitle,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      FileSelectionButtonStyle(
+        title: title ?? this.title,
+        subTitle: subTitle ?? this.subTitle,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.g.dart

@@ -1,152 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'file_selection_button_style.dart';
-
-// **************************************************************************
-// CopyWithGenerator
-// **************************************************************************
-
-abstract class _$FileSelectionButtonStyleCWProxy {
-  FileSelectionButtonStyle title(TextStyle? title);
-
-  FileSelectionButtonStyle subTitle(TextStyle? subTitle);
-
-  FileSelectionButtonStyle radius(BorderRadiusGeometry? radius);
-
-  FileSelectionButtonStyle padding(EdgeInsetsGeometry? padding);
-
-  FileSelectionButtonStyle foregroundColors(MultiColor? foregroundColors);
-
-  FileSelectionButtonStyle backgroundColors(MultiColor? backgroundColors);
-
-  FileSelectionButtonStyle borderColors(MultiColor? borderColors);
-
-  FileSelectionButtonStyle stroke(double? stroke);
-
-  FileSelectionButtonStyle shadow(BoxShadow? shadow);
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FileSelectionButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// FileSelectionButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  FileSelectionButtonStyle call({
-    TextStyle? title,
-    TextStyle? subTitle,
-    BorderRadiusGeometry? radius,
-    EdgeInsetsGeometry? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  });
-}
-
-/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfFileSelectionButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfFileSelectionButtonStyle.copyWith.fieldName(...)`
-class _$FileSelectionButtonStyleCWProxyImpl
-    implements _$FileSelectionButtonStyleCWProxy {
-  const _$FileSelectionButtonStyleCWProxyImpl(this._value);
-
-  final FileSelectionButtonStyle _value;
-
-  @override
-  FileSelectionButtonStyle title(TextStyle? title) => this(title: title);
-
-  @override
-  FileSelectionButtonStyle subTitle(TextStyle? subTitle) =>
-      this(subTitle: subTitle);
-
-  @override
-  FileSelectionButtonStyle radius(BorderRadiusGeometry? radius) =>
-      this(radius: radius);
-
-  @override
-  FileSelectionButtonStyle padding(EdgeInsetsGeometry? padding) =>
-      this(padding: padding);
-
-  @override
-  FileSelectionButtonStyle foregroundColors(MultiColor? foregroundColors) =>
-      this(foregroundColors: foregroundColors);
-
-  @override
-  FileSelectionButtonStyle backgroundColors(MultiColor? backgroundColors) =>
-      this(backgroundColors: backgroundColors);
-
-  @override
-  FileSelectionButtonStyle borderColors(MultiColor? borderColors) =>
-      this(borderColors: borderColors);
-
-  @override
-  FileSelectionButtonStyle stroke(double? stroke) => this(stroke: stroke);
-
-  @override
-  FileSelectionButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
-
-  @override
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FileSelectionButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// FileSelectionButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  FileSelectionButtonStyle call({
-    Object? title = const $CopyWithPlaceholder(),
-    Object? subTitle = const $CopyWithPlaceholder(),
-    Object? radius = const $CopyWithPlaceholder(),
-    Object? padding = const $CopyWithPlaceholder(),
-    Object? foregroundColors = const $CopyWithPlaceholder(),
-    Object? backgroundColors = const $CopyWithPlaceholder(),
-    Object? borderColors = const $CopyWithPlaceholder(),
-    Object? stroke = const $CopyWithPlaceholder(),
-    Object? shadow = const $CopyWithPlaceholder(),
-  }) {
-    return FileSelectionButtonStyle(
-      title: title == const $CopyWithPlaceholder()
-          ? _value.title
-          // ignore: cast_nullable_to_non_nullable
-          : title as TextStyle?,
-      subTitle: subTitle == const $CopyWithPlaceholder()
-          ? _value.subTitle
-          // ignore: cast_nullable_to_non_nullable
-          : subTitle as TextStyle?,
-      radius: radius == const $CopyWithPlaceholder()
-          ? _value.radius
-          // ignore: cast_nullable_to_non_nullable
-          : radius as BorderRadiusGeometry?,
-      padding: padding == const $CopyWithPlaceholder()
-          ? _value.padding
-          // ignore: cast_nullable_to_non_nullable
-          : padding as EdgeInsetsGeometry?,
-      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
-          ? _value.foregroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : foregroundColors as MultiColor?,
-      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
-          ? _value.backgroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : backgroundColors as MultiColor?,
-      borderColors: borderColors == const $CopyWithPlaceholder()
-          ? _value.borderColors
-          // ignore: cast_nullable_to_non_nullable
-          : borderColors as MultiColor?,
-      stroke: stroke == const $CopyWithPlaceholder()
-          ? _value.stroke
-          // ignore: cast_nullable_to_non_nullable
-          : stroke as double?,
-      shadow: shadow == const $CopyWithPlaceholder()
-          ? _value.shadow
-          // ignore: cast_nullable_to_non_nullable
-          : shadow as BoxShadow?,
-    );
-  }
-}
-
-extension $FileSelectionButtonStyleCopyWith on FileSelectionButtonStyle {
-  /// Returns a callable class that can be used as follows: `instanceOfFileSelectionButtonStyle.copyWith(...)` or like so:`instanceOfFileSelectionButtonStyle.copyWith.fieldName(...)`.
-  // ignore: library_private_types_in_public_api
-  _$FileSelectionButtonStyleCWProxy get copyWith =>
-      _$FileSelectionButtonStyleCWProxyImpl(this);
-}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_component.g.dart

@@ -17,6 +17,8 @@ abstract class $FlatButtonComponentCWProxy {
   FlatButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
   FlatButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
   FlatButtonComponent onPressed(void Function(ControlState)? onPressed);
+  FlatButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
   FlatButtonComponent key(Key? key);
   FlatButtonComponent call({
     MainAxisSize? mainAxisSize,
@@ -29,6 +31,7 @@ abstract class $FlatButtonComponentCWProxy {
     ButtonStyle<dynamic>? focusedStyle,
     ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   });
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart

@@ -16,14 +16,10 @@
 
 import 'dart:ui';
 
-import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-part 'flat_button_style.g.dart';
-
-@CopyWith()
 class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
   const FlatButtonStyle({
     this.label,
@@ -106,4 +102,26 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
   @override
   FlatButtonStyle? lerpWith(FlatButtonStyle? other, double t) =>
       FlatButtonStyle.lerp(this, other, t);
+
+  @override
+  FlatButtonStyle copyWith({
+    TextStyle? label,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      FlatButtonStyle(
+        label: label ?? this.label,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.g.dart

@@ -1,137 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'flat_button_style.dart';
-
-// **************************************************************************
-// CopyWithGenerator
-// **************************************************************************
-
-abstract class _$FlatButtonStyleCWProxy {
-  FlatButtonStyle label(TextStyle? label);
-
-  FlatButtonStyle radius(BorderRadiusGeometry? radius);
-
-  FlatButtonStyle padding(EdgeInsetsGeometry? padding);
-
-  FlatButtonStyle foregroundColors(MultiColor? foregroundColors);
-
-  FlatButtonStyle backgroundColors(MultiColor? backgroundColors);
-
-  FlatButtonStyle borderColors(MultiColor? borderColors);
-
-  FlatButtonStyle stroke(double? stroke);
-
-  FlatButtonStyle shadow(BoxShadow? shadow);
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FlatButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// FlatButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  FlatButtonStyle call({
-    TextStyle? label,
-    BorderRadiusGeometry? radius,
-    EdgeInsetsGeometry? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  });
-}
-
-/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfFlatButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfFlatButtonStyle.copyWith.fieldName(...)`
-class _$FlatButtonStyleCWProxyImpl implements _$FlatButtonStyleCWProxy {
-  const _$FlatButtonStyleCWProxyImpl(this._value);
-
-  final FlatButtonStyle _value;
-
-  @override
-  FlatButtonStyle label(TextStyle? label) => this(label: label);
-
-  @override
-  FlatButtonStyle radius(BorderRadiusGeometry? radius) => this(radius: radius);
-
-  @override
-  FlatButtonStyle padding(EdgeInsetsGeometry? padding) =>
-      this(padding: padding);
-
-  @override
-  FlatButtonStyle foregroundColors(MultiColor? foregroundColors) =>
-      this(foregroundColors: foregroundColors);
-
-  @override
-  FlatButtonStyle backgroundColors(MultiColor? backgroundColors) =>
-      this(backgroundColors: backgroundColors);
-
-  @override
-  FlatButtonStyle borderColors(MultiColor? borderColors) =>
-      this(borderColors: borderColors);
-
-  @override
-  FlatButtonStyle stroke(double? stroke) => this(stroke: stroke);
-
-  @override
-  FlatButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
-
-  @override
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FlatButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// FlatButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  FlatButtonStyle call({
-    Object? label = const $CopyWithPlaceholder(),
-    Object? radius = const $CopyWithPlaceholder(),
-    Object? padding = const $CopyWithPlaceholder(),
-    Object? foregroundColors = const $CopyWithPlaceholder(),
-    Object? backgroundColors = const $CopyWithPlaceholder(),
-    Object? borderColors = const $CopyWithPlaceholder(),
-    Object? stroke = const $CopyWithPlaceholder(),
-    Object? shadow = const $CopyWithPlaceholder(),
-  }) {
-    return FlatButtonStyle(
-      label: label == const $CopyWithPlaceholder()
-          ? _value.label
-          // ignore: cast_nullable_to_non_nullable
-          : label as TextStyle?,
-      radius: radius == const $CopyWithPlaceholder()
-          ? _value.radius
-          // ignore: cast_nullable_to_non_nullable
-          : radius as BorderRadiusGeometry?,
-      padding: padding == const $CopyWithPlaceholder()
-          ? _value.padding
-          // ignore: cast_nullable_to_non_nullable
-          : padding as EdgeInsetsGeometry?,
-      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
-          ? _value.foregroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : foregroundColors as MultiColor?,
-      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
-          ? _value.backgroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : backgroundColors as MultiColor?,
-      borderColors: borderColors == const $CopyWithPlaceholder()
-          ? _value.borderColors
-          // ignore: cast_nullable_to_non_nullable
-          : borderColors as MultiColor?,
-      stroke: stroke == const $CopyWithPlaceholder()
-          ? _value.stroke
-          // ignore: cast_nullable_to_non_nullable
-          : stroke as double?,
-      shadow: shadow == const $CopyWithPlaceholder()
-          ? _value.shadow
-          // ignore: cast_nullable_to_non_nullable
-          : shadow as BoxShadow?,
-    );
-  }
-}
-
-extension $FlatButtonStyleCopyWith on FlatButtonStyle {
-  /// Returns a callable class that can be used as follows: `instanceOfFlatButtonStyle.copyWith(...)` or like so:`instanceOfFlatButtonStyle.copyWith.fieldName(...)`.
-  // ignore: library_private_types_in_public_api
-  _$FlatButtonStyleCWProxy get copyWith => _$FlatButtonStyleCWProxyImpl(this);
-}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_component.g.dart

@@ -14,6 +14,8 @@ abstract class $SimpleIconButtonComponentCWProxy {
   SimpleIconButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
   SimpleIconButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
   SimpleIconButtonComponent onPressed(void Function(ControlState)? onPressed);
+  SimpleIconButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
   SimpleIconButtonComponent key(Key? key);
   SimpleIconButtonComponent call({
     Icon? icon,
@@ -23,6 +25,7 @@ abstract class $SimpleIconButtonComponentCWProxy {
     ButtonStyle<dynamic>? focusedStyle,
     ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   });
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart

@@ -16,14 +16,10 @@
 
 import 'dart:ui';
 
-import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-part 'simple_icon_button_style.g.dart';
-
-@CopyWith()
 class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
   const SimpleIconButtonStyle({
     this.dimension,
@@ -106,4 +102,26 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
   @override
   SimpleIconButtonStyle? lerpWith(SimpleIconButtonStyle? other, double t) =>
       SimpleIconButtonStyle.lerp(this, other, t);
+
+  @override
+  SimpleIconButtonStyle copyWith({
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      SimpleIconButtonStyle(
+        dimension: dimension ?? this.dimension,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.g.dart

@@ -1,141 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'simple_icon_button_style.dart';
-
-// **************************************************************************
-// CopyWithGenerator
-// **************************************************************************
-
-abstract class _$SimpleIconButtonStyleCWProxy {
-  SimpleIconButtonStyle dimension(double? dimension);
-
-  SimpleIconButtonStyle radius(BorderRadiusGeometry? radius);
-
-  SimpleIconButtonStyle padding(EdgeInsetsGeometry? padding);
-
-  SimpleIconButtonStyle foregroundColors(MultiColor? foregroundColors);
-
-  SimpleIconButtonStyle backgroundColors(MultiColor? backgroundColors);
-
-  SimpleIconButtonStyle borderColors(MultiColor? borderColors);
-
-  SimpleIconButtonStyle stroke(double? stroke);
-
-  SimpleIconButtonStyle shadow(BoxShadow? shadow);
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SimpleIconButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// SimpleIconButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  SimpleIconButtonStyle call({
-    double? dimension,
-    BorderRadiusGeometry? radius,
-    EdgeInsetsGeometry? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  });
-}
-
-/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfSimpleIconButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfSimpleIconButtonStyle.copyWith.fieldName(...)`
-class _$SimpleIconButtonStyleCWProxyImpl
-    implements _$SimpleIconButtonStyleCWProxy {
-  const _$SimpleIconButtonStyleCWProxyImpl(this._value);
-
-  final SimpleIconButtonStyle _value;
-
-  @override
-  SimpleIconButtonStyle dimension(double? dimension) =>
-      this(dimension: dimension);
-
-  @override
-  SimpleIconButtonStyle radius(BorderRadiusGeometry? radius) =>
-      this(radius: radius);
-
-  @override
-  SimpleIconButtonStyle padding(EdgeInsetsGeometry? padding) =>
-      this(padding: padding);
-
-  @override
-  SimpleIconButtonStyle foregroundColors(MultiColor? foregroundColors) =>
-      this(foregroundColors: foregroundColors);
-
-  @override
-  SimpleIconButtonStyle backgroundColors(MultiColor? backgroundColors) =>
-      this(backgroundColors: backgroundColors);
-
-  @override
-  SimpleIconButtonStyle borderColors(MultiColor? borderColors) =>
-      this(borderColors: borderColors);
-
-  @override
-  SimpleIconButtonStyle stroke(double? stroke) => this(stroke: stroke);
-
-  @override
-  SimpleIconButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
-
-  @override
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SimpleIconButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// SimpleIconButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  SimpleIconButtonStyle call({
-    Object? dimension = const $CopyWithPlaceholder(),
-    Object? radius = const $CopyWithPlaceholder(),
-    Object? padding = const $CopyWithPlaceholder(),
-    Object? foregroundColors = const $CopyWithPlaceholder(),
-    Object? backgroundColors = const $CopyWithPlaceholder(),
-    Object? borderColors = const $CopyWithPlaceholder(),
-    Object? stroke = const $CopyWithPlaceholder(),
-    Object? shadow = const $CopyWithPlaceholder(),
-  }) {
-    return SimpleIconButtonStyle(
-      dimension: dimension == const $CopyWithPlaceholder()
-          ? _value.dimension
-          // ignore: cast_nullable_to_non_nullable
-          : dimension as double?,
-      radius: radius == const $CopyWithPlaceholder()
-          ? _value.radius
-          // ignore: cast_nullable_to_non_nullable
-          : radius as BorderRadiusGeometry?,
-      padding: padding == const $CopyWithPlaceholder()
-          ? _value.padding
-          // ignore: cast_nullable_to_non_nullable
-          : padding as EdgeInsetsGeometry?,
-      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
-          ? _value.foregroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : foregroundColors as MultiColor?,
-      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
-          ? _value.backgroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : backgroundColors as MultiColor?,
-      borderColors: borderColors == const $CopyWithPlaceholder()
-          ? _value.borderColors
-          // ignore: cast_nullable_to_non_nullable
-          : borderColors as MultiColor?,
-      stroke: stroke == const $CopyWithPlaceholder()
-          ? _value.stroke
-          // ignore: cast_nullable_to_non_nullable
-          : stroke as double?,
-      shadow: shadow == const $CopyWithPlaceholder()
-          ? _value.shadow
-          // ignore: cast_nullable_to_non_nullable
-          : shadow as BoxShadow?,
-    );
-  }
-}
-
-extension $SimpleIconButtonStyleCopyWith on SimpleIconButtonStyle {
-  /// Returns a callable class that can be used as follows: `instanceOfSimpleIconButtonStyle.copyWith(...)` or like so:`instanceOfSimpleIconButtonStyle.copyWith.fieldName(...)`.
-  // ignore: library_private_types_in_public_api
-  _$SimpleIconButtonStyleCWProxy get copyWith =>
-      _$SimpleIconButtonStyleCWProxyImpl(this);
-}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_component.g.dart

@@ -17,6 +17,8 @@ abstract class $SymbolButtonComponentCWProxy {
   SymbolButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
   SymbolButtonComponent selectedStyle(ButtonStyle<dynamic>? selectedStyle);
   SymbolButtonComponent onPressed(void Function(ControlState)? onPressed);
+  SymbolButtonComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
   SymbolButtonComponent key(Key? key);
   SymbolButtonComponent call({
     MainAxisSize? mainAxisSize,
@@ -29,6 +31,7 @@ abstract class $SymbolButtonComponentCWProxy {
     ButtonStyle<dynamic>? tappedStyle,
     ButtonStyle<dynamic>? selectedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   });
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart

@@ -16,14 +16,10 @@
 
 import 'dart:ui';
 
-import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-part 'symbol_button_style.g.dart';
-
-@CopyWith()
 class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
   const SymbolButtonStyle({
     this.label,
@@ -114,4 +110,28 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
   @override
   SymbolButtonStyle? lerpWith(SymbolButtonStyle? other, double t) =>
       SymbolButtonStyle.lerp(this, other, t);
+
+  @override
+  SymbolButtonStyle copyWith({
+    TextStyle? label,
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  }) =>
+      SymbolButtonStyle(
+        label: label ?? this.label,
+        dimension: dimension ?? this.dimension,
+        radius: radius ?? this.radius,
+        padding: padding ?? this.padding,
+        foregroundColors: foregroundColors ?? this.foregroundColors,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        borderColors: borderColors ?? this.borderColors,
+        stroke: stroke ?? this.stroke,
+        shadow: shadow ?? this.shadow,
+      );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.g.dart

@@ -1,150 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'symbol_button_style.dart';
-
-// **************************************************************************
-// CopyWithGenerator
-// **************************************************************************
-
-abstract class _$SymbolButtonStyleCWProxy {
-  SymbolButtonStyle label(TextStyle? label);
-
-  SymbolButtonStyle dimension(double? dimension);
-
-  SymbolButtonStyle radius(BorderRadiusGeometry? radius);
-
-  SymbolButtonStyle padding(EdgeInsetsGeometry? padding);
-
-  SymbolButtonStyle foregroundColors(MultiColor? foregroundColors);
-
-  SymbolButtonStyle backgroundColors(MultiColor? backgroundColors);
-
-  SymbolButtonStyle borderColors(MultiColor? borderColors);
-
-  SymbolButtonStyle stroke(double? stroke);
-
-  SymbolButtonStyle shadow(BoxShadow? shadow);
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SymbolButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// SymbolButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  SymbolButtonStyle call({
-    TextStyle? label,
-    double? dimension,
-    BorderRadiusGeometry? radius,
-    EdgeInsetsGeometry? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  });
-}
-
-/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfSymbolButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfSymbolButtonStyle.copyWith.fieldName(...)`
-class _$SymbolButtonStyleCWProxyImpl implements _$SymbolButtonStyleCWProxy {
-  const _$SymbolButtonStyleCWProxyImpl(this._value);
-
-  final SymbolButtonStyle _value;
-
-  @override
-  SymbolButtonStyle label(TextStyle? label) => this(label: label);
-
-  @override
-  SymbolButtonStyle dimension(double? dimension) => this(dimension: dimension);
-
-  @override
-  SymbolButtonStyle radius(BorderRadiusGeometry? radius) =>
-      this(radius: radius);
-
-  @override
-  SymbolButtonStyle padding(EdgeInsetsGeometry? padding) =>
-      this(padding: padding);
-
-  @override
-  SymbolButtonStyle foregroundColors(MultiColor? foregroundColors) =>
-      this(foregroundColors: foregroundColors);
-
-  @override
-  SymbolButtonStyle backgroundColors(MultiColor? backgroundColors) =>
-      this(backgroundColors: backgroundColors);
-
-  @override
-  SymbolButtonStyle borderColors(MultiColor? borderColors) =>
-      this(borderColors: borderColors);
-
-  @override
-  SymbolButtonStyle stroke(double? stroke) => this(stroke: stroke);
-
-  @override
-  SymbolButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
-
-  @override
-
-  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SymbolButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
-  ///
-  /// Usage
-  /// ```dart
-  /// SymbolButtonStyle(...).copyWith(id: 12, name: "My name")
-  /// ````
-  SymbolButtonStyle call({
-    Object? label = const $CopyWithPlaceholder(),
-    Object? dimension = const $CopyWithPlaceholder(),
-    Object? radius = const $CopyWithPlaceholder(),
-    Object? padding = const $CopyWithPlaceholder(),
-    Object? foregroundColors = const $CopyWithPlaceholder(),
-    Object? backgroundColors = const $CopyWithPlaceholder(),
-    Object? borderColors = const $CopyWithPlaceholder(),
-    Object? stroke = const $CopyWithPlaceholder(),
-    Object? shadow = const $CopyWithPlaceholder(),
-  }) {
-    return SymbolButtonStyle(
-      label: label == const $CopyWithPlaceholder()
-          ? _value.label
-          // ignore: cast_nullable_to_non_nullable
-          : label as TextStyle?,
-      dimension: dimension == const $CopyWithPlaceholder()
-          ? _value.dimension
-          // ignore: cast_nullable_to_non_nullable
-          : dimension as double?,
-      radius: radius == const $CopyWithPlaceholder()
-          ? _value.radius
-          // ignore: cast_nullable_to_non_nullable
-          : radius as BorderRadiusGeometry?,
-      padding: padding == const $CopyWithPlaceholder()
-          ? _value.padding
-          // ignore: cast_nullable_to_non_nullable
-          : padding as EdgeInsetsGeometry?,
-      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
-          ? _value.foregroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : foregroundColors as MultiColor?,
-      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
-          ? _value.backgroundColors
-          // ignore: cast_nullable_to_non_nullable
-          : backgroundColors as MultiColor?,
-      borderColors: borderColors == const $CopyWithPlaceholder()
-          ? _value.borderColors
-          // ignore: cast_nullable_to_non_nullable
-          : borderColors as MultiColor?,
-      stroke: stroke == const $CopyWithPlaceholder()
-          ? _value.stroke
-          // ignore: cast_nullable_to_non_nullable
-          : stroke as double?,
-      shadow: shadow == const $CopyWithPlaceholder()
-          ? _value.shadow
-          // ignore: cast_nullable_to_non_nullable
-          : shadow as BoxShadow?,
-    );
-  }
-}
-
-extension $SymbolButtonStyleCopyWith on SymbolButtonStyle {
-  /// Returns a callable class that can be used as follows: `instanceOfSymbolButtonStyle.copyWith(...)` or like so:`instanceOfSymbolButtonStyle.copyWith.fieldName(...)`.
-  // ignore: library_private_types_in_public_api
-  _$SymbolButtonStyleCWProxy get copyWith =>
-      _$SymbolButtonStyleCWProxyImpl(this);
-}

packages/wyatt_ui_components/lib/src/domain/entities/entities.dart

@@ -20,5 +20,7 @@ export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';
 export './error_widget_component.dart';
+export './loader_component.dart';
+export './loader_style.dart';
 export './loading_widget_component.dart';
 export './theme_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/loader_component.dart

@@ -0,0 +1,50 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'loader_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class LoaderComponent extends Component
+    with CopyWithMixin<$LoaderComponentCWProxy> {
+  const LoaderComponent({
+    this.colors,
+    this.radius,
+    this.stroke,
+    this.duration,
+    this.flip,
+    super.themeResolver,
+    super.key,
+  });
+
+  /// Gradient colors from start to end.
+  final MultiColor? colors;
+
+  /// Loader radius
+  final double? radius;
+
+  /// Loader stroke width
+  final double? stroke;
+
+  /// Animation duration
+  final Duration? duration;
+  
+  /// Flip the animation
+  final bool? flip;
+}

packages/wyatt_ui_components/lib/src/domain/entities/loader_component.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'loader_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $LoaderComponentCWProxy {
+  LoaderComponent colors(MultiColor? colors);
+  LoaderComponent radius(double? radius);
+  LoaderComponent stroke(double? stroke);
+  LoaderComponent duration(Duration? duration);
+  LoaderComponent flip(bool? flip);
+  LoaderComponent themeResolver(
+      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
+  LoaderComponent key(Key? key);
+  LoaderComponent call({
+    MultiColor? colors,
+    double? radius,
+    double? stroke,
+    Duration? duration,
+    bool? flip,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/loader_style.dart

@@ -0,0 +1,86 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+class LoaderStyle extends ThemeStyle<LoaderStyle> {
+  const LoaderStyle({
+    this.colors,
+    this.stroke,
+  });
+
+  /// Merges non-null `b` attributes in `a`
+  static LoaderStyle? merge(
+    LoaderStyle? a,
+    LoaderStyle? b,
+  ) {
+    if (b == null) {
+      return a?.copyWith();
+    }
+    if (a == null) {
+      return b.copyWith();
+    }
+
+    return a.copyWith(
+      colors: b.colors,
+      stroke: b.stroke,
+    );
+  }
+
+  /// Used for interpolation.
+  static LoaderStyle? lerp(
+    LoaderStyle? a,
+    LoaderStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      colors: MultiColor.lerp(a.colors, b.colors, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+    );
+  }
+
+  /// Gradient colors from start to end.
+  final MultiColor? colors;
+
+  /// Loader stroke width
+  final double? stroke;
+
+  @override
+  LoaderStyle mergeWith(LoaderStyle? other) => LoaderStyle.merge(this, other)!;
+
+  @override
+  LoaderStyle? lerpWith(LoaderStyle? other, double t) =>
+      LoaderStyle.lerp(this, other, t);
+
+  @override
+  LoaderStyle copyWith({
+    MultiColor? colors,
+    double? stroke,
+  }) =>
+      LoaderStyle(
+        colors: colors ?? this.colors,
+        stroke: stroke ?? this.stroke,
+      );
+
+  @override
+  String toString() => 'LoaderStyle($colors, $stroke)';
+}

packages/wyatt_ui_components/lib/src/domain/entities/theme_style.dart

@@ -22,4 +22,7 @@ abstract class ThemeStyle<T> {
 
   /// Used for interpolation.
   T? lerpWith(T? other, double t);
+
+  /// Copy with (mandatory for mergeWith, needs to be simple and ignore `null`)
+  T copyWith();
 }

packages/wyatt_ui_components/pubspec.yaml

@@ -9,7 +9,6 @@ environment:
   sdk: ">=2.17.0 <3.0.0"
 
 dependencies:
-  copy_with_extension: ^5.0.0
   flutter: { sdk: flutter }
   wyatt_component_copy_with_extension:
     git:
@@ -18,7 +17,6 @@ dependencies:
 
 dev_dependencies:
   build_runner: ^2.3.3
-  copy_with_extension_gen: ^5.0.0
   flutter_test: { sdk: flutter }
   wyatt_analysis:
     hosted: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub

packages/wyatt_ui_kit/example/lib/buttons/buttons.dart

@@ -20,10 +20,14 @@ import 'package:wyatt_ui_kit_example/buttons/file_selection_button/file_selectio
 import 'package:wyatt_ui_kit_example/buttons/flat_button/flat_buttons.dart';
 import 'package:wyatt_ui_kit_example/buttons/simple_icon_button/simple_icon_buttons.dart';
 import 'package:wyatt_ui_kit_example/buttons/symbol_button/symbol_buttons.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
 
-class Buttons extends StatelessWidget {
+class Buttons extends DemoPage {
   const Buttons({super.key});
 
+  @override
+  String get title => 'Buttons';
+
   @override
   Widget build(BuildContext context) => ListView(
         cacheExtent: 1000,
@@ -31,7 +35,7 @@ class Buttons extends StatelessWidget {
           const Gap(20),
           Align(
             child: Text(
-              'Buttons',
+              title,
               style: Theme.of(context).textTheme.titleLarge,
             ),
           ),

packages/wyatt_ui_kit/example/lib/cards/cards.dart

@@ -4,10 +4,14 @@ import 'package:wyatt_ui_kit_example/cards/information_card/information_cards.da
 import 'package:wyatt_ui_kit_example/cards/portfolio_card/portfolio_cards.dart';
 import 'package:wyatt_ui_kit_example/cards/quote_card/quote_cards.dart';
 import 'package:wyatt_ui_kit_example/cards/skill_card/skill_cards.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
 
-class Cards extends StatelessWidget {
+class Cards extends DemoPage {
   const Cards({super.key});
 
+  @override
+  String get title => 'Cards';
+
   @override
   Widget build(BuildContext context) => ListView(
         cacheExtent: 1000,
@@ -15,7 +19,7 @@ class Cards extends StatelessWidget {
           const Gap(20),
           Align(
             child: Text(
-              'Cards',
+              title,
               style: Theme.of(context).textTheme.titleLarge,
             ),
           ),

packages/wyatt_ui_kit/example/lib/demo_page.dart

@@ -0,0 +1,23 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+
+abstract class DemoPage extends StatelessWidget {
+  const DemoPage({super.key});
+
+  String get title;
+}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_kit_example/buttons/buttons.dart';
 import 'package:wyatt_ui_kit_example/cards/cards.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
+import 'package:wyatt_ui_kit_example/loaders/loaders.dart';
 import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
 const String title = 'Wyatt UIKit Example';
@@ -17,7 +19,8 @@ class Home extends StatefulWidget {
 }
 
 class _HomeState extends State<Home> {
-  final List<Widget> pages = const [Cards(), Buttons()];
+  // Simply add your demo page here.
+  final List<DemoPage> pages = const [Cards(), Buttons(), Loaders()];
 
   int currentIndex = 0;
 
@@ -27,35 +30,34 @@ class _HomeState extends State<Home> {
     super.initState();
   }
 
+  List<Widget> _drawerTiles(BuildContext context) {
+    final tiles = <Widget>[];
+    for (var i = 0; i < pages.length; i++) {
+      final page = pages[i];
+      tiles.add(
+        ListTile(
+          title: Text(page.title),
+          onTap: () {
+            if (currentIndex != i) {
+              setState(() {
+                currentIndex = i;
+              });
+              Navigator.pop(context);
+            }
+          },
+        ),
+      );
+    }
+
+    return tiles;
+  }
+
   @override
   Widget build(BuildContext context) => Scaffold(
         drawer: Drawer(
           child: ListView(
             padding: EdgeInsets.zero,
-            children: [
-              ListTile(
-                title: const Text('Cards'),
-                onTap: () {
-                  if (currentIndex != 0) {
-                    setState(() {
-                      currentIndex = 0;
-                    });
-                    Navigator.pop(context);
-                  }
-                },
-              ),
-              ListTile(
-                title: const Text('Buttons'),
-                onTap: () {
-                  if (currentIndex != 1) {
-                    setState(() {
-                      currentIndex = 1;
-                    });
-                    Navigator.pop(context);
-                  }
-                },
-              ),
-            ],
+            children: _drawerTiles(context),
           ),
         ),
         appBar: AppBar(

packages/wyatt_ui_kit/example/lib/loaders/loaders.dart

@@ -0,0 +1,68 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class Loaders extends DemoPage {
+  const Loaders({super.key});
+  
+  @override
+  String get title => 'Loaders';
+
+  @override
+  Widget build(BuildContext context) => ListView(
+        cacheExtent: 1000,
+        children: [
+          const Gap(20),
+          Align(
+            child: Text(
+              title,
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          const Gap(20),
+          const Loader(
+            radius: 57,
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: const [
+              Loader(
+                stroke: 5,
+              ),
+              Gap(20),
+              Loader(
+                colors: MultiColor([Constants.green2, Constants.white]),
+                stroke: 5,
+              ),
+              Gap(20),
+              Loader(
+                colors: MultiColor([Constants.red2, Constants.white]),
+                stroke: 5,
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+      
+}

packages/wyatt_ui_kit/example/lib/theme/loader_theme.dart

@@ -0,0 +1,63 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class LoaderTheme extends LoaderThemeExtension {
+  const LoaderTheme({
+    super.colors,
+    super.stroke,
+  });
+
+  factory LoaderTheme.light() => const LoaderTheme(
+        colors: MultiColor([Constants.blue1, Constants.white]),
+        stroke: 15,
+      );
+
+  factory LoaderTheme.dark() => const LoaderTheme(
+        colors: MultiColor([Constants.blue2, Constants.grey2]),
+        stroke: 15,
+      );
+
+  @override
+  ThemeExtension<LoaderThemeExtension> copyWith({
+    MultiColor? colors,
+    double? stroke,
+  }) =>
+      LoaderTheme(
+        colors: colors ?? this.colors,
+        stroke: stroke ?? this.stroke,
+      );
+
+  @override
+  ThemeExtension<LoaderThemeExtension> lerp(
+    covariant ThemeExtension<LoaderThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! LoaderTheme) {
+      return this;
+    }
+    return LoaderTheme(
+      colors: MultiColor.lerp(colors, other.colors, t),
+      stroke: lerpDouble(stroke, other.stroke, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/lib/theme/themes.dart

@@ -19,6 +19,7 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:wyatt_ui_kit_example/theme/file_selection_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/loader_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme_extension.dart';
@@ -67,46 +68,49 @@ abstract class Themes {
 
   static ThemeData get studioLight => materialLight.copyWith(
         appBarTheme: AppBarTheme(
-          foregroundColor: const Color.fromRGBO(36, 38, 42, 1),
-          backgroundColor: Colors.white,
+          foregroundColor: const Color(0xFF24262A),
+          backgroundColor: const Color(0xFFFFFFFF),
           titleTextStyle: GoogleFonts.montserrat(
             fontSize: 18,
             fontWeight: FontWeight.w500,
-            color: const Color.fromRGBO(36, 38, 42, 1),
+            color: const Color(0xFF24262A),
           ),
         ),
         scaffoldBackgroundColor: Colors.white,
         extensions: <ThemeExtension<dynamic>>[
           CustomCardColorExtension(
             backgroundColors: const [
-              Color.fromRGBO(246, 246, 246, 1),
+              Color(0xFFF6F6F6),
             ],
             secondaryBackgroundColors: Colors.white,
             borderColor: const [
-              Color.fromRGBO(221, 224, 227, 1),
-              Color.fromRGBO(202, 204, 212, 1),
+              Color(0xFFDDE0E3),
+              Color(0xFFCACCD4),
             ],
             title: GoogleFonts.montserrat(
               fontSize: 24,
               fontWeight: FontWeight.w500,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
             subtitle: GoogleFonts.montserrat(
               fontSize: 15,
               fontWeight: FontWeight.w300,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
             body: GoogleFonts.montserrat(
               fontSize: 12,
               fontWeight: FontWeight.w300,
               height: 1.7,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
           ),
+          // Buttons
           FlatButtonTheme.light(),
           SymbolButtonTheme.light(),
           SimpleIconButtonTheme.light(),
           FileSelectionButtonTheme.light(),
+          // Loader
+          LoaderTheme.light(),
         ],
       );
 
@@ -114,46 +118,50 @@ abstract class Themes {
 
   static ThemeData get studioDark => materialDark.copyWith(
         appBarTheme: AppBarTheme(
-          foregroundColor: Colors.white,
-          backgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+          foregroundColor: const Color(0xFFFFFFFF),
+          backgroundColor: const Color(0xFF383C40),
           titleTextStyle: GoogleFonts.montserrat(
             fontSize: 18,
             fontWeight: FontWeight.w500,
-            color: Colors.white,
+            color: const Color(0xFFFFFFFF),
           ),
         ),
-        scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+        scaffoldBackgroundColor: const Color(0xFF383C40),
         extensions: <ThemeExtension<dynamic>>[
           CustomCardColorExtension(
-            secondaryBackgroundColors: Colors.white.withOpacity(0.04),
+            secondaryBackgroundColors:
+                const Color(0xFFFFFFFF).withOpacity(0.04),
             backgroundColors: [
-              Colors.white.withOpacity(0.04),
+              const Color(0xFFFFFFFF).withOpacity(0.04),
             ],
             borderColor: const [
-              Color.fromRGBO(96, 101, 106, 1),
-              Color.fromRGBO(56, 60, 64, 1),
+              Color(0xFF60656A),
+              Color(0xFF383C40),
             ],
             title: GoogleFonts.montserrat(
               fontSize: 24,
               fontWeight: FontWeight.w500,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
             subtitle: GoogleFonts.montserrat(
               fontSize: 15,
               fontWeight: FontWeight.w300,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
             body: GoogleFonts.montserrat(
               fontSize: 12,
               fontWeight: FontWeight.w300,
               height: 1.7,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
           ),
+          // Buttons
           FlatButtonTheme.dark(),
           SymbolButtonTheme.dark(),
           SimpleIconButtonTheme.dark(),
           FileSelectionButtonTheme.dark(),
+          // Loader
+          LoaderTheme.dark(),
         ],
       );
 }

packages/wyatt_ui_kit/lib/src/components/components.dart

@@ -16,3 +16,4 @@
 
 export './buttons/buttons.dart';
 export './cards/cards.dart';
+export './loader/loader.dart';

packages/wyatt_ui_kit/lib/src/components/loader/loader.dart

@@ -0,0 +1,145 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/loader/loader_theme_resolver.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+part 'loader.g.dart';
+
+@ComponentCopyWithExtension()
+class Loader extends LoaderComponent with $LoaderCWMixin {
+  const Loader({
+    super.colors,
+    super.radius,
+    super.stroke,
+    super.duration,
+    super.flip,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  LoaderThemeResolver? get themeResolver =>
+      super.themeResolver as LoaderThemeResolver?;
+
+  /// Negotiate the theme to get a complete style.
+  LoaderStyle _resolve(BuildContext context) {
+    final LoaderThemeResolver resolver = themeResolver ??
+        LoaderThemeResolver(
+          computeExtensionValueFn: (
+            context,
+            defaultValue,
+            themeExtension, {
+            extra,
+          }) =>
+              LoaderStyle(
+            colors: themeExtension.colors,
+            stroke: themeExtension.stroke,
+          ),
+          customStyleFn: (context, {extra}) => LoaderStyle(
+            colors: colors,
+            stroke: stroke,
+          ),
+        );
+
+    return resolver.negotiate(context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final style = _resolve(context);
+    final dimension =
+        (radius != null) ? radius! * 2 : context.buttonTheme.height;
+
+    return SizedBox.square(
+      dimension: dimension,
+      child: RepaintBoundary(
+        child: CustomPaint(
+          painter: _LoaderPainter(
+            style.colors!,
+            dimension / 2,
+            style.stroke!,
+            flip: flip ?? false,
+          ),
+        )
+            .animate(
+              onPlay: (controller) => controller.repeat(),
+            )
+            .rotate(
+              duration: duration ?? 900.ms,
+              begin: (flip ?? false) ? 0 : 1,
+              end: (flip ?? false) ? 1 : 0,
+            ),
+      ),
+    );
+  }
+}
+
+class _LoaderPainter extends CustomPainter {
+  _LoaderPainter(
+    this.colors,
+    this.radius,
+    this.stroke, {
+    required this.flip,
+  });
+
+  final MultiColor colors;
+  final double radius;
+  final double stroke;
+  final bool flip;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    final circleSurface = Rect.fromCircle(center: center, radius: radius);
+
+    final dotColor = colors.color;
+    final dotCenter =
+        Offset(size.width / 2 + (flip ? -radius : radius), size.height / 2);
+    final gradient =
+        colors.isGradient ? colors.colors : [colors.color, colors.color];
+
+    final gradientCirclePainter = Paint()
+      ..shader = SweepGradient(
+        colors: (flip ? gradient.reversed : gradient).toList(),
+        transform: flip ? const GradientRotation(pi) : null,
+      ).createShader(circleSurface)
+      ..strokeWidth = stroke
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round;
+
+    final dotPainter = Paint()
+      ..color = dotColor
+      ..style = PaintingStyle.fill
+      ..strokeCap = StrokeCap.round;
+
+    canvas
+      ..drawCircle(center, radius, gradientCirclePainter)
+      ..drawCircle(dotCenter, stroke / 2, dotPainter);
+  }
+
+  @override
+  bool shouldRepaint(_LoaderPainter oldDelegate) => false;
+
+  @override
+  bool shouldRebuildSemantics(_LoaderPainter oldDelegate) => false;
+}

packages/wyatt_ui_kit/lib/src/components/loader/loader.g.dart

@@ -0,0 +1,51 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'loader.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $LoaderCWProxyImpl implements $LoaderComponentCWProxy {
+  const $LoaderCWProxyImpl(this._value);
+  final Loader _value;
+  @override
+  Loader colors(MultiColor? colors) => this(colors: colors);
+  @override
+  Loader radius(double? radius) => this(radius: radius);
+  @override
+  Loader stroke(double? stroke) => this(stroke: stroke);
+  @override
+  Loader duration(Duration? duration) => this(duration: duration);
+  @override
+  Loader flip(bool? flip) => this(flip: flip);
+  @override
+  Loader themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
+  @override
+  Loader key(Key? key) => this(key: key);
+  @override
+  Loader call({
+    MultiColor? colors,
+    double? radius,
+    double? stroke,
+    Duration? duration,
+    bool? flip,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
+    Key? key,
+  }) =>
+      Loader(
+        colors: colors ?? _value.colors,
+        radius: radius ?? _value.radius,
+        stroke: stroke ?? _value.stroke,
+        duration: duration ?? _value.duration,
+        flip: flip ?? _value.flip,
+        themeResolver: themeResolver ?? _value.themeResolver,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $LoaderCWMixin on Component {
+  $LoaderComponentCWProxy get copyWith => $LoaderCWProxyImpl(this as Loader);
+}

packages/wyatt_ui_kit/lib/src/components/loader/loader_theme_resolver.dart

@@ -0,0 +1,53 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class LoaderThemeResolver
+    extends ThemeResolver<LoaderStyle, LoaderThemeExtension, void> {
+  const LoaderThemeResolver({
+    required this.computeExtensionValueFn,
+    required this.customStyleFn,
+  });
+
+  /// Values taken from <https://api.flutter.dev/flutter/material/ElevatedButton/defaultStyleOf.html>
+  @override
+  LoaderStyle computeDefaultValue(
+    BuildContext context, {
+    void extra,
+  }) =>
+      LoaderStyle(
+        colors: MultiColor([
+          Theme.of(context).progressIndicatorTheme.color ??
+              context.colorScheme.primary,
+          context.colorScheme.onPrimary,
+        ]),
+        stroke: 4,
+      );
+
+  @override
+  final LoaderStyle? Function(
+    BuildContext context,
+    LoaderStyle defaultValue,
+    LoaderThemeExtension themeExtension, {
+    void extra,
+  }) computeExtensionValueFn;
+
+  @override
+  final LoaderStyle? Function(BuildContext context, {void extra}) customStyleFn;
+}

packages/wyatt_ui_kit/lib/src/domain/domain.dart

@@ -14,5 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-export 'button_theme_extension/button_theme_extension.dart';
+export './button_theme_extension/button_theme_extension.dart';
+export './loader_theme_extension.dart';
 export 'card_theme_extension.dart';

packages/wyatt_ui_kit/lib/src/domain/loader_theme_extension.dart

@@ -0,0 +1,32 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class LoaderThemeExtension
+    extends ThemeExtension<LoaderThemeExtension> {
+  const LoaderThemeExtension({
+    this.colors,
+    this.stroke,
+  });
+
+  /// Gradient colors from start to end.
+  final MultiColor? colors;
+
+  /// Loader stroke width
+  final double? stroke;
+}