Corrected button color behaviour and added tertiary button
This commit is contained in:
@@ -1,13 +1,12 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:game_tracker/core/custom_theme.dart';
|
import 'package:game_tracker/core/custom_theme.dart';
|
||||||
|
import 'package:game_tracker/core/enums.dart';
|
||||||
enum ButtonStyle { primary, secondary }
|
|
||||||
|
|
||||||
class CustomWidthButton extends StatelessWidget {
|
class CustomWidthButton extends StatelessWidget {
|
||||||
const CustomWidthButton({
|
const CustomWidthButton({
|
||||||
super.key,
|
super.key,
|
||||||
required this.text,
|
required this.text,
|
||||||
this.buttonStyle = ButtonStyle.primary,
|
this.buttonType = ButtonType.primary,
|
||||||
required this.sizeRelativeToWidth,
|
required this.sizeRelativeToWidth,
|
||||||
this.onPressed,
|
this.onPressed,
|
||||||
});
|
});
|
||||||
@@ -15,61 +14,101 @@ class CustomWidthButton extends StatelessWidget {
|
|||||||
final String text;
|
final String text;
|
||||||
final double sizeRelativeToWidth;
|
final double sizeRelativeToWidth;
|
||||||
final VoidCallback? onPressed;
|
final VoidCallback? onPressed;
|
||||||
final ButtonStyle buttonStyle;
|
final ButtonType buttonType;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
|
||||||
final Color buttonBackgroundColor;
|
final Color buttonBackgroundColor;
|
||||||
final Color disabledBackgroundColor;
|
final Color disabledBackgroundColor;
|
||||||
final Color borderSideColor;
|
final Color borderSideColor;
|
||||||
final Color disabledBorderSideColor;
|
|
||||||
final Color textcolor;
|
final Color textcolor;
|
||||||
final Color disabledTextColor;
|
final Color disabledTextColor;
|
||||||
|
|
||||||
|
if (buttonType == ButtonType.primary) {
|
||||||
if(buttonStyle == ButtonStyle.primary){
|
|
||||||
buttonBackgroundColor = CustomTheme.primaryColor;
|
|
||||||
disabledBackgroundColor = CustomTheme.primaryColor.withValues(alpha: 0.24);
|
|
||||||
borderSideColor = Colors.transparent;
|
|
||||||
disabledBorderSideColor = Colors.transparent;
|
|
||||||
textcolor = Colors.white;
|
textcolor = Colors.white;
|
||||||
disabledTextColor = Colors.white.withValues(alpha: 0.24);
|
disabledTextColor = Colors.white.withValues(alpha: 0.24);
|
||||||
} else{
|
buttonBackgroundColor = CustomTheme.primaryColor;
|
||||||
buttonBackgroundColor = Colors.transparent;
|
disabledBackgroundColor = CustomTheme.primaryColor.withValues(
|
||||||
disabledBackgroundColor = Colors.transparent;
|
alpha: 0.24,
|
||||||
borderSideColor = CustomTheme.primaryColor.withValues(alpha: 0.6 );
|
);
|
||||||
disabledBorderSideColor = Colors.transparent;
|
|
||||||
textcolor = CustomTheme.primaryColor;
|
|
||||||
disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.24);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return ElevatedButton(
|
return ElevatedButton(
|
||||||
onPressed: onPressed,
|
onPressed: onPressed,
|
||||||
style: ElevatedButton.styleFrom(
|
style: ElevatedButton.styleFrom(
|
||||||
|
foregroundColor: textcolor,
|
||||||
|
disabledForegroundColor: disabledTextColor,
|
||||||
|
backgroundColor: buttonBackgroundColor,
|
||||||
disabledBackgroundColor: disabledBackgroundColor,
|
disabledBackgroundColor: disabledBackgroundColor,
|
||||||
|
animationDuration: const Duration(),
|
||||||
minimumSize: Size(
|
minimumSize: Size(
|
||||||
MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
|
MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
|
||||||
60,
|
60,
|
||||||
),
|
),
|
||||||
backgroundColor: buttonBackgroundColor,
|
shape: RoundedRectangleBorder(
|
||||||
side: BorderSide(
|
borderRadius: BorderRadius.circular(12),
|
||||||
color: borderSideColor,
|
|
||||||
width: 2,
|
|
||||||
),
|
),
|
||||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
||||||
),
|
),
|
||||||
child: Text(
|
child: Text(
|
||||||
text,
|
text,
|
||||||
style: TextStyle(
|
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
fontSize: 22,
|
|
||||||
color: (onPressed == null)
|
|
||||||
? disabledTextColor
|
|
||||||
: textcolor,
|
|
||||||
),
|
),
|
||||||
|
);
|
||||||
|
} else if (buttonType == ButtonType.secondary) {
|
||||||
|
textcolor = CustomTheme.primaryColor;
|
||||||
|
disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.5);
|
||||||
|
buttonBackgroundColor = Colors.transparent;
|
||||||
|
disabledBackgroundColor = Colors.transparent;
|
||||||
|
borderSideColor = onPressed != null
|
||||||
|
? CustomTheme.primaryColor
|
||||||
|
: CustomTheme.primaryColor.withValues(alpha: 0.5);
|
||||||
|
|
||||||
|
return OutlinedButton(
|
||||||
|
onPressed: onPressed,
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: textcolor,
|
||||||
|
disabledForegroundColor: disabledTextColor,
|
||||||
|
backgroundColor: buttonBackgroundColor,
|
||||||
|
disabledBackgroundColor: disabledBackgroundColor,
|
||||||
|
animationDuration: const Duration(),
|
||||||
|
minimumSize: Size(
|
||||||
|
MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
|
||||||
|
60,
|
||||||
|
),
|
||||||
|
side: BorderSide(color: borderSideColor, width: 2),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
text,
|
||||||
|
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
textcolor = CustomTheme.primaryColor;
|
||||||
|
disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.3);
|
||||||
|
buttonBackgroundColor = Colors.transparent;
|
||||||
|
disabledBackgroundColor = Colors.transparent;
|
||||||
|
|
||||||
|
return TextButton(
|
||||||
|
onPressed: onPressed,
|
||||||
|
style: TextButton.styleFrom(
|
||||||
|
foregroundColor: textcolor,
|
||||||
|
disabledForegroundColor: disabledTextColor,
|
||||||
|
backgroundColor: buttonBackgroundColor,
|
||||||
|
disabledBackgroundColor: disabledBackgroundColor,
|
||||||
|
animationDuration: const Duration(),
|
||||||
|
minimumSize: Size(
|
||||||
|
MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
|
||||||
|
60,
|
||||||
|
),
|
||||||
|
side: const BorderSide(style: BorderStyle.none),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
text,
|
||||||
|
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user