feat(ui_kit): implement top app bar and update example

packages/wyatt_ui_kit/example/lib/bars/bars.dart

@@ -0,0 +1,69 @@
+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';
+
+class Bars extends DemoPage {
+  const Bars({super.key});
+
+  @override
+  Widget build(BuildContext context) => ListView(
+        cacheExtent: 1000,
+        children: [
+          const Gap(20),
+          TopAppBar(
+            leading: Padding(
+              padding: const EdgeInsets.all(8),
+              child: Image.asset('assets/images/studio_logo.png'),
+            ),
+            title: 'Wyatt Studio'.wrap(
+              gradientColors: const MultiColor(
+                [
+                  Color.fromRGBO(57, 167, 254, 1),
+                  Color.fromRGBO(71, 94, 241, 1),
+                ],
+              ),
+            ),
+            actions: [
+              IconButton(onPressed: () {}, icon: const Icon(Icons.menu))
+            ],
+          ),
+          const Gap(20),
+          TopAppBar(
+            leading: Padding(
+              padding: const EdgeInsets.all(8),
+              child: Image.asset('assets/images/studio_logo.png'),
+            ),
+            title: 'Wyatt Studio'.wrap(
+              gradientColors: const MultiColor(
+                [
+                  Color.fromRGBO(57, 167, 254, 1),
+                  Color.fromRGBO(71, 94, 241, 1),
+                ],
+              ),
+            ),
+            expandedWidget: const [
+              ListTile(
+                title: Text('Votre programme'),
+              ),
+              ListTile(
+                title: Text('Votre programme'),
+              ),
+              ListTile(
+                title: Text('Votre programme'),
+              )
+            ],
+            actions: [
+              IconButton(
+                onPressed: () {},
+                icon: const Icon(Icons.clear),
+              )
+            ],
+          ),
+        ],
+      );
+
+  @override
+  String get title => 'Bars';
+}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -1,6 +1,7 @@
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:wyatt_ui_kit_example/bars/bars.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';
@@ -28,6 +29,7 @@ class _HomeState extends State<Home> {
     Loaders(),
     RichTextBuilders(),
     TextInputs(),
+    Bars(),
   ];
 
   int currentIndex = 0;

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

@@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit_example/theme/rich_text_builder_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/text_input_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/top_app_bar_theme.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {
@@ -92,6 +93,7 @@ abstract class Themes {
           // Rich Text
           RichTextBuilderTheme.light(),
           TextInputTheme.light(),
+          TopAppBarTheme.light(),
         ],
       );
 
@@ -124,6 +126,7 @@ abstract class Themes {
           // Rich Text
           RichTextBuilderTheme.dark(),
           TextInputTheme.dark(),
+          TopAppBarTheme.dark(),
         ],
       );
 }

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

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class TopAppBarTheme extends TopAppBarThemeExtension {
+  const TopAppBarTheme({
+    super.iconTheme,
+    super.backgroundColors,
+    super.expandedDividerStyle,
+    super.titleStyle,
+  });
+
+  factory TopAppBarTheme.light() => TopAppBarTheme(
+        backgroundColors: const MultiColor.single(
+          Color.fromRGBO(246, 246, 246, 1),
+        ),
+        expandedDividerStyle: Colors.black.withOpacity(0.1),
+        titleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.bold,
+          fontSize: 18,
+        ),
+        iconTheme: const IconThemeData(color: Colors.black),
+      );
+
+  factory TopAppBarTheme.dark() => TopAppBarTheme(
+        backgroundColors: const MultiColor([
+          Color.fromRGBO(44, 50, 56, 1),
+          Color.fromRGBO(39, 47, 61, 1),
+          Color.fromRGBO(44, 50, 56, 1),
+        ]),
+        expandedDividerStyle: Colors.white.withOpacity(0.1),
+        titleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.bold,
+          fontSize: 18,
+        ),
+        iconTheme: const IconThemeData(color: Colors.white),
+      );
+
+  @override
+  ThemeExtension<TopAppBarThemeExtension> copyWith({
+    IconThemeData? iconTheme,
+    MultiColor? backgroundColors,
+    Color? expandedDividerStyle,
+    TextStyle? titleStyle,
+  }) =>
+      TopAppBarTheme(
+        iconTheme: iconTheme ?? this.iconTheme,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        expandedDividerStyle: expandedDividerStyle ?? this.expandedDividerStyle,
+        titleStyle: titleStyle ?? this.titleStyle,
+      );
+
+  @override
+  ThemeExtension<TopAppBarThemeExtension> lerp(
+    covariant ThemeExtension<TopAppBarThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! TopAppBarTheme) {
+      return this;
+    }
+    return TopAppBarTheme(
+      iconTheme: IconThemeData.lerp(iconTheme, other.iconTheme, t),
+      backgroundColors:
+          MultiColor.lerp(backgroundColors, other.backgroundColors, t),
+      expandedDividerStyle:
+          Color.lerp(expandedDividerStyle, other.expandedDividerStyle, t),
+      titleStyle: TextStyle.lerp(titleStyle, other.titleStyle, t),
+    );
+  }
+}