Compare commits

...

5 Commits

Author SHA1 Message Date
cb7ff71756 add goldens 2025-12-04 11:40:30 +01:00
AlcalaJulian
07a0fd5695 fix 2025-12-04 10:46:23 +01:00
AlcalaJulian
b823b422f0 fix 2025-12-04 10:46:10 +01:00
AlcalaJulian
a64a9a2a32 fixes 2025-12-04 10:45:10 +01:00
AlcalaJulian
9d7f940851 fixing golden test 2025-12-04 10:30:44 +01:00
32 changed files with 548 additions and 276 deletions

View File

@@ -1,28 +1,27 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class CustomTextButton extends StatelessWidget{ class CustomTextButton extends StatelessWidget {
final VoidCallback onPressed;
final onPressed;
final String text; final String text;
final double size; final double size;
final FontWeight weight; final FontWeight weight;
final Color? color; final Color? color;
@override
const CustomTextButton({ const CustomTextButton({
super.key, super.key,
required this.onPressed, required this.onPressed,
required this.text, required this.text,
this.size = 14, this.size = 14,
this.weight = FontWeight.normal, this.weight = FontWeight.normal,
this.color this.color,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return TextButton( return TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.zero)), style: const ButtonStyle(
padding: WidgetStatePropertyAll<EdgeInsetsGeometry>(EdgeInsets.zero),
),
onPressed: onPressed, onPressed: onPressed,
child: Text( child: Text(
text, text,
@@ -30,10 +29,10 @@ class CustomTextButton extends StatelessWidget{
fontSize: size, fontSize: size,
fontWeight: weight, fontWeight: weight,
letterSpacing: 0, letterSpacing: 0,
color: color?? Color(0xFF4B4B4B), color: color ?? const Color(0xFF4B4B4B),
decoration: TextDecoration.underline decoration: TextDecoration.underline,
), ),
) ),
); );
} }
} }

View File

@@ -1,9 +1,7 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class PrimaryButton extends StatelessWidget{ class PrimaryButton extends StatelessWidget {
final onPressed; final VoidCallback onPressed;
final String text; final String text;
final Color color; final Color color;
final double height; final double height;
@@ -12,7 +10,8 @@ class PrimaryButton extends StatelessWidget{
final double radius; final double radius;
final double padding; final double padding;
PrimaryButton({ const PrimaryButton({
super.key,
required this.onPressed, required this.onPressed,
required this.text, required this.text,
required this.color, required this.color,
@@ -25,30 +24,35 @@ class PrimaryButton extends StatelessWidget{
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return FilledButton( return FilledButton(
style: ButtonStyle( style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll<Color>(color), backgroundColor: WidgetStatePropertyAll<Color>(color),
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: padding)), padding: WidgetStatePropertyAll<EdgeInsetsGeometry>(
shape: WidgetStatePropertyAll(RoundedRectangleBorder( EdgeInsets.symmetric(horizontal: padding),
borderRadius: BorderRadius.all(Radius.circular(radius)), ),
)), shape: WidgetStatePropertyAll<OutlinedBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(radius)),
),
),
), ),
onPressed: onPressed, onPressed: onPressed,
child: SizedBox( child: SizedBox(
width: width, width: width,
height: height, height: height,
child: Center(child: Text( child: Center(
text, child: Text(
textAlign: TextAlign.center, text,
style: TextStyle( textAlign: TextAlign.center,
fontSize: size, style: TextStyle(
fontWeight: FontWeight.w500, fontSize: size,
letterSpacing: 0, fontWeight: FontWeight.w500,
color: Colors.white//theme.getColorFor(ThemeCode.textSecondary) letterSpacing: 0,
) color: Colors.white, // theme.getColorFor(ThemeCode.textSecondary)
)) ),
) ),
),
),
); );
} }
} }

View File

@@ -1,10 +1,7 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SecondaryButton extends StatelessWidget { class SecondaryButton extends StatelessWidget {
final VoidCallback onPressed;
final onPressed;
final String? text; final String? text;
final IconData? icon; final IconData? icon;
final String? label; final String? label;
@@ -15,8 +12,8 @@ class SecondaryButton extends StatelessWidget {
final double? width; final double? width;
final double? size; final double? size;
@override const SecondaryButton({
SecondaryButton({ super.key,
required this.onPressed, required this.onPressed,
this.text, this.text,
this.icon, this.icon,
@@ -31,37 +28,43 @@ class SecondaryButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return OutlinedButton( return OutlinedButton(
style: ButtonStyle( style: ButtonStyle(
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: padding)), padding: WidgetStatePropertyAll(
shape: WidgetStatePropertyAll(RoundedRectangleBorder( EdgeInsets.symmetric(horizontal: padding),
borderRadius: BorderRadius.all(Radius.circular(radius)), ),
side: BorderSide(color: Color(0xFF4B4B4B)) shape: WidgetStatePropertyAll(
)), RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(radius)),
side: BorderSide(color: Color(0xFF4B4B4B)),
),
),
), ),
onPressed: onPressed, onPressed: onPressed,
child: SizedBox( child: SizedBox(
width: width, width: width,
height: height, height: height,
child: Center(child: text!=null ? Text( child: Center(
text!, child: text != null
textAlign: TextAlign.center, ? Text(
semanticsLabel: label, text!,
style: TextStyle( textAlign: TextAlign.center,
fontSize: size ?? 18, semanticsLabel: label,
fontWeight: FontWeight.w500, style: TextStyle(
letterSpacing: 0, fontSize: size ?? 18,
color: Color(0xFF4B4B4B) fontWeight: FontWeight.w500,
) letterSpacing: 0,
) : Icon( color: Color(0xFF4B4B4B),
icon, ),
semanticLabel: label, )
size: size ?? 24, : Icon(
color: color ?? Color(0xFF4B4B4B) icon,
)) semanticLabel: label,
) size: size ?? 24,
color: color ?? Color(0xFF4B4B4B),
),
),
),
); );
} }
} }

View File

@@ -1,12 +1,10 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CustomDropdown extends StatelessWidget{ class CustomDropdown extends StatelessWidget {
final List<Widget> items; final List<Widget> items;
final values; final List<dynamic>? values;
final onChanged; final ValueChanged<dynamic> onChanged;
final value; final dynamic value;
final String? hint; final String? hint;
final String? label; final String? label;
final double radius; final double radius;
@@ -25,43 +23,54 @@ class CustomDropdown extends StatelessWidget{
this.radius = 12, this.radius = 12,
this.width = double.infinity, this.width = double.infinity,
this.height = 70, this.height = 70,
this.color this.color,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
spacing: 8, spacing: 8,
children: [ children: [
if (label != null) Align( if (label != null)
alignment: Alignment.bottomLeft, Align(
child: Text( alignment: Alignment.bottomLeft,
label!, child: Text(
style: TextStyle(fontSize: 14, letterSpacing: 0), label!,
style: const TextStyle(fontSize: 14, letterSpacing: 0),
),
), ),
),
SizedBox( SizedBox(
width: width, width: width,
height: height, height: height,
child: Center(child: DropdownButtonFormField( child: Center(
dropdownColor: Colors.white, child: DropdownButtonFormField<dynamic>(
decoration: InputDecoration( dropdownColor: Colors.white,
enabledBorder: OutlineInputBorder( decoration: InputDecoration(
borderRadius: BorderRadius.all(Radius.circular(radius)), enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: color??Color(0xFF4B4B4B)) borderRadius: BorderRadius.all(Radius.circular(radius)),
) borderSide: BorderSide(
color: color ?? const Color(0xFF4B4B4B),
),
),
),
initialValue: value,
onChanged: onChanged,
hint: hint != null ? Text(hint!) : null,
items: List<DropdownMenuItem<dynamic>>.generate(items.length, (
int index,
) {
final dynamic itemValue = values != null
? values![index]
: index;
return DropdownMenuItem<dynamic>(
value: itemValue,
child: items[index],
);
}),
), ),
//underline: Container(), ),
initialValue: value, ),
onChanged: onChanged,
hint: Text(hint??""),
items: List<DropdownMenuItem>.generate(items.length, (int index){
return DropdownMenuItem(value: (values!=null)?values[index]:index, child: items[index]);
})
)),
)
], ],
) ; );
} }
} }

View File

@@ -1,10 +1,8 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CustomTextField extends StatefulWidget{ class CustomTextField extends StatefulWidget {
bool? showPassword; final bool? showPassword;
final bool numeric; final bool numeric;
final String hint; final String hint;
final String label; final String label;
@@ -12,7 +10,7 @@ class CustomTextField extends StatefulWidget{
final ValueChanged<String>? onChanged; final ValueChanged<String>? onChanged;
final int? length; final int? length;
CustomTextField({ const CustomTextField({
super.key, super.key,
this.showPassword, this.showPassword,
this.numeric = false, this.numeric = false,
@@ -27,56 +25,64 @@ class CustomTextField extends StatefulWidget{
State<CustomTextField> createState() => CustomTextFieldState(); State<CustomTextField> createState() => CustomTextFieldState();
} }
class CustomTextFieldState extends State<CustomTextField>{ class CustomTextFieldState extends State<CustomTextField> {
late bool _showPassword;
@override
void initState() {
super.initState();
_showPassword = widget.showPassword ?? true;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
spacing: 8, spacing: 8,
children: [ children: [
?widget.label == '' ? null : Align( if (widget.label.isNotEmpty)
alignment: Alignment.bottomLeft, Align(
child: Text( alignment: Alignment.bottomLeft,
widget.label, child: Text(
style: TextStyle(fontSize: 14, letterSpacing: 0), widget.label,
) style: const TextStyle(fontSize: 14, letterSpacing: 0),
), ),
),
TextFormField( TextFormField(
keyboardType: widget.numeric? TextInputType.number : TextInputType.text, keyboardType: widget.numeric
obscureText: !(widget.showPassword ?? true), ? TextInputType.number
enableSuggestions: widget.showPassword ?? true, : TextInputType.text,
autocorrect: !(widget.showPassword ?? false), obscureText: !_showPassword,
style: TextStyle(color: Color(0xFF4B4B4B)), enableSuggestions: _showPassword,
inputFormatters: widget.numeric? [ autocorrect: !_showPassword,
FilteringTextInputFormatter.digitsOnly style: const TextStyle(color: Color(0xFF4B4B4B)),
] : [], inputFormatters: widget.numeric
? <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly]
: const <TextInputFormatter>[],
decoration: InputDecoration( decoration: InputDecoration(
counterText: "", counterText: "",
hintText: widget.hint, hintText: widget.hint,
//labelText: widget.label, border: const OutlineInputBorder(
//floatingLabelBehavior: FloatingLabelBehavior.always,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)), borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: Color(0xFF4B4B4B)), borderSide: BorderSide(color: Color(0xFF4B4B4B)),
gapPadding: 16 gapPadding: 16,
), ),
suffixIcon: widget.showPassword!=null ? IconButton( suffixIcon: widget.showPassword != null
icon: Icon(widget.showPassword! ? IconButton(
? Icons.visibility_off icon: Icon(
: Icons.visibility), _showPassword ? Icons.visibility_off : Icons.visibility,
onPressed: () { ),
setState(() { onPressed: () {
widget.showPassword = !widget.showPassword!; setState(() {
}); _showPassword = !_showPassword;
}, });
) : null, },
)
: null,
), ),
minLines: widget.lines ?? 1, minLines: widget.lines ?? 1,
maxLines: widget.lines ?? 1, maxLines: widget.lines ?? 1,
maxLength: widget.length, maxLength: widget.length,
onChanged: widget.onChanged ?? (_)=>{}, onChanged: widget.onChanged,
) ),
], ],
); );
} }

View File

@@ -1,8 +1,7 @@
import 'package:design_system/design_system.dart'; import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class ProgressBar extends ConsumerWidget{ class ProgressBar extends StatelessWidget {
final double max; final double max;
final double value; final double value;
final double height; final double height;
@@ -13,6 +12,7 @@ class ProgressBar extends ConsumerWidget{
final Color textColor; final Color textColor;
const ProgressBar({ const ProgressBar({
super.key,
required this.max, required this.max,
required this.value, required this.value,
required this.height, required this.height,
@@ -20,21 +20,19 @@ class ProgressBar extends ConsumerWidget{
required this.textSecondarySize, required this.textSecondarySize,
required this.backgroundColor, required this.backgroundColor,
required this.foregroundColor, required this.foregroundColor,
required this.textColor,} required this.textColor,
); });
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context) {
return Stack(
return children: [
Stack( LinearProgressIndicator(
children: [
LinearProgressIndicator(
value: value / max, value: value / max,
minHeight: height, minHeight: height,
borderRadius: BorderRadius.all(Radius.circular(24)), borderRadius: BorderRadius.all(Radius.circular(24)),
color: foregroundColor, color: foregroundColor,
backgroundColor: backgroundColor backgroundColor: backgroundColor,
), ),
FractionallySizedBox( FractionallySizedBox(
widthFactor: value / max, widthFactor: value / max,
@@ -47,10 +45,10 @@ class ProgressBar extends ConsumerWidget{
secondarySize: textSecondarySize, secondarySize: textSecondarySize,
color: textColor, color: textColor,
), ),
) ),
), ),
), ),
] ],
); );
} }
} }

View File

@@ -1,32 +1,20 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
enum MessageType { enum MessageType { info, error, warning, success }
info,
error,
warning,
success
}
class CustomSnackBar extends StatelessWidget{ class CustomSnackBar extends StatelessWidget {
final MessageType? type; final MessageType? type;
final String message; final String message;
const CustomSnackBar({ const CustomSnackBar({super.key, this.type, required this.message});
super.key,
this.type,
required this.message,
});
@override @override
SnackBar build(BuildContext context) { SnackBar build(BuildContext context) {
late final Color foregroundColor; late final Color foregroundColor;
late final Color backgroundColor; late final Color backgroundColor;
late final IconData icon; late final IconData icon;
switch (type??MessageType.info){ switch (type ?? MessageType.info) {
case MessageType.info: case MessageType.info:
backgroundColor = Color(0xFFE3EFFD); backgroundColor = Color(0xFFE3EFFD);
foregroundColor = Color(0xFF1F4ECF); foregroundColor = Color(0xFF1F4ECF);
@@ -50,15 +38,20 @@ class CustomSnackBar extends StatelessWidget{
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
side: BorderSide(color: foregroundColor, width: 1), side: BorderSide(color: foregroundColor, width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)) borderRadius: BorderRadius.all(Radius.circular(10)),
), ),
content: Row( content: Row(
spacing: 8, spacing: 8,
children: [ children: [
Icon(icon, color: foregroundColor), Icon(icon, color: foregroundColor),
Expanded(child: Text(message, style: TextStyle(color: Color(0xFF4B4B4B), fontSize: 14))) Expanded(
], child: Text(
), message,
style: TextStyle(color: Color(0xFF4B4B4B), fontSize: 14),
),
),
],
),
); );
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

@@ -7,194 +7,454 @@ void main() {
themePackages(); themePackages();
testGoldens('Step Indicator', (tester) async { testGoldens('Step Indicator', (tester) async {
final widget = (int step)=>StepIndicator(total: 3, current: step, color: Colors.blueAccent); StepIndicator stepIndicator(int step) =>
StepIndicator(total: 3, current: step, color: Colors.blueAccent);
final builder = GoldenBuilder.column() final builder = GoldenBuilder.column()
..addScenario('step -1', widget(-1)) ..addScenario('step -1', stepIndicator(-1))
..addScenario('step 0', widget(0)) ..addScenario('step 0', stepIndicator(0))
..addScenario('step 1', widget(1)) ..addScenario('step 1', stepIndicator(1))
..addScenario('step 2', widget(2)) ..addScenario('step 2', stepIndicator(2))
..addScenario('step 3', widget(3)) ..addScenario('step 3', stepIndicator(3))
..addScenario('step 4', widget(4)); ..addScenario('step 4', stepIndicator(4));
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'step_indicator'); await screenMatchesGolden(tester, 'step_indicator');
}); });
testGoldens('Progress Bar - Small', (tester) async { testGoldens('Progress Bar - Small', (tester) async {
final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 24, textSize: 16, textSecondarySize: 12, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87); ProgressBar progressBar(double value, double max) => ProgressBar(
max: max,
value: value,
height: 24,
textSize: 16,
textSecondarySize: 12,
backgroundColor: Colors.blueGrey,
foregroundColor: Colors.blueAccent,
textColor: Colors.black87,
);
final builder = GoldenBuilder.column() final builder = GoldenBuilder.column()
..addScenario('full', widget(100, 100)) ..addScenario('full', progressBar(100, 100))
..addScenario('empty', widget(0, 100)) ..addScenario('empty', progressBar(0, 100))
..addScenario('half', widget(75, 150)) ..addScenario('half', progressBar(75, 150))
..addScenario('overflowing', widget(200, 150)) ..addScenario('overflowing', progressBar(200, 150))
//..addScenario('negative', widget(-20, 83)) // ..addScenario('negative', progressBar(-20, 83))
..addScenario('tiny value', widget(2.15, 150)); ..addScenario('tiny value', progressBar(2.15, 150));
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'progress_bar_small'); await screenMatchesGolden(tester, 'progress_bar_small');
}); });
testGoldens('Progress Bar - Large', (tester) async { testGoldens('Progress Bar - Large', (tester) async {
final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 83, textSize: 40, textSecondarySize: 24, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87); ProgressBar progressBar(double value, double max) => ProgressBar(
max: max,
value: value,
height: 83,
textSize: 40,
textSecondarySize: 24,
backgroundColor: Colors.blueGrey,
foregroundColor: Colors.blueAccent,
textColor: Colors.black87,
);
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('full', widget(100, 100)) ..addScenario('full', progressBar(100, 100))
..addScenario('empty', widget(0, 100)) ..addScenario('empty', progressBar(0, 100))
..addScenario('half', widget(75, 150)) ..addScenario('half', progressBar(75, 150))
..addScenario('overflowing', widget(200, 150)) ..addScenario('overflowing', progressBar(200, 150))
..addScenario('tiny value', widget(2.15, 150)); ..addScenario('tiny value', progressBar(2.15, 150));
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'progress_bar_large'); await screenMatchesGolden(tester, 'progress_bar_large');
}); });
testGoldens('Text Field', (tester) async { testGoldens('Text Field', (tester) async {
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('basic', SizedBox(height: 70, width: 250, child: CustomTextField())) ..addScenario(
..addScenario('hint', SizedBox(height: 70, width: 250, child: CustomTextField(hint: "type something"))) 'basic',
..addScenario('label', SizedBox(height: 100, width: 250, child: CustomTextField(hint: "type something", label: "text input"))) SizedBox(height: 70, width: 250, child: CustomTextField()),
..addScenario('numeric', SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true))) )
..addScenario('password', SizedBox(height: 70, width: 250, child: CustomTextField(showPassword: false))) ..addScenario(
..addScenario('multiline', SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4))); 'hint',
SizedBox(
height: 70,
width: 250,
child: CustomTextField(hint: "type something"),
),
)
..addScenario(
'label',
SizedBox(
height: 100,
width: 250,
child: CustomTextField(hint: "type something", label: "text input"),
),
)
..addScenario(
'numeric',
SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true)),
)
..addScenario(
'password',
SizedBox(
height: 70,
width: 250,
child: CustomTextField(showPassword: false),
),
)
..addScenario(
'multiline',
SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4)),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'textfield'); await screenMatchesGolden(tester, 'textfield');
}); });
testGoldens('Primary Button', (tester) async { testGoldens('Primary Button', (tester) async {
final widget = ({onPressed, text}) => SizedBox( const double buttonHeight = 70;
height: 70, width: 250, const double buttonWidth = 250;
child:PrimaryButton(onPressed: onPressed, text: text, color: Colors.blueAccent)
);
final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1) final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
..addScenario('empty', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "", color: Colors.blueAccent))) ..addScenario(
..addScenario('basic', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent))) 'empty',
..addScenario('round', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent))) SizedBox(
..addScenario('small', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, width: 100, text: "press me", color: Colors.blueAccent))); height: buttonHeight,
width: buttonWidth,
child: PrimaryButton(
onPressed: () {},
text: "",
color: Colors.blueAccent,
),
),
)
..addScenario(
'basic',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: PrimaryButton(
onPressed: () {},
text: "press me",
color: Colors.blueAccent,
),
),
)
..addScenario(
'round',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: PrimaryButton(
onPressed: () {},
radius: 100,
text: "press me",
color: Colors.blueAccent,
),
),
)
..addScenario(
'small',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: PrimaryButton(
onPressed: () {},
width: 100,
text: "press me",
color: Colors.blueAccent,
),
),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'primary_button'); await screenMatchesGolden(tester, 'primary_button');
}); });
testGoldens('Text Button', (tester) async { testGoldens('Text Button', (tester) async {
final tapTarget = Key("tap-target"); const tapTarget = Key("tap-target");
final builder = GoldenBuilder.column() final builder = GoldenBuilder.column()
..addScenario('empty', CustomTextButton(onPressed: ()=>{}, text: "")) ..addScenario('empty', CustomTextButton(onPressed: () {}, text: ""))
..addScenario('basic', CustomTextButton(onPressed: ()=>{}, text: "press me")) ..addScenario(
..addScenario('tapped', CustomTextButton(onPressed: ()=>{}, text: "press me", key: tapTarget)) 'basic',
..addScenario('large text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 40, weight: FontWeight.w500)) CustomTextButton(onPressed: () {}, text: "press me"),
..addScenario('small text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 10)) )
..addScenario('colored', CustomTextButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent)); ..addScenario(
'tapped',
CustomTextButton(onPressed: () {}, text: "press me", key: tapTarget),
)
..addScenario(
'large text',
CustomTextButton(
onPressed: () {},
text: "press me",
size: 40,
weight: FontWeight.w500,
),
)
..addScenario(
'small text',
CustomTextButton(onPressed: () {}, text: "press me", size: 10),
)
..addScenario(
'colored',
CustomTextButton(
onPressed: () {},
text: "press me",
color: Colors.blueAccent,
),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await tester.tap(find.byKey(tapTarget)); await tester.tap(find.byKey(tapTarget));
await tester.pump(); await tester.pumpAndSettle();
await screenMatchesGolden(tester, 'text_button'); await screenMatchesGolden(tester, 'text_button');
}); });
testGoldens('Money Text', (tester) async { testGoldens('Money Text', (tester) async {
final builder = GoldenBuilder.column() final builder = GoldenBuilder.column()
..addScenario('basic', MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent)) ..addScenario(
..addScenario('without cents', MoneyText(text: "50€", size: 20, color: Colors.blueAccent)) 'basic',
..addScenario('different sizes', MoneyText(text: "29.13€", size: 30, secondarySize: 15, color: Colors.blueAccent)) MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent),
..addScenario('different sizes without cents', MoneyText(text: "50€", size: 30, secondarySize: 15, color: Colors.blueAccent)); )
..addScenario(
'without cents',
MoneyText(text: "50€", size: 20, color: Colors.blueAccent),
)
..addScenario(
'different sizes',
MoneyText(
text: "29.13€",
size: 30,
secondarySize: 15,
color: Colors.blueAccent,
),
)
..addScenario(
'different sizes without cents',
MoneyText(
text: "50€",
size: 30,
secondarySize: 15,
color: Colors.blueAccent,
),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'money_text'); await screenMatchesGolden(tester, 'money_text');
}); });
testGoldens('Secondary Button', (tester) async { testGoldens('Secondary Button', (tester) async {
final widget = ({onPressed, text}) => SizedBox( const double buttonHeight = 70;
height: 70, width: 250, const double buttonWidth = 250;
child:SecondaryButton(onPressed: onPressed, text: text)
);
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1) final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('empty', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: ""))) ..addScenario(
..addScenario('text', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me"))) 'empty',
..addScenario('icon', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, icon: Icons.account_circle_outlined))) SizedBox(
..addScenario('colored', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent,))) height: buttonHeight,
..addScenario('small', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, width: 100, text: "press me"))) width: buttonWidth,
..addScenario('round', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent,))); child: SecondaryButton(onPressed: () {}, text: ""),
),
)
..addScenario(
'text',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: SecondaryButton(onPressed: () {}, text: "press me"),
),
)
..addScenario(
'icon',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: SecondaryButton(
onPressed: () {},
icon: Icons.account_circle_outlined,
),
),
)
..addScenario(
'colored',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: SecondaryButton(
onPressed: () {},
text: "press me",
color: Colors.blueAccent,
),
),
)
..addScenario(
'small',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: SecondaryButton(
onPressed: () {},
width: 100,
text: "press me",
),
),
)
..addScenario(
'round',
SizedBox(
height: buttonHeight,
width: buttonWidth,
child: SecondaryButton(
onPressed: () {},
radius: 100,
text: "press me",
color: Colors.blueAccent,
),
),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'secondary_button'); await screenMatchesGolden(tester, 'secondary_button');
}); });
final snackbarTest = ({message, type, testName}) { void snackbarTest({
required String message,
required MessageType? type,
required String testName,
}) {
testGoldens('Snackbar $testName', (tester) async { testGoldens('Snackbar $testName', (tester) async {
const Key tapTarget = Key('tap-target'); const Key tapTarget = Key('tap-target');
final widget = () => SizedBox buildScaffold() => SizedBox(
SizedBox( width: 800,
width: 800, height: 600,
height: 600, child: MaterialApp(
child: MaterialApp( home: Scaffold(
home: Scaffold( body: Builder(
body: Builder( builder: (BuildContext context) {
builder: (BuildContext context) { return GestureDetector(
return GestureDetector( onTap: () {
onTap: () { ScaffoldMessenger.of(context).showSnackBar(
ScaffoldMessenger.of(context).showSnackBar( CustomSnackBar(
CustomSnackBar( message: message,
message: message, type: type,
type: type, ).build(context),
).build(context) );
); },
}, behavior: HitTestBehavior.opaque,
behavior: HitTestBehavior.opaque, key: tapTarget,
key: tapTarget, );
); },
}
),
), ),
), ),
); ),
);
final builder = DeviceBuilder() final builder = DeviceBuilder()
..overrideDevicesForAllScenarios(devices: [ ..overrideDevicesForAllScenarios(
Device(size: Size(750, 550), name: 'base') devices: const [Device(size: Size(750, 550), name: 'base')],
]) )
..addScenario(name: testName, widget: widget()); ..addScenario(name: testName, widget: buildScaffold());
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await tester.tap(find.byKey(tapTarget)); await tester.tap(find.byKey(tapTarget));
await tester.pumpAndSettle();
await screenMatchesGolden(tester, 'snackbar/$testName'); await screenMatchesGolden(tester, 'snackbar/$testName');
}); });
}; }
final shortText = "Mensaje de prueba"; const shortText = "Mensaje de prueba";
final longText = "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas"; const longText =
"Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas";
snackbarTest(message: "", type: null, testName: "default_empty"); snackbarTest(message: "", type: null, testName: "default_empty");
snackbarTest(message: shortText, type: null, testName: "default"); snackbarTest(message: shortText, type: null, testName: "default");
snackbarTest(message: longText, type: null, testName: "default_long_text"); snackbarTest(message: longText, type: null, testName: "default_long_text");
snackbarTest(message: "", type: MessageType.info, testName: "info_empty"); snackbarTest(message: "", type: MessageType.info, testName: "info_empty");
snackbarTest(message: shortText, type: MessageType.info, testName: "info"); snackbarTest(message: shortText, type: MessageType.info, testName: "info");
snackbarTest(message: longText, type: MessageType.info, testName: "info_long_text"); snackbarTest(
snackbarTest(message: "", type: MessageType.success, testName: "success_empty"); message: longText,
snackbarTest(message: shortText, type: MessageType.success, testName: "success"); type: MessageType.info,
snackbarTest(message: longText, type: MessageType.success, testName: "success_long_text"); testName: "info_long_text",
snackbarTest(message: "", type: MessageType.warning, testName: "warning_empty"); );
snackbarTest(message: shortText, type: MessageType.warning, testName: "warning"); snackbarTest(
snackbarTest(message: longText, type: MessageType.warning, testName: "warning_long_text"); message: "",
type: MessageType.success,
testName: "success_empty",
);
snackbarTest(
message: shortText,
type: MessageType.success,
testName: "success",
);
snackbarTest(
message: longText,
type: MessageType.success,
testName: "success_long_text",
);
snackbarTest(
message: "",
type: MessageType.warning,
testName: "warning_empty",
);
snackbarTest(
message: shortText,
type: MessageType.warning,
testName: "warning",
);
snackbarTest(
message: longText,
type: MessageType.warning,
testName: "warning_long_text",
);
snackbarTest(message: "", type: MessageType.error, testName: "error_empty"); snackbarTest(message: "", type: MessageType.error, testName: "error_empty");
snackbarTest(message: shortText, type: MessageType.error, testName: "error"); snackbarTest(message: shortText, type: MessageType.error, testName: "error");
snackbarTest(message: longText, type: MessageType.error, testName: "error_long_text"); snackbarTest(
message: longText,
type: MessageType.error,
testName: "error_long_text",
);
testGoldens('Dropdown', (tester) async { testGoldens('Dropdown', (tester) async {
final List<Widget> emptyList = []; const List<Widget> emptyList = [];
final List<Widget> shortList = [Text("A"), Text("B"), Text("C")]; const List<Widget> shortList = [Text("A"), Text("B"), Text("C")];
final builder = GoldenBuilder.column() final builder = GoldenBuilder.column()
..addScenario('empty', CustomDropdown(items: emptyList, onChanged: (_)=>{}, width: 200)) ..addScenario(
..addScenario('initial value', CustomDropdown(items: shortList, value: 1, onChanged: (_)=>{}, width: 300)) 'empty',
..addScenario('hint', CustomDropdown(items: shortList, hint: "choose an option", onChanged: (_)=>{})) CustomDropdown(items: emptyList, onChanged: (_) {}, width: 200),
..addScenario('label', CustomDropdown(items: shortList, label: "select", onChanged: (_)=>{}, width: 200)); )
..addScenario(
'initial value',
CustomDropdown(
items: shortList,
value: 1,
onChanged: (_) {},
width: 300,
),
)
..addScenario(
'hint',
CustomDropdown(
items: shortList,
hint: "choose an option",
onChanged: (_) {},
),
)
..addScenario(
'label',
CustomDropdown(
items: shortList,
label: "select",
onChanged: (_) {},
width: 200,
),
);
await tester.pumpWidgetBuilder(builder.build()); await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'dropdown'); await screenMatchesGolden(tester, 'dropdown');
}); });