Skip to content

Commit 808a7ff

Browse files
SolMendiolaSolMendiola
authored
feat: add buttons (#195)
1 parent 16876af commit 808a7ff

File tree

5 files changed

+206
-12
lines changed

5 files changed

+206
-12
lines changed

‎catalog/gallery/lib/catalog/catalog_app_button_screen.dart

+42-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import 'package:auto_route/auto_route.dart';
2+
import 'package:catalog/catalog.dart';
3+
import 'package:catalog/theme/app_buttons.dart';
24
import 'package:flutter/material.dart';
5+
import 'package:flutter_screenutil/flutter_screenutil.dart';
36
import 'package:gallery/catalog/catalog_scaffold_screen.dart';
47

58
@RoutePage()
@@ -9,6 +12,44 @@ class CatalogAppButtonScreen extends StatelessWidget {
912
@override
1013
Widget build(BuildContext context) => CatalogScaffold(
1114
title: 'BUTTONS',
12-
child: Container(),
15+
child: SingleChildScrollView(
16+
child: Column(
17+
children: [
18+
const SizedBox(height: 10),
19+
FilledButton(
20+
onPressed: () => {},
21+
child: const Text('PRIMARY FILLED BUTTON'),
22+
),
23+
SizedBox(height: 10.h),
24+
StrokeButton(
25+
onPressed: () => {},
26+
child: const Text('PRIMARY STROKE BUTTON'),
27+
),
28+
SizedBox(height: 10.h),
29+
GhostButton(
30+
onPressed: () => {},
31+
child: const Text('PRIMARY GHOST BUTTON'),
32+
),
33+
SizedBox(height: 10.h),
34+
FilledButton(
35+
style: context.theme.buttonsStyle.secondaryFilledButton,
36+
onPressed: (){},
37+
child: const Text('SECONDARY FILLED BUTTON'),
38+
),
39+
SizedBox(height: 10.h),
40+
StrokeButton(
41+
style: context.theme.buttonsStyle.secondaryOutlineButton,
42+
onPressed: (){},
43+
child: const Text('SECONDARY STROKE BUTTON'),
44+
),
45+
SizedBox(height: 10.h),
46+
GhostButton(
47+
style: context.theme.buttonsStyle.secondaryTextButton,
48+
onPressed: (){},
49+
child: const Text('SECONDARY GHOST BUTTON'),
50+
),
51+
],
52+
),
53+
),
1354
);
1455
}

‎catalog/gallery/lib/catalog/catalog_scaffold_screen.dart

+6-8
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,22 @@ class CatalogScaffold extends StatelessWidget {
1717
@override
1818
Widget build(BuildContext context) => Scaffold(
1919
appBar: AppBar(
20-
backgroundColor: context.theme.colors.primary.shade400,
2120
leading: showBack ?? true
2221
? IconButton(
2322
icon: Icon(
24-
Icons.arrow_back,
23+
Icons.chevron_left,
2524
color: context.theme.colors.primary.shade100,
2625
),
2726
onPressed: () => context.router.pop(),
2827
)
2928
: null,
30-
title: Text(
31-
title,
32-
style: TextStyle(color: context.theme.colors.textColor.shade100),
33-
),
29+
title: Text(title),
3430
),
35-
backgroundColor: context.theme.colors.primary.shade200,
3631
body: SafeArea(
37-
child: child,
32+
child: Padding(
33+
padding: const EdgeInsets.all(8.0),
34+
child: child,
35+
),
3836
),
3937
);
4038
}

‎catalog/lib/theme/app_buttons.dart

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import 'package:catalog/theme/app_text_styles.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_screenutil/flutter_screenutil.dart';
4+
import 'package:catalog/theme/app_colors.dart';
5+
6+
typedef StrokeButton = OutlinedButton;
7+
typedef GhostButton = TextButton;
8+
9+
class AppButtonsStyle {
10+
final ButtonStyle filledButton = _appFilledButton;
11+
final ButtonStyle outlineButton = _appOutlineButton;
12+
final ButtonStyle textButton = _appTextButton;
13+
final ButtonStyle secondaryFilledButton = _appSecondaryFilledButton;
14+
final ButtonStyle secondaryOutlineButton = _appSecondaryOutlineButton;
15+
final ButtonStyle secondaryTextButton = _appSecondaryTextButton;
16+
17+
AppButtonsStyle();
18+
19+
static AppButtonsStyle getButtonTheme() => AppButtonsStyle();
20+
}
21+
22+
final _appFilledButton = FilledButton.styleFrom(
23+
minimumSize: Size(double.infinity, 50.h),
24+
shape: RoundedRectangleBorder(
25+
borderRadius: BorderRadius.circular(16.r),
26+
),
27+
textStyle: AppTextStyles.getAppStyles().buttonLarge,
28+
elevation: 0.0,
29+
foregroundColor: AppColors.getColorScheme().textColor.shade100,
30+
);
31+
32+
final _appOutlineButton = OutlinedButton.styleFrom(
33+
minimumSize: Size(double.infinity, 50.h),
34+
shape: RoundedRectangleBorder(
35+
borderRadius: BorderRadius.circular(16.r),
36+
),
37+
side: BorderSide(
38+
width: 2,
39+
color: AppColors.getColorScheme().primary,
40+
),
41+
textStyle: AppTextStyles.getAppStyles().buttonLarge,
42+
elevation: 0.0,
43+
);
44+
45+
final _appTextButton = TextButton.styleFrom(
46+
minimumSize: Size(double.infinity, 50.h),
47+
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.r)),
48+
textStyle: AppTextStyles.getAppStyles().buttonLarge,
49+
elevation: 0.0,
50+
);
51+
52+
final _appSecondaryFilledButton = _appFilledButton.copyWith(
53+
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
54+
(Set<MaterialState> states) {
55+
if (states.contains(MaterialState.pressed)) {
56+
return AppColors.getColorScheme().textColor.shade500;
57+
}
58+
if (states.contains(MaterialState.disabled)) {
59+
return AppColors.getColorScheme().surface.shade500;
60+
}
61+
if (states.contains(MaterialState.hovered)) {
62+
return AppColors.getColorScheme().onSurface.shade400;
63+
}
64+
if (states.contains(MaterialState.focused)) {
65+
return AppColors.getColorScheme().textColor.shade400;
66+
}
67+
return AppColors.getColorScheme().textColor.shade300;
68+
},
69+
),
70+
foregroundColor: MaterialStateProperty.resolveWith<Color?>(
71+
(Set<MaterialState> states) =>
72+
AppColors.getColorScheme().textColor.shade100,
73+
),
74+
);
75+
76+
final _appSecondaryOutlineButton = _appOutlineButton.copyWith(
77+
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
78+
(Set<MaterialState> states) {
79+
if (states.contains(MaterialState.pressed)) {
80+
return AppColors.getColorScheme().surface.shade400;
81+
}
82+
if (states.contains(MaterialState.disabled)) {
83+
return AppColors.getColorScheme().surface.shade500;
84+
}
85+
if (states.contains(MaterialState.hovered)) {
86+
return AppColors.getColorScheme().surface.shade300;
87+
}
88+
if (states.contains(MaterialState.focused)) {
89+
return AppColors.getColorScheme().surface.shade300;
90+
}
91+
return Colors.transparent;
92+
},
93+
),
94+
foregroundColor: MaterialStateProperty.resolveWith<Color?>(
95+
(Set<MaterialState> states) {
96+
if (states.contains(MaterialState.pressed)) {
97+
return AppColors.getColorScheme().textColor.shade500;
98+
}
99+
return AppColors.getColorScheme().textColor.shade300;
100+
},
101+
),
102+
side: MaterialStateProperty.resolveWith<BorderSide?>(
103+
(Set<MaterialState> states) => BorderSide(
104+
color: AppColors.getColorScheme().textColor.shade300,
105+
),
106+
),
107+
);
108+
109+
final _appSecondaryTextButton = _appTextButton.copyWith(
110+
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
111+
(Set<MaterialState> states) {
112+
if (states.contains(MaterialState.pressed)) {
113+
return AppColors.getColorScheme().surface.shade300;
114+
}
115+
if (states.contains(MaterialState.disabled)) {
116+
return AppColors.getColorScheme().surface.shade500;
117+
}
118+
if (states.contains(MaterialState.hovered)) {
119+
return AppColors.getColorScheme().surface.shade200;
120+
}
121+
if (states.contains(MaterialState.focused)) {
122+
return AppColors.getColorScheme().surface.shade200;
123+
}
124+
return Colors.transparent;
125+
},
126+
),
127+
foregroundColor: MaterialStateProperty.resolveWith<Color?>(
128+
(Set<MaterialState> states) {
129+
if (states.contains(MaterialState.pressed)) {
130+
return AppColors.getColorScheme().textColor.shade500;
131+
}
132+
return AppColors.getColorScheme().textColor.shade300;
133+
},
134+
),
135+
);

‎catalog/lib/theme/app_colors.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ class AppColors extends ColorScheme {
7070

7171
static AppColors getColorScheme() => AppColors(
7272
colorScheme: ColorScheme.fromSeed(
73-
brightness: Brightness.dark,
73+
brightness: Brightness.light,
7474
seedColor: const MaterialColor(
7575
0xffee1a64,
7676
<int, Color>{

‎catalog/lib/theme/app_theme.dart

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:catalog/theme/app_buttons.dart';
12
import 'package:catalog/theme/app_text_styles.dart';
23
import 'package:flutter/material.dart';
34
import 'package:catalog/theme/app_colors.dart';
@@ -7,19 +8,36 @@ import 'package:catalog/theme/app_dimensions.dart';
78
late AppColors _colors;
89
late AppDimens _dimensions;
910
late AppTextStyles _styles;
11+
late AppButtonsStyle _buttonStyles;
1012

1113
class AppTheme {
1214
static ThemeData provideAppTheme(BuildContext buildContext) {
1315
// It can be changed based on the device
1416
_styles = AppTextStyles.getAppStyles();
1517
_dimensions = AppDimens.getDimensions();
1618
_colors = AppColors.getColorScheme();
19+
_buttonStyles = AppButtonsStyle.getButtonTheme();
1720

1821
return ThemeData(
1922
primaryColor: _colors.primary,
2023
colorScheme: _colors,
21-
textTheme: _styles.getThemeData(),
22-
primaryTextTheme: _styles.getThemeData(),
24+
filledButtonTheme: FilledButtonThemeData(
25+
style: _buttonStyles.filledButton,
26+
),
27+
outlinedButtonTheme: OutlinedButtonThemeData(
28+
style: _buttonStyles.outlineButton,
29+
),
30+
textButtonTheme: TextButtonThemeData(
31+
style: _buttonStyles.textButton,
32+
),
33+
textTheme: _styles.getThemeData().apply(
34+
bodyColor: _colors.textColor,
35+
displayColor: _colors.textColor.shade500,
36+
),
37+
appBarTheme: AppBarTheme(
38+
backgroundColor: _colors.primary.shade400,
39+
titleTextStyle: TextStyle(color: _colors.textColor.shade100),
40+
),
2341
);
2442
}
2543
}
@@ -30,4 +48,6 @@ extension ThemeExtensions on ThemeData {
3048
AppColors get colors => _colors;
3149

3250
AppTextStyles get textStyles => _styles;
51+
52+
AppButtonsStyle get buttonsStyle => _buttonStyles;
3353
}

0 commit comments

Comments
 (0)