Skip to content

Commit

Permalink
merge main
Browse files Browse the repository at this point in the history
  • Loading branch information
@SolMendiola
SolMendiola committed Dec 19, 2023
2 parents 775e4bf + 808a7ff commit 51b3683
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 11 deletions.
43 changes: 42 additions & 1 deletion catalog/gallery/lib/catalog/catalog_app_button_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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'),
),
],
),
),
);
}
15 changes: 6 additions & 9 deletions catalog/gallery/lib/catalog/catalog_scaffold_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
),
);
}
136 changes: 136 additions & 0 deletions catalog/lib/theme/app_buttons.dart
View file
Original file line number Diff line number Diff line change
@@ -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<Color?>(
(Set<MaterialState> 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<Color?>(
(Set<MaterialState> states) =>
CustomColors.getCustomColors().textColor!.getShade(100),
),
);

final _appSecondaryOutlineButton = _appOutlineButton.copyWith(
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> 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<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return CustomColors.getCustomColors().textColor!.getShade(500);
}
return CustomColors.getCustomColors().textColor!.getShade(300);
},
),
side: MaterialStateProperty.resolveWith<BorderSide?>(
(Set<MaterialState> states) => BorderSide(
color: CustomColors.getCustomColors().textColor!.getShade(300)!,
),
),
);

final _appSecondaryTextButton = _appTextButton.copyWith(
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> 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<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return CustomColors.getCustomColors().textColor!.getShade(500);
}
return CustomColors.getCustomColors().textColor!.getShade(300);
},
),
);
23 changes: 22 additions & 1 deletion catalog/lib/theme/app_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
);
}
Expand All @@ -36,4 +55,6 @@ extension ThemeExtensions on ThemeData {

TextTheme get textStyles =>
AppTextStyles.getDefaultAppStyles().getThemeData();

AppButtonsStyle get buttonsStyle => AppButtonsStyle.getButtonTheme();
}

0 comments on commit 51b3683

Please sign in to comment.