Created
January 25, 2022 14:03
-
-
Save gugadev/3c51b05db103a762eda27ca31d7b17ab to your computer and use it in GitHub Desktop.
Migration from OutlineButton to OutlinedButton.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
enum DialogButtonStyle { | |
PRIMARY, | |
SECONDARY, | |
} | |
void main() { | |
runApp(App()); | |
} | |
class App extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'OutlinedButton Demo', | |
theme: ThemeData( | |
primarySwatch: Colors.blue | |
), | |
home: Scaffold( | |
body: SafeArea( | |
child: Center( | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
Home( | |
'Aceptar', | |
type: DialogButtonStyle.SECONDARY, | |
onPressed: () { | |
print('Home click'); | |
}, | |
), | |
const SizedBox(width: 20), | |
Home2( | |
'Aceptar', | |
type: DialogButtonStyle.SECONDARY, | |
onPressed: () { | |
print('Home2 click'); | |
} | |
) | |
] | |
) | |
) | |
) | |
) | |
); | |
} | |
} | |
class Home extends StatelessWidget { | |
static const Color _SECONDARY_BUTTON_COLOR = Color.fromRGBO(0, 153, 204, 1); | |
static const Color _PRIMARY_BUTTON_COLOR = Color.fromRGBO(0, 175, 63, 1); | |
static const Color _PRIMARY_TEXT_COLOR = Colors.white; | |
static const double _HEIGHT = 44; | |
static const double _FONT_SIZE = 16; | |
static const FontWeight _FONT_WEIGHT = FontWeight.bold; | |
static final ShapeBorder _BUTTON_SHAPE_BORDER = | |
RoundedRectangleBorder(borderRadius: BorderRadius.circular(_HEIGHT / 2)); | |
final String text; | |
final bool isOutlined; | |
final DialogButtonStyle type; | |
final VoidCallback? onPressed; | |
const Home( | |
this.text, { | |
required this.type, | |
this.isOutlined = false, | |
this.onPressed, | |
}); | |
bool get disabled { | |
return onPressed == null; | |
} | |
Color get disabledPrimaryButtonColor { | |
return Colors.grey.shade500; | |
} | |
Color get disabledPrimaryTextColor { | |
return Colors.white; | |
} | |
Color get disabledSecondaryTextColor { | |
return Colors.grey.shade500; | |
} | |
Color get textColor { | |
return type == DialogButtonStyle.PRIMARY | |
? (_PRIMARY_TEXT_COLOR) | |
: (disabled ? disabledSecondaryTextColor : _SECONDARY_BUTTON_COLOR); | |
} | |
Text get styledText { | |
return Text( | |
text, | |
style: TextStyle( | |
fontSize: _FONT_SIZE, | |
fontWeight: _FONT_WEIGHT, | |
color: textColor, | |
), | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
if (type == DialogButtonStyle.PRIMARY) { | |
return MaterialButton( | |
disabledColor: disabledPrimaryButtonColor, | |
disabledTextColor: disabledPrimaryTextColor, | |
height: _HEIGHT, | |
color: _PRIMARY_BUTTON_COLOR, | |
shape: _BUTTON_SHAPE_BORDER, | |
onPressed: onPressed, | |
child: styledText, | |
); | |
} | |
return ButtonTheme( | |
height: _HEIGHT, | |
focusColor: _SECONDARY_BUTTON_COLOR, | |
child: OutlineButton( | |
disabledTextColor: Colors.red, | |
borderSide: const BorderSide( | |
color: _SECONDARY_BUTTON_COLOR, | |
), | |
shape: _BUTTON_SHAPE_BORDER, | |
onPressed: onPressed, | |
child: styledText, | |
), | |
); | |
} | |
} | |
class Home2 extends StatelessWidget { | |
static const Color _SECONDARY_BUTTON_COLOR = Color.fromRGBO(0, 153, 204, 1); | |
static const Color _PRIMARY_BUTTON_COLOR = Color.fromRGBO(0, 175, 63, 1); | |
static const Color _PRIMARY_TEXT_COLOR = Colors.white; | |
static const double _HEIGHT = 44; | |
static const double _FONT_SIZE = 16; | |
static const FontWeight _FONT_WEIGHT = FontWeight.bold; | |
static final ShapeBorder _BUTTON_SHAPE_BORDER = | |
RoundedRectangleBorder(borderRadius: BorderRadius.circular(_HEIGHT / 2)); | |
final String text; | |
final bool isOutlined; | |
final DialogButtonStyle type; | |
final VoidCallback? onPressed; | |
const Home2( | |
this.text, { | |
required this.type, | |
this.isOutlined = false, | |
this.onPressed, | |
} | |
); | |
@override | |
Widget build(BuildContext context) { | |
if (type == DialogButtonStyle.PRIMARY) { | |
return MaterialButton( | |
disabledColor: disabledPrimaryButtonColor, | |
disabledTextColor: disabledPrimaryTextColor, | |
height: _HEIGHT, | |
color: _PRIMARY_BUTTON_COLOR, | |
shape: _BUTTON_SHAPE_BORDER, | |
onPressed: onPressed, | |
child: styledText, | |
); | |
} | |
return ButtonTheme( | |
focusColor: _SECONDARY_BUTTON_COLOR, | |
child: OutlinedButton( | |
style: OutlinedButton.styleFrom( | |
minimumSize: const Size(0, _HEIGHT), | |
shape: _BUTTON_SHAPE_BORDER as OutlinedBorder, | |
side: BorderSide( | |
color: disabled ? Colors.grey.shade300 : _SECONDARY_BUTTON_COLOR, | |
) | |
), | |
onPressed: onPressed, | |
child: styledText, | |
), | |
); | |
} | |
bool get disabled { | |
return onPressed == null; | |
} | |
Color get disabledPrimaryButtonColor { | |
return Colors.grey.shade500; | |
} | |
Color get disabledPrimaryTextColor { | |
return Colors.white; | |
} | |
Color get disabledSecondaryTextColor { | |
return Colors.grey.shade500; | |
} | |
Color get textColor { | |
return type == DialogButtonStyle.PRIMARY | |
? (_PRIMARY_TEXT_COLOR) | |
: (disabled ? disabledSecondaryTextColor : _SECONDARY_BUTTON_COLOR); | |
} | |
Text get styledText { | |
return Text( | |
text, | |
style: TextStyle( | |
fontSize: _FONT_SIZE, | |
fontWeight: _FONT_WEIGHT, | |
color: textColor, | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment