ui_kit/feat/button-components #134

Merged
hugo merged 35 commits from ui_kit/feat/button-components into master 2023-02-16 08:58:03 +00:00
4 changed files with 193 additions and 96 deletions
Showing only changes of commit c786c153e0 - Show all commits

View File

@ -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.
> This will forces `Buttons` page with `Studio` theme

View File

@ -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<Home> {
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);
},
),
],
)
],
),

View File

@ -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<String> 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: <ThemeExtension<dynamic>>[
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: <ThemeExtension<dynamic>>[
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,

View File

@ -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 <https://www.gnu.org/licenses/>.
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<Set<ThemeData>> 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: <ThemeExtension<dynamic>>[
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: <ThemeExtension<dynamic>>[
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(),
],
);
}