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

2023-02-22 15:50:46 +01:00
parent 41a484c013
commit ad0f1ec1c5
13 changed files with 536 additions and 0 deletions
@@ -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(),
        ],
      );
 }
@@ -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),
+    );
+  }
+}