diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
index 959cfbfd..cc2e1779 100644
--- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
+++ b/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,
),
),
diff --git a/packages/wyatt_ui_kit/example/lib/cards/cards.dart b/packages/wyatt_ui_kit/example/lib/cards/cards.dart
index fbbf058b..9037385f 100644
--- a/packages/wyatt_ui_kit/example/lib/cards/cards.dart
+++ b/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,
),
),
diff --git a/packages/wyatt_ui_kit/example/lib/demo_page.dart b/packages/wyatt_ui_kit/example/lib/demo_page.dart
new file mode 100644
index 00000000..4d3aea9a
--- /dev/null
+++ b/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 .
+
+import 'package:flutter/material.dart';
+
+abstract class DemoPage extends StatelessWidget {
+ const DemoPage({super.key});
+
+ String get title;
+}
diff --git a/packages/wyatt_ui_kit/example/lib/home.dart b/packages/wyatt_ui_kit/example/lib/home.dart
index 9e156207..72b3ce4a 100644
--- a/packages/wyatt_ui_kit/example/lib/home.dart
+++ b/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 {
- final List pages = const [Cards(), Buttons()];
+ // Simply add your demo page here.
+ final List pages = const [Cards(), Buttons(), Loaders()];
int currentIndex = 0;
@@ -27,35 +30,34 @@ class _HomeState extends State {
super.initState();
}
+ List _drawerTiles(BuildContext context) {
+ final tiles = [];
+ 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(
diff --git a/packages/wyatt_ui_kit/example/lib/loaders/loaders.dart b/packages/wyatt_ui_kit/example/lib/loaders/loaders.dart
new file mode 100644
index 00000000..bc5d8945
--- /dev/null
+++ b/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 .
+
+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),
+ ],
+ );
+
+}
diff --git a/packages/wyatt_ui_kit/example/lib/theme/loader_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/loader_theme.dart
new file mode 100644
index 00000000..e5050d89
--- /dev/null
+++ b/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 .
+
+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 copyWith({
+ MultiColor? colors,
+ double? stroke,
+ }) =>
+ LoaderTheme(
+ colors: colors ?? this.colors,
+ stroke: stroke ?? this.stroke,
+ );
+
+ @override
+ ThemeExtension lerp(
+ covariant ThemeExtension? other,
+ double t,
+ ) {
+ if (other is! LoaderTheme) {
+ return this;
+ }
+ return LoaderTheme(
+ colors: MultiColor.lerp(colors, other.colors, t),
+ stroke: lerpDouble(stroke, other.stroke, t),
+ );
+ }
+}
diff --git a/packages/wyatt_ui_kit/example/lib/theme/themes.dart b/packages/wyatt_ui_kit/example/lib/theme/themes.dart
index ab8720fb..c298daf8 100644
--- a/packages/wyatt_ui_kit/example/lib/theme/themes.dart
+++ b/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: >[
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: >[
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(),
],
);
}