Since RaisedButton has been changed for ElevatedButton in flutter 2.0 I try to create a default theme for the button but I can't figure how I can do it.
Here is what I put in my main()
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20))),
),
and I get the following error
The argument type 'RoundedRectangleBorder' can't be assigned to the parameter type 'MaterialStateProperty<OutlinedBorder>'.
I cannot figure how to use the MaterialStateProperty parameter since it doesn't give me any clue on how to use it. I read the documentation but there is no example on this.
Anyone know?
You can refer to this documentation on ButtonStyle to know which MaterialStateProperty fields there are to use.
For example, to define the shape, you can use the following code:
shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)))
);
}),
Full example:
ElevatedButtonTheme(
data: ElevatedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.resolveWith<BorderSide>(
(states) => BorderSide(color: borderColor ?? Colors.black)),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(states) => Colors.white),
shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
}),
textStyle: MaterialStateProperty.resolveWith<TextStyle>(
(states) => TextStyle(color: Colors.red)),
),
),
child: ElevatedButton(onPressed: () {}, child: Text('label')),
);
Try this
ElevatedButton(
onPressed: () {},
child: Text("Button"),
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20))),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20))),
),
try this
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side:
BorderSide(width: 1.0, color: Color.black),
borderRadius:
BorderRadius.circular(5.0))),
backgroundColor: MaterialStateProperty.all<Color>(Color.red),
foregroundColor: MaterialStateProperty.all<Color>(Color.green),
elevation:
MaterialStateProperty.all<double>(8.0),
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 5.0))),
onPressed: (){},
child: Text('Tap Me'))
You can use this guide from the Flutter team
https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit
but this is the correct code to make ElevatedButton looks like RaisedButton
final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
onPrimary: Colors.black87,
primary: Colors.grey[300],
minimumSize: Size(88, 36),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2)),
),
);
ElevatedButton(
style: raisedButtonStyle,
onPressed: () { },
child: Text('Looks like a RaisedButton'),
)
Related
Please help to change the code
I'm new to Dart & flutter and need some help with Migrating from RaisedButton to ElevatedButton. How does the styling code for the elevatedButton of this RaisedButton look like
I really need to fix this code, please can someone help I am having a hard time migrating from Raisedbutton to Elevatedbutton.I don't know what to do with padding, color, and textColor.
if (widget.icon != null || widget.iconData != null) {
textWidget = Flexible(child: textWidget);
return Container(
height: widget.options.height,
width: widget.options.width,
child: RaisedButton.icon(
icon: Padding(
padding: widget.options.iconPadding ?? EdgeInsets.zero,
child: widget.icon ??
FaIcon(
widget.iconData,
size: widget.options.iconSize,
color: widget.options.iconColor ??
widget.options.textStyle.color,
),
),
label: textWidget,
onPressed: onPressed,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(widget.options.borderRadius),
side: widget.options.borderSide ?? BorderSide.none,
),
color: widget.options.color,
colorBrightness:
ThemeData.estimateBrightnessForColor(widget.options.color),
textColor: widget.options.textStyle.color,
disabledColor: widget.options.disabledColor,
disabledTextColor: widget.options.disabledTextColor,
elevation: widget.options.elevation,
splashColor: widget.options.splashColor,
),
);
}
return Container(
height: widget.options.height,
width: widget.options.width,
child: RaisedButton(
onPressed: onPressed,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.options.borderRadius ?? 28),
side: widget.options.borderSide ?? BorderSide.none,
),
textColor: widget.options.textStyle.color,
color: widget.options.color,
colorBrightness:
ThemeData.estimateBrightnessForColor(widget.options.color),
disabledColor: widget.options.disabledColor,
disabledTextColor: widget.options.disabledTextColor,
padding: widget.options.padding,
elevation: widget.options.elevation,
child: textWidget,
),
);
}
}
To style an ElevatedButton use:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
child: const Text('Login'),
)
I have the problem that the Raised Button is no longer a usable Button in Flutter so I have to replace it with a elevated Button for example.
But when I try to convert it to an elevated Button it gives me an error with the color and shape Property. They seem to belong to the: style Button Style() but I can't convert them. Can someone help me with that.
The code for the Raised Button was:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: RaisedButton(
child: Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () => _copyGroupId(context),
color: Color.fromRGBO(245, 168, 0, 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context).secondaryHeaderColor,
width: 2,
),
),
),
),
You can set ButtonStyle for ElevatedButton which uses MaterialStateProperty. Now you can set color (or other properties) by checking the state, for example if button is disabled, use
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey.shade600;
}
return Color.fromRGBO(245, 168, 0, 1);
},
),
or you can set a color for all the states like this:
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith(
(states) => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context)
.secondaryHeaderColor,
width: 2,
),
),
),
backgroundColor: MaterialStateProperty.all(
const Color.fromRGBO(245, 168, 0, 1),
),
),
onPressed: () => _copyGroupId(context),
child: const Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
),
You can check the buttons#context
So now instead of RaisedButton we need to useElevatedButton
Similarly, to make an ElevatedButton look like a default RaisedButton:
final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
onPrimary: Colors.black87,
primary: Colors.grey[300],
minimumSize: Size(88, 36),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2)),
),
);
ElevatedButton(
style: raisedButtonStyle,
onPressed: () { },
child: Text('Looks like a RaisedButton'),
)
Ref and from restoring-the-original-button-visuals
Please I'm getting errors under the parameters I used for my 'ElevatedButton'
....Need help please
child: ElevatedButton(
elevation: 5.0,
color: mainColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
Reference : https://api.flutter.dev/flutter/material/ElevatedButton-class.html
You can use properties like this,
ElevatedButton(
style: ElevatedButton.styleFrom(elevation: 5.0,
primary: mainColor,
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30.0))),
onPressed: () { },
child:Container()),
ElevatedButton required parameter are onPressed and child and you can use ElevatedButton as:
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
elevation: 5.0,
primary: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
As of flutter version 3.3.2 elevated button has following properties/params
Key? key,
required void Function()? onPressed,
void Function()? onLongPress,
void Function(bool)? onHover,
void Function(bool)? onFocusChange,
ButtonStyle? style,
FocusNode? focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
MaterialStatesController? statesController,
required Widget? child,
You can use ElevatedButton.styleFrom function to define elevated button style as
ElevatedButton.styleFrom(
elevation: elevation,
backgroundColor: bgColor ?? colorScheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius ?? 30),
)
//elevation: 8,
),
Can someone tell me why my code is not making the border blue, and let it have width of 3.0?
This is what it looks like (L: my app, R: tutorial app):
The code:
class CreateRoomButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return OutlinedButton(
onPressed: () => print('Create Room'),
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
side: BorderSide(
color: Colors.blueAccent[100],
width: 3.0,
),
borderRadius: BorderRadius.circular(30.0),
),
),
),
child: Row(
children: [
ShaderMask(
shaderCallback: (rect) =>
Palette.createRoomGradient.createShader(rect),
child: Icon(
Icons.video_call,
color: Colors.white,
size: 35.0,
),
),
const SizedBox(width: 4.0),
Text(
'Create\nRoom',
style: TextStyle(color: Colors.blueAccent[100]),
),
],
),
);
}
}
Also I have to add this somewhere (but since textColor is depreciated in flutter 2.0, idk what to do with it...):
textColor: Palette.facebookblue,
thx!
just change your OutlinedButton to this:
OutlinedButton(
onPressed: () => print('Create Room'),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
side: BorderSide(width: 3.0, color: Colors.blueAccent[100]),
)
child: yourChildWidget,
)
Like this and in child you can write your widget
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.teal),
),
onPressed: () {},
child: null,
),
I'm trying to change the border of my OutlinedButton in my main.dart but it doesn't seem to be working. I've been looking around and it seems like I need to add BorderSide. This is what my outlinedButtonTheme looks like:
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return AppColors.SecondaryButtonPressed;
}
return AppColors.SecondaryButton;
},
),
minimumSize: MaterialStateProperty.all<Size>(Size(335, 60)),
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side: BorderSide(
style: BorderStyle.solid,
color: AppColors.Primary,
width: 1), // <-- this doesn't work?
borderRadius: BorderRadius.all(Radius.circular(12)),
)),
foregroundColor: MaterialStateProperty.all<Color>(
AppColors.SecondaryButtonText),
textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(
color: AppColors.SecondaryButtonText,
fontSize: 14 * FONT_SCALE_FACTOR,
fontWeight: FontWeight.w600,
)),
),
),
Shown above where BorderSide is. It doesn't seem like this is working at all.
This works for me:
OutlinedButton(onPressed: () {},
style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))),
side: MaterialStateProperty.all(BorderSide(
color: AppColors.blue,
)),
),)
I followed the guide at new material buttons and solved it like this:
OutlinedButton.icon(
style: OutlinedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
).copyWith(
side: MaterialStateProperty.resolveWith<BorderSide>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) return null;
return BorderSide(
color: Theme.of(context).primaryColor,
width: 3,
);
// Defer to the widget's default.
},
),
),
...
I needed to specify a different color for a disabled vs active state because I wanted the border to have a color when its active and no color when its disabled (returning null because by default border has no color unlike the old button)
There were a few things I missed from looking at the docs within ButtonStyle.
I added
side: MaterialStateProperty.all<BorderSide>(
BorderSide(color: AppColors.Primary)),
in ButtonStyle and it worked rather than adding it inside
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side: BorderSide(
style: BorderStyle.solid,
color: AppColors.Primary,
width: 1), // <-- this doesn't work at all in shape.
borderRadius: BorderRadius.all(Radius.circular(12)),
)),
Use style property:
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 1.0, color: Colors.red),
),
)