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: [
+            children: _drawerTiles(context),
-              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);
-                  }
-                },
-              ),
-            ],
           ),
         ),
         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),
+          foregroundColor: const Color(0xFF24262A),
-          backgroundColor: Colors.white,
+          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(0xFFDDE0E3),
-              Color.fromRGBO(202, 204, 212, 1),
+              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,
+          foregroundColor: const Color(0xFFFFFFFF),
-          backgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+          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(0xFF60656A),
-              Color.fromRGBO(56, 60, 64, 1),
+              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(),
         ],
       );
 }