diff --git a/packages/wyatt_ui_kit/example/README.md b/packages/wyatt_ui_kit/example/README.md index 510ce200..2a7d7923 100644 --- a/packages/wyatt_ui_kit/example/README.md +++ b/packages/wyatt_ui_kit/example/README.md @@ -3,7 +3,7 @@ You can force the launch page. (For debug purposes). ```shell -flutter run -d macos --dart-define PAGE=1 +flutter run -d macos --dart-define PAGE=1 --dart-define THEME=1 ``` -> This will forces button page. \ No newline at end of file +> This will forces `Buttons` page with `Studio` theme \ No newline at end of file diff --git a/packages/wyatt_ui_kit/example/lib/home.dart b/packages/wyatt_ui_kit/example/lib/home.dart index 69ab4cec..9e156207 100644 --- a/packages/wyatt_ui_kit/example/lib/home.dart +++ b/packages/wyatt_ui_kit/example/lib/home.dart @@ -1,7 +1,9 @@ import 'package:adaptive_theme/adaptive_theme.dart'; 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/theme/themes.dart'; const String title = 'Wyatt UIKit Example'; @@ -59,13 +61,35 @@ class _HomeState extends State { appBar: AppBar( title: const Text(title), actions: [ - Switch.adaptive( - value: AdaptiveTheme.of(context).isDefault, - onChanged: (_) { - AdaptiveTheme.of(context).isDefault - ? AdaptiveTheme.of(context).setDark() - : AdaptiveTheme.of(context).setLight(); - }, + Row( + children: [ + const Text('Mode'), + Switch.adaptive( + value: + AdaptiveTheme.of(context).brightness == Brightness.dark, + onChanged: (_) { + AdaptiveTheme.of(context).brightness == Brightness.light + ? AdaptiveTheme.of(context).setDark() + : AdaptiveTheme.of(context).setLight(); + }, + ), + ], + ), + const Gap(30), + Row( + children: [ + const Text('Studio'), + Switch.adaptive( + value: Themes.currentThemeIndex == 1, + onChanged: (_) { + setState(() { + Themes.currentThemeIndex = + (Themes.currentThemeIndex == 1) ? 0 : 1; + }); + Themes.auto(context); + }, + ), + ], ) ], ), diff --git a/packages/wyatt_ui_kit/example/lib/main.dart b/packages/wyatt_ui_kit/example/lib/main.dart index 1776ee88..12d39646 100644 --- a/packages/wyatt_ui_kit/example/lib/main.dart +++ b/packages/wyatt_ui_kit/example/lib/main.dart @@ -17,111 +17,32 @@ import 'package:adaptive_theme/adaptive_theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; -import 'package:google_fonts/google_fonts.dart'; import 'package:wyatt_ui_kit_example/home.dart'; -import 'package:wyatt_ui_kit_example/theme_extension.dart'; +import 'package:wyatt_ui_kit_example/theme/themes.dart'; void main(List args) { const forcePage = int.fromEnvironment('PAGE'); + const forceTheme = int.fromEnvironment('THEME'); + Themes.currentThemeIndex = forceTheme; runApp( const App( defaultPage: forcePage, + defaultTheme: forceTheme, ), ); } class App extends StatelessWidget { - const App({required this.defaultPage, super.key}); + const App({required this.defaultPage, required this.defaultTheme, super.key}); final int defaultPage; + final int defaultTheme; @override Widget build(BuildContext context) => AdaptiveTheme( initial: AdaptiveThemeMode.light, - light: ThemeData.light().copyWith( - appBarTheme: AppBarTheme( - foregroundColor: const Color.fromRGBO(36, 38, 42, 1), - backgroundColor: Colors.white, - titleTextStyle: GoogleFonts.montserrat( - fontSize: 18, - fontWeight: FontWeight.w500, - color: const Color.fromRGBO(36, 38, 42, 1), - ), - ), - scaffoldBackgroundColor: Colors.white, - extensions: >[ - CustomCardColorExtension( - backgroundColors: const [ - Color.fromRGBO(246, 246, 246, 1), - ], - secondaryBackgroundColors: Colors.white, - borderColor: const [ - Color.fromRGBO(221, 224, 227, 1), - Color.fromRGBO(202, 204, 212, 1), - ], - title: GoogleFonts.montserrat( - fontSize: 24, - fontWeight: FontWeight.w500, - color: const Color.fromRGBO(36, 38, 42, 1), - ), - subtitle: GoogleFonts.montserrat( - fontSize: 15, - fontWeight: FontWeight.w300, - color: const Color.fromRGBO(36, 38, 42, 1), - ), - body: GoogleFonts.montserrat( - fontSize: 12, - fontWeight: FontWeight.w300, - height: 1.7, - color: const Color.fromRGBO(36, 38, 42, 1), - ), - ), - // FlatButtonTheme.light(), - // SymbolButtonTheme.light(), - ], - ), - dark: ThemeData.dark().copyWith( - appBarTheme: AppBarTheme( - foregroundColor: Colors.white, - backgroundColor: const Color.fromRGBO(56, 60, 64, 1), - titleTextStyle: GoogleFonts.montserrat( - fontSize: 18, - fontWeight: FontWeight.w500, - color: Colors.white, - ), - ), - scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1), - extensions: >[ - CustomCardColorExtension( - secondaryBackgroundColors: Colors.white.withOpacity(0.04), - backgroundColors: [ - Colors.white.withOpacity(0.04), - ], - borderColor: const [ - Color.fromRGBO(96, 101, 106, 1), - Color.fromRGBO(56, 60, 64, 1), - ], - title: GoogleFonts.montserrat( - fontSize: 24, - fontWeight: FontWeight.w500, - color: Colors.white, - ), - subtitle: GoogleFonts.montserrat( - fontSize: 15, - fontWeight: FontWeight.w300, - color: Colors.white, - ), - body: GoogleFonts.montserrat( - fontSize: 12, - fontWeight: FontWeight.w300, - height: 1.7, - color: Colors.white, - ), - ), - // FlatButtonTheme.dark(), - // SymbolButtonTheme.dark(), - ], - ), + light: Themes.lightFromTheme(defaultTheme), + dark: Themes.darkFromTheme(defaultTheme), builder: (light, dark) => MaterialApp( localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, diff --git a/packages/wyatt_ui_kit/example/lib/theme/themes.dart b/packages/wyatt_ui_kit/example/lib/theme/themes.dart new file mode 100644 index 00000000..62128247 --- /dev/null +++ b/packages/wyatt_ui_kit/example/lib/theme/themes.dart @@ -0,0 +1,152 @@ +// 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:adaptive_theme/adaptive_theme.dart'; +import 'package:flutter/material.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart'; +import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart'; +import 'package:wyatt_ui_kit_example/theme_extension.dart'; + +/// Easely switch between Material and Studio themes. +abstract class Themes { + static int currentThemeIndex = 0; + + static List> themes = [ + {materialLight, materialDark}, + {studioLight, studioDark}, + ]; + + static ThemeData lightFromTheme(int themeId) { + currentThemeIndex = themeId; + return themes[themeId].first; + } + static ThemeData darkFromTheme(int themeId) { + currentThemeIndex = themeId; + return themes[themeId].last; + } + + static void auto(BuildContext context) { + if (currentThemeIndex == 1) { + return studio(context); + } + return material(context); + } + + static void material(BuildContext context) { + AdaptiveTheme.of(context).setTheme( + light: materialLight, + dark: materialDark, + ); + } + + static void studio(BuildContext context) { + AdaptiveTheme.of(context).setTheme( + light: studioLight, + dark: studioDark, + ); + } + + static ThemeData get materialLight => ThemeData.light(); + + static ThemeData get studioLight => materialLight.copyWith( + appBarTheme: AppBarTheme( + foregroundColor: const Color.fromRGBO(36, 38, 42, 1), + backgroundColor: Colors.white, + titleTextStyle: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO(36, 38, 42, 1), + ), + ), + scaffoldBackgroundColor: Colors.white, + extensions: >[ + CustomCardColorExtension( + backgroundColors: const [ + Color.fromRGBO(246, 246, 246, 1), + ], + secondaryBackgroundColors: Colors.white, + borderColor: const [ + Color.fromRGBO(221, 224, 227, 1), + Color.fromRGBO(202, 204, 212, 1), + ], + title: GoogleFonts.montserrat( + fontSize: 24, + fontWeight: FontWeight.w500, + color: const Color.fromRGBO(36, 38, 42, 1), + ), + subtitle: GoogleFonts.montserrat( + fontSize: 15, + fontWeight: FontWeight.w300, + color: const Color.fromRGBO(36, 38, 42, 1), + ), + body: GoogleFonts.montserrat( + fontSize: 12, + fontWeight: FontWeight.w300, + height: 1.7, + color: const Color.fromRGBO(36, 38, 42, 1), + ), + ), + FlatButtonTheme.light(), + SymbolButtonTheme.light(), + ], + ); + + static ThemeData get materialDark => ThemeData.dark(); + + static ThemeData get studioDark => materialDark.copyWith( + appBarTheme: AppBarTheme( + foregroundColor: Colors.white, + backgroundColor: const Color.fromRGBO(56, 60, 64, 1), + titleTextStyle: GoogleFonts.montserrat( + fontSize: 18, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + ), + scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1), + extensions: >[ + CustomCardColorExtension( + secondaryBackgroundColors: Colors.white.withOpacity(0.04), + backgroundColors: [ + Colors.white.withOpacity(0.04), + ], + borderColor: const [ + Color.fromRGBO(96, 101, 106, 1), + Color.fromRGBO(56, 60, 64, 1), + ], + title: GoogleFonts.montserrat( + fontSize: 24, + fontWeight: FontWeight.w500, + color: Colors.white, + ), + subtitle: GoogleFonts.montserrat( + fontSize: 15, + fontWeight: FontWeight.w300, + color: Colors.white, + ), + body: GoogleFonts.montserrat( + fontSize: 12, + fontWeight: FontWeight.w300, + height: 1.7, + color: Colors.white, + ), + ), + FlatButtonTheme.dark(), + SymbolButtonTheme.dark(), + ], + ); +}