How to change the onPressed elevation in ElevatedButton Flutter - flutter

Before version 2.0.1 of flutter I was using the RaisedButton and there was a property called focusElevation to change the elevation of the button for when it was pressed. So after deprecating it by Flutter and according to the documentations we should use the ElevatedButton instead. But now I can't find a way to change it with the style: property.
I know how to change the elevation but I want to change the onPressed elevation for when user presses it. As comes from its documentations there are some default values for it:
The button's elevations are defined relative to the elevation parameter. The disabled elevation is the same as the parameter value, elevation + 2 is used when the button is hovered or focused, and elevation + 6 is used when the button is pressed.
So any idea how to customize the onPressed elevation in ElevatedButton?

You can do it using the style property.
ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.resolveWith<double>(
(Set<MaterialState> states) {
// if the button is pressed the elevation is 10.0, if not
// it is 5.0
if (states.contains(MaterialState.pressed))
return 10.0;
return 5.0;
},
),
),
)
Or you can combine it with the new ElevatedButton.styleFrom() property, by usign the merge method. Like this:
ElevatedButton.styleFrom(primary: Colors.red).merge(
ButtonStyle(
elevation: MaterialStateProperty.resolveWith<double>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return 10.0;
return 5.0;
},
),
),
),
),

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
onPrimary: Colors.transparent,
primary: Colors.transparent, // transparent
padding: EdgeInsets.symmetric(horizontal: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
),
).merge(
ButtonStyle(elevation: MaterialStateProperty.resolveWith<double>((Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) return 16; // 点击时阴影隐藏
return 0; // 正常时阴影隐藏
})),
);
ElevatedButton(
style: raisedButtonStyle,
onPressed: () {
},
child: Text("click"),
)

Related

Error: no named parameter with the name 'color' Flutter

So I'm new to Dart & Flutter and have run across a problem. I'm trying to learn the layout and make subtle UI changes to text & button widgets. Here I'm trying to change the color of the ElevatedButton to blue
import 'package:flutter/material.dart';
class Answer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: ElevatedButton(
color: Colors.blue,
child: Text('Answer 1'),
onPressed: null,
),
);
}
}
When I run the code I get this error:
Error: no named parameter with the name 'color'
I thought with buttons there were color parameters that you could change. What would be the correct way of implementing this?
You can style ElevatedButton by using the styleFrom
ElevatedButton(
child: const Text('Button'),
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.purple,
),
or you can use ButtonStyle class
ElevatedButton(
child: const Text('Button'),
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
),
ElevatedButton(
style: ElevatedButton.styleFrom({
Color primary, // set the background color
Color onPrimary, // foreground
}),
),
In Flutter, Some widget deal with styles and themes for general app theme purposes, because of that it doesn't allow for changing the color directly, but with style parameters:
ElevatedButton(
style: ElevatedButton.styleFrom({
Color primary: Colors.green,
Color onPrimary: Colors.white,
}),
),
For more information please visit Flutter documents ElevatedButton.styeFrom and experiment with different parameters.
Welcome to Flutter.
You can style ElevatedButton by :
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty
.all<Color>(Colors.blue),
foregroundColor: MaterialStateProperty
.all<Color>(Colors.white),
),
child: Text('your text'),
onPressed: null,
),
Update your flutter SDK. That happened as SDK is not updated.
To update your flutter SKD, open CMD from windows and command "flutter upgrade".

how to change background color of ElevatedButton after pressed in flutter but i have three so one should change when selected

enter image description here
I have three buttons when i press one i don't want all of them to change the background color only selected one can, so how can i achieve this?
Try to below code hope it help for you :
Create ElevatedButton Widget.
ElevatedButton(
child: Text('Elevated Button'),
onPressed: () {
print('Pressed');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return Colors.blue;
return Colors.green;
},
),
),
),

Hide Elevation Button shadow when I tapping on it

How can I hide ElevatedButton shadow, when I tapping on it. Or maybe I can use some differnt button, I need property to change shadow color and elevation. I tried to use ElevationButton(but it doesn't hide shadow when I tapped on it, on the contrary shadow becaming bigger). I alse tried to use RaisedButton, but it doesn't have property for changing shadow color.
ElevatedButton(
onPressed: (){},
style: ElevatedButton.styleFrom(
shadowColor: Colors.transparent,
),
child: Container(),
),
You can also use RawMaterialButton
Found solution, you just need to oveeride elevation in ButtonStyle with MaterialStateProperty, and set other parametrs as you need.
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(activeColor),
overlayColor: MaterialStateProperty.all<Color>(pressedColor),
shadowColor: MaterialStateProperty.all<Color>(shadowColor),
padding:
MaterialStateProperty.all<EdgeInsetsGeometry>(EdgeInsets.zero),
shape: MaterialStateProperty.all<OutlinedBorder>(border),
elevation: MaterialStateProperty.resolveWith<double>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return 0;
}
if (states.contains(MaterialState.focused)) {
return elevation;
}
if (states.contains(MaterialState.hovered)) {
return elevation;
}
return elevation;
}),
),
onPressed: onPressed,
child: textBody,
),

How to achieve rounded corners on new OutlinedButton widget in Flutter?

With Flutter 1.22 we received a new widget OutlinedButton which is made to replace OutlineButton but how we can actually make its border rounded? borderSide and shape properties are not available anymore.
You can use OutlinedButton.styleFrom property:
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
side: BorderSide(width: 2, color: Colors.green),
),
onPressed: () {},
child: Text('Button'),
)
From the source code
/// All parameters default to null, by default this method returns
/// a [ButtonStyle] that doesn't override anything.
///
/// For example, to override the default shape and outline for an
/// [OutlinedButton], one could write:
///
/// ```dart
/// OutlinedButton(
/// style: OutlinedButton.styleFrom(
/// shape: StadiumBorder(),
/// side: BorderSide(width: 2, color: Colors.green),
/// ),
/// )
/// ```
Screenshot:
If you need some extra control over the style like border should be ABC when the button is pressed, DEF when its hovered... XYZ when not interacted, you can use ButtonStyle.
OutlinedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith<OutlinedBorder?>((states) {
// Rounded button (when the button is pressed)
if (states.contains(MaterialState.pressed)) {
return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
}
}),
),
child: Text('OutlinedButton'),
)

RaisedButton vs ElevatedButton, FlatButton vs TextButton and OutlineButton vs OutlinedButton

I'm seeing the warning using old buttons:
'RaisedButton' is deprecated and shouldn't be used.
'FlatButton' is deprecated and shouldn't be used.
'OutlineButton' is deprecated and shouldn't be used.
So, what's the difference between:
RaisedButton and ElevatedButton
FlatButton vs TextButton
OutlineButton vs OutlinedButton
Here I found the docs for Migrating to the New Material Buttons and their Themes
The following image says itself what are the difference between all.
Visually, the new buttons look a little different, because they match
the current Material Design spec and because their colors are
configured in terms of the overall Theme’s ColorScheme. There are
other small differences in padding, rounded corner radii, and the
hover/focus/pressed feedback.
You can check Changes Overview for more about changes.
First are obsolete classes.
Quotes from the Flutter documentation:
FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.
The original classes will be deprecated soon, please migrate code that uses them.
These are obsolete classes, so eventually your old code needs to go away. (and, this document will help you do exactly that.) However, that can be a lot of work, so to get things moving, I created some code to migrate the FlatButton and RaisedButton to the new TextButton and ElevatedButton 'in place'. They are analogous to each other, but they approach styling in different ways, which this code handled.
Here's a link to the the gist if you want to run it in dartpad.dev (I couldn't get it to link directly):
https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d
Here's the code itself:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final bool disableButton = true; // <-- Change this to see buttons disabled
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text("FlatButton"),
onPressed: disableButton
? null
: () {
print("FlatButton normal");
},
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColor: Colors.grey,
disabledTextColor: Colors.pink),
SizedBox(height: 25),
FlatButtonX(
childx: Text("TextButton"),
onPressedx: disableButton
? null
: () {
print("FlatButtonX (TextButton)");
},
colorx: Colors.green,
textColorx: Colors.black,
shapex: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColorx: Colors.grey,
disabledTextColorx: Colors.pink),
SizedBox(height: 100),
RaisedButton(
child: Text('RaisedButton'),
color: Colors.green,
textColor: Colors.black,
onPressed: disableButton
? null
: () {
print("RaisedButton normal");
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColor: Colors.grey,
disabledTextColor: Colors.pink,
),
SizedBox(height: 25),
RaisedButtonX(
childx: Text('ElevatedButton'),
colorx: Colors.green,
textColorx: Colors.black,
onPressedx:disableButton
? null
: () {
print("RaisedButtonX (ElevatedButton)");
},
shapex: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColorx: Colors.grey,
disabledTextColorx: Colors.pink,
)
],
),
),
),
);
}
}
Widget FlatButtonX(
{Color colorx,
#required Widget childx,
RoundedRectangleBorder shapex,
#required Function onPressedx,
Key keyx,
Color disabledColorx,
Color disabledTextColorx,
Color textColorx}) {
if (disabledTextColorx == null && textColorx == null) {
disabledTextColorx = colorx;
}
if (textColorx == null) {
textColorx = colorx;
}
return TextButton(
key: keyx,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith<Color>(
// text color
(Set<MaterialState> states) => states.contains(MaterialState.disabled)
? disabledTextColorx
: textColorx,
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
// background color this is color:
(Set<MaterialState> states) =>
states.contains(MaterialState.disabled) ? disabledColorx : colorx,
),
shape: MaterialStateProperty.all(shapex),
),
onPressed: onPressedx as void Function(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}
Widget RaisedButtonX(
{Color colorx,
#required Widget childx,
RoundedRectangleBorder shapex,
#required Function onPressedx,
Key keyx,
Color disabledColorx,
Color disabledTextColorx,
Color textColorx}) {
if (disabledTextColorx == null && textColorx == null) {
disabledTextColorx = colorx;
}
if (textColorx == null) {
textColorx = colorx;
}
return ElevatedButton(
key: keyx,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith<Color>(
// text color
(Set<MaterialState> states) => states.contains(MaterialState.disabled)
? disabledTextColorx
: textColorx,
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
// background color this is color:
(Set<MaterialState> states) =>
states.contains(MaterialState.disabled) ? disabledColorx : colorx,
),
shape: MaterialStateProperty.all(shapex),
),
onPressed: onPressedx as void Function(),
child: childx);
}
One of the advantages of ElevatedButton over RaisedButton is that it will actually pick up your main theme color by default.
So you don't even need to add that custom background color. You would only need to bring your own styling in ElevatedButton, if you want to deviate from your main theme or style other aspects of the button.
My understanding is that they are really equivalent. According to the Flutter 1.22 announcement, the main motivation was around styling. Prior to Flutter 1.22, there was only ONE ButtonTheme for 3 types of buttons, whereas now each type of button has its own theme.
The FlatButton, RaisedButton and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.
Link explaining changes:
https://flutter.dev/docs/release/breaking-changes/buttons
How to use the buttons:
https://flutter.dev/docs/development/ui/widgets/material
you can't set borderSide nor shape either on OutlinedButton even though you could on OutlineButton
Alternative buttons such as TextButton, ElevatedButton, and OutlinedButton are not quite easy like before. We can still use those legacy buttons using the legacy_buttons package
https://pub.dev/packages/legacy_buttons/