feat: add buttons (#195)

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'),
+              ),
+            ],
+          ),
+        ),
       );
 }

catalog/gallery/lib/catalog/catalog_scaffold_screen.dart

@@ -17,24 +17,22 @@ 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.colors.textColor.shade100),
-          ),
+          title: Text(title),
         ),
-        backgroundColor: context.theme.colors.primary.shade200,
         body: SafeArea(
-          child: child,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: child,
+          ),
         ),
       );
 }

catalog/lib/theme/app_buttons.dart

@@ -0,0 +1,135 @@
+import 'package:catalog/theme/app_text_styles.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:catalog/theme/app_colors.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: AppTextStyles.getAppStyles().buttonLarge,
+  elevation: 0.0,
+  foregroundColor: AppColors.getColorScheme().textColor.shade100,
+);
+
+final _appOutlineButton = OutlinedButton.styleFrom(
+  minimumSize: Size(double.infinity, 50.h),
+  shape: RoundedRectangleBorder(
+    borderRadius: BorderRadius.circular(16.r),
+  ),
+  side: BorderSide(
+    width: 2,
+    color: AppColors.getColorScheme().primary,
+  ),
+  textStyle: AppTextStyles.getAppStyles().buttonLarge,
+  elevation: 0.0,
+);
+
+final _appTextButton = TextButton.styleFrom(
+  minimumSize: Size(double.infinity, 50.h),
+  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.r)),
+  textStyle: AppTextStyles.getAppStyles().buttonLarge,
+  elevation: 0.0,
+);
+
+final _appSecondaryFilledButton = _appFilledButton.copyWith(
+  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return AppColors.getColorScheme().textColor.shade500;
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return AppColors.getColorScheme().surface.shade500;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return AppColors.getColorScheme().onSurface.shade400;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return AppColors.getColorScheme().textColor.shade400;
+      }
+      return AppColors.getColorScheme().textColor.shade300;
+    },
+  ),
+  foregroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) =>
+        AppColors.getColorScheme().textColor.shade100,
+  ),
+);
+
+final _appSecondaryOutlineButton = _appOutlineButton.copyWith(
+  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return AppColors.getColorScheme().surface.shade400;
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return AppColors.getColorScheme().surface.shade500;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return AppColors.getColorScheme().surface.shade300;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return AppColors.getColorScheme().surface.shade300;
+      }
+      return Colors.transparent;
+    },
+  ),
+  foregroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return AppColors.getColorScheme().textColor.shade500;
+      }
+      return AppColors.getColorScheme().textColor.shade300;
+    },
+  ),
+  side: MaterialStateProperty.resolveWith<BorderSide?>(
+    (Set<MaterialState> states) => BorderSide(
+      color: AppColors.getColorScheme().textColor.shade300,
+    ),
+  ),
+);
+
+final _appSecondaryTextButton = _appTextButton.copyWith(
+  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return AppColors.getColorScheme().surface.shade300;
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return AppColors.getColorScheme().surface.shade500;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return AppColors.getColorScheme().surface.shade200;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return AppColors.getColorScheme().surface.shade200;
+      }
+      return Colors.transparent;
+    },
+  ),
+  foregroundColor: MaterialStateProperty.resolveWith<Color?>(
+    (Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return AppColors.getColorScheme().textColor.shade500;
+      }
+      return AppColors.getColorScheme().textColor.shade300;
+    },
+  ),
+);

catalog/lib/theme/app_colors.dart

@@ -70,7 +70,7 @@ class AppColors extends ColorScheme {
 
   static AppColors getColorScheme() => AppColors(
         colorScheme: ColorScheme.fromSeed(
-          brightness: Brightness.dark,
+          brightness: Brightness.light,
           seedColor: const MaterialColor(
             0xffee1a64,
             <int, Color>{

catalog/lib/theme/app_theme.dart

@@ -1,3 +1,4 @@
+import 'package:catalog/theme/app_buttons.dart';
 import 'package:catalog/theme/app_text_styles.dart';
 import 'package:flutter/material.dart';
 import 'package:catalog/theme/app_colors.dart';
@@ -7,19 +8,36 @@ import 'package:catalog/theme/app_dimensions.dart';
 late AppColors _colors;
 late AppDimens _dimensions;
 late AppTextStyles _styles;
+late AppButtonsStyle _buttonStyles;
 
 class AppTheme {
   static ThemeData provideAppTheme(BuildContext buildContext) {
     // It can be changed based on the device
     _styles = AppTextStyles.getAppStyles();
     _dimensions = AppDimens.getDimensions();
     _colors = AppColors.getColorScheme();
+    _buttonStyles = AppButtonsStyle.getButtonTheme();
 
     return ThemeData(
       primaryColor: _colors.primary,
       colorScheme: _colors,
-      textTheme: _styles.getThemeData(),
-      primaryTextTheme: _styles.getThemeData(),
+      filledButtonTheme: FilledButtonThemeData(
+        style: _buttonStyles.filledButton,
+      ),
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: _buttonStyles.outlineButton,
+      ),
+      textButtonTheme: TextButtonThemeData(
+        style: _buttonStyles.textButton,
+      ),
+      textTheme: _styles.getThemeData().apply(
+            bodyColor: _colors.textColor,
+            displayColor: _colors.textColor.shade500,
+          ),
+      appBarTheme: AppBarTheme(
+        backgroundColor: _colors.primary.shade400,
+        titleTextStyle: TextStyle(color: _colors.textColor.shade100),
+      ),
     );
   }
 }
@@ -30,4 +48,6 @@ extension ThemeExtensions on ThemeData {
   AppColors get colors => _colors;
 
   AppTextStyles get textStyles => _styles;
+
+  AppButtonsStyle get buttonsStyle => _buttonStyles;
 }