diff --git a/catalog/gallery/lib/catalog/catalog_app_button_screen.dart b/catalog/gallery/lib/catalog/catalog_app_button_screen.dart index 220ee60..6d028e9 100644 --- a/catalog/gallery/lib/catalog/catalog_app_button_screen.dart +++ b/catalog/gallery/lib/catalog/catalog_app_button_screen.dart @@ -1,5 +1,8 @@ import 'package:auto_route/auto_route.dart'; +import 'package:catalog/catalog.dart'; +import 'package:catalog/theme/app_buttons.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gallery/catalog/catalog_scaffold_screen.dart'; @RoutePage() @@ -9,6 +12,44 @@ class CatalogAppButtonScreen extends StatelessWidget { @override Widget build(BuildContext context) => CatalogScaffold( title: 'BUTTONS', - child: Container(), + child: SingleChildScrollView( + child: Column( + children: [ + const SizedBox(height: 10), + FilledButton( + onPressed: () => {}, + child: const Text('PRIMARY FILLED BUTTON'), + ), + SizedBox(height: 10.h), + StrokeButton( + onPressed: () => {}, + child: const Text('PRIMARY STROKE BUTTON'), + ), + SizedBox(height: 10.h), + GhostButton( + onPressed: () => {}, + child: const Text('PRIMARY GHOST BUTTON'), + ), + SizedBox(height: 10.h), + FilledButton( + style: context.theme.buttonsStyle.secondaryFilledButton, + onPressed: (){}, + child: const Text('SECONDARY FILLED BUTTON'), + ), + SizedBox(height: 10.h), + StrokeButton( + style: context.theme.buttonsStyle.secondaryOutlineButton, + onPressed: (){}, + child: const Text('SECONDARY STROKE BUTTON'), + ), + SizedBox(height: 10.h), + GhostButton( + style: context.theme.buttonsStyle.secondaryTextButton, + onPressed: (){}, + child: const Text('SECONDARY GHOST BUTTON'), + ), + ], + ), + ), ); } diff --git a/catalog/gallery/lib/catalog/catalog_scaffold_screen.dart b/catalog/gallery/lib/catalog/catalog_scaffold_screen.dart index 1fdc41a..672e33b 100644 --- a/catalog/gallery/lib/catalog/catalog_scaffold_screen.dart +++ b/catalog/gallery/lib/catalog/catalog_scaffold_screen.dart @@ -17,26 +17,23 @@ class CatalogScaffold extends StatelessWidget { @override Widget build(BuildContext context) => Scaffold( appBar: AppBar( - backgroundColor: context.theme.colors.primary.shade400, leading: showBack ?? true ? IconButton( icon: Icon( - Icons.arrow_back, + Icons.chevron_left, color: context.theme.colors.primary.shade100, ), onPressed: () => context.router.pop(), ) : null, - title: Text( - title, - style: TextStyle( - color: context.theme.customColors.textColor!.getShade(100), - ), - ), + title: Text(title), ), backgroundColor: context.theme.customColors.textColor!.getShade(100), body: SafeArea( - child: child, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: child, + ), ), ); } diff --git a/catalog/lib/theme/app_buttons.dart b/catalog/lib/theme/app_buttons.dart new file mode 100644 index 0000000..1910646 --- /dev/null +++ b/catalog/lib/theme/app_buttons.dart @@ -0,0 +1,136 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:catalog/theme/app_color_scheme.dart'; +import 'package:catalog/theme/custom_colors.dart'; +import 'package:catalog/theme/custom_text_styles.dart'; + +typedef StrokeButton = OutlinedButton; +typedef GhostButton = TextButton; + +class AppButtonsStyle { + final ButtonStyle filledButton = _appFilledButton; + final ButtonStyle outlineButton = _appOutlineButton; + final ButtonStyle textButton = _appTextButton; + final ButtonStyle secondaryFilledButton = _appSecondaryFilledButton; + final ButtonStyle secondaryOutlineButton = _appSecondaryOutlineButton; + final ButtonStyle secondaryTextButton = _appSecondaryTextButton; + + AppButtonsStyle(); + + static AppButtonsStyle getButtonTheme() => AppButtonsStyle(); +} + +final _appFilledButton = FilledButton.styleFrom( + minimumSize: Size(double.infinity, 50.h), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.r), + ), + textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge, + elevation: 0.0, + foregroundColor: CustomColors.getCustomColors().textColor!.getShade(100), +); + +final _appOutlineButton = OutlinedButton.styleFrom( + minimumSize: Size(double.infinity, 50.h), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.r), + ), + side: BorderSide( + width: 2, + color: AppColorScheme.getDefaultColorScheme().primary, + ), + textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge, + elevation: 0.0, +); + +final _appTextButton = TextButton.styleFrom( + minimumSize: Size(double.infinity, 50.h), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.r)), + textStyle: CustomTextStyles.getCustomTextStyles().buttonLarge, + elevation: 0.0, +); + +final _appSecondaryFilledButton = _appFilledButton.copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.pressed)) { + return CustomColors.getCustomColors().textColor!.getShade(500); + } + if (states.contains(MaterialState.disabled)) { + return AppColorScheme.getDefaultColorScheme().surface.shade500; + } + if (states.contains(MaterialState.hovered)) { + return AppColorScheme.getDefaultColorScheme().onSurface.shade400; + } + if (states.contains(MaterialState.focused)) { + return CustomColors.getCustomColors().textColor!.getShade(400); + } + return CustomColors.getCustomColors().textColor!.getShade(300); + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) => + CustomColors.getCustomColors().textColor!.getShade(100), + ), +); + +final _appSecondaryOutlineButton = _appOutlineButton.copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.pressed)) { + return AppColorScheme.getDefaultColorScheme().surface.shade400; + } + if (states.contains(MaterialState.disabled)) { + return AppColorScheme.getDefaultColorScheme().surface.shade500; + } + if (states.contains(MaterialState.hovered)) { + return AppColorScheme.getDefaultColorScheme().surface.shade300; + } + if (states.contains(MaterialState.focused)) { + return AppColorScheme.getDefaultColorScheme().surface.shade300; + } + return Colors.transparent; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.pressed)) { + return CustomColors.getCustomColors().textColor!.getShade(500); + } + return CustomColors.getCustomColors().textColor!.getShade(300); + }, + ), + side: MaterialStateProperty.resolveWith( + (Set states) => BorderSide( + color: CustomColors.getCustomColors().textColor!.getShade(300)!, + ), + ), +); + +final _appSecondaryTextButton = _appTextButton.copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.pressed)) { + return AppColorScheme.getDefaultColorScheme().surface.shade300; + } + if (states.contains(MaterialState.disabled)) { + return AppColorScheme.getDefaultColorScheme().surface.shade500; + } + if (states.contains(MaterialState.hovered)) { + return AppColorScheme.getDefaultColorScheme().surface.shade200; + } + if (states.contains(MaterialState.focused)) { + return AppColorScheme.getDefaultColorScheme().surface.shade200; + } + return Colors.transparent; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.pressed)) { + return CustomColors.getCustomColors().textColor!.getShade(500); + } + return CustomColors.getCustomColors().textColor!.getShade(300); + }, + ), +); diff --git a/catalog/lib/theme/app_theme.dart b/catalog/lib/theme/app_theme.dart index 164fb0e..da40bd4 100644 --- a/catalog/lib/theme/app_theme.dart +++ b/catalog/lib/theme/app_theme.dart @@ -4,6 +4,7 @@ import 'package:catalog/theme/custom_text_styles.dart'; import 'package:flutter/material.dart'; import 'package:catalog/theme/app_dimensions.dart'; import 'package:catalog/theme/custom_colors.dart'; +import 'package:catalog/theme/app_buttons.dart'; class AppTheme { static ThemeData provideAppTheme(BuildContext buildContext) { @@ -19,7 +20,25 @@ class AppTheme { ], primaryColor: colors.primary, colorScheme: colors, - textTheme: textTheme, + filledButtonTheme: FilledButtonThemeData( + style: AppButtonsStyle.getButtonTheme().filledButton, + ), + outlinedButtonTheme: OutlinedButtonThemeData( + style: AppButtonsStyle.getButtonTheme().outlineButton, + ), + textButtonTheme: TextButtonThemeData( + style: AppButtonsStyle.getButtonTheme().textButton, + ), + textTheme: textTheme.apply( + bodyColor: CustomColors.getCustomColors().textColor, + displayColor: CustomColors.getCustomColors().textColor!.getShade(500), + ), + appBarTheme: AppBarTheme( + backgroundColor: colors.primary.shade400, + titleTextStyle: TextStyle( + color: CustomColors.getCustomColors().textColor!.getShade(500), + ), + ), primaryTextTheme: textTheme, ); } @@ -36,4 +55,6 @@ extension ThemeExtensions on ThemeData { TextTheme get textStyles => AppTextStyles.getDefaultAppStyles().getThemeData(); + + AppButtonsStyle get buttonsStyle => AppButtonsStyle.getButtonTheme(); }