As RaisedButton and OutlineButton are deprecated, the flutter team introduces a new ElevatedButton. But I don't know how to make ElevatedButton's border rounded like the below image.
ElevatedButton(
onPressed: () {},
child: Text('Testing'),
),
You could do something like this:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
child: Text(' Elevated Button')
)
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: Colors.green)),
),
),
onPressed: () {},
child: Text('test'),
)
This is how you can use new Ele Button
ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10));
}
return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10)); //CHoose any shape you want
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return greyColor;
}
return selectedPrimaryColor;
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.black;
}
return selectedPrimaryColor;
},
),
),
),
Related
I have outlined buttons with buttonstyle animation, but this animation is slowl or none because I need tap on button few milliseconds (cca 0.5s)
OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Rekon()),
);
},
style: buttonStyle,
child: Text(
"TEXT",
style: GoogleFonts.lilitaOne(
fontSize: textSizeCalculator
.calculateTextSize(context),
),
),
),
),
ButtonStyle
ButtonStyle buttonStyle = ButtonStyle(
foregroundColor:
MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return const Color.fromARGB(255, 251, 255, 0);
}
return Colors.white;
}),
overlayColor:
MaterialStateColor.resolveWith((states) => const Color(0xFF011230)),
minimumSize: const MaterialStatePropertyAll(Size.fromHeight(60)),
padding: const MaterialStatePropertyAll(EdgeInsets.all(5)),
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
side: MaterialStateProperty.resolveWith<BorderSide>(
(Set<MaterialState> states) {
final Color color = states.contains(MaterialState.pressed)
? const Color.fromARGB(255, 255, 0, 0)
: Colors.lightBlueAccent;
return BorderSide(color: color, width: 2.5);
}),
);
but this animation is slow. I have to tap the button for a few milliseconds for the animation to show. How to fix it, or what to use for the requested animation?
Thank you very much in advance for the information.
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
I added this theme for my TextButton.
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
textStyle: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered))
return TextStyles.headline3.copyWith(
color: AppColors.dustyOrange,
);
return TextStyles.headline3;
},
),
side: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered))
return BorderSide(
width: 1,
color: AppColors.dustyOrange,
);
return BorderSide(width: 1, color: AppColors.white.withOpacity(0.2));
},
),
),
)
and here is my TextButton:
TextButton(
onPressed: () => widget.onTap(),
child: Text(widget.title, style: theme?.textTheme.headline3),
style: theme?.textButtonTheme.style!.copyWith(
padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 15, horizontal: 20)),
)
)
The problem is that when the button pressed, the style of the button is changing, but the color is not.
There are generally three issue in your code. First, you don't need to assign style to the Text because TextButton itself has a style property. Second, you need to create a copy of TextStyle before you return it. And last, the color property needs to be changed to the foreground because the later gets precedence when there's a conflict between color and foreground.
Here's the minimal reproducible code:
#override
Widget build(BuildContext context) {
return Material(
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
textStyle: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
final headline3 = Theme.of(context).textTheme.headline3;
if (states.contains(MaterialState.pressed) || states.contains(MaterialState.hovered)) {
final textStyle = headline3.copyWith(foreground: Paint()..color = Colors.orange);
return textStyle;
}
return headline3;
},
),
),
),
),
child: TextButton(
onPressed: () {},
style: Theme.of(context).textButtonTheme.style,
child: Text('Button'),
),
),
),
);
}
Output of it
Since Raised button is deprecated I replaced with Elevated Button. But I can't increase Elevated button's height.
class ZuzuButton extends StatelessWidget {
final Function onTapped;
final String name;
final double height;
final TextStyle textStyle;
final double radius;
final List<BoxShadow> shadow;
final Color color;
final bool enable;
ZuzuButton({this.onTapped,#required this.name,
this.height,this.textStyle,this.radius,this.shadow,this.color,this.enable=true});
#override
Widget build(BuildContext context) {
return Container(
height: height==0?48.0:height,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(radius!=null?radius:30.0),
border: enable? Border.all(
width: color!=null?0.0:1.0,
color: color!=null?color:Color(0x407F16F0),
):null,
boxShadow: enable?(shadow==null?[
BoxShadow(
color: Color(0x407F16F0),
offset: Offset(0.0, 8.0),
spreadRadius: 0,
blurRadius: 20,
),
]:shadow):null,
),
child: ElevatedButton(
child: Container(
child: Center(
child: Text(name,style: textStyle!=null?textStyle:null,),
),
height: height==0?48.0:height,
),
onPressed: enable?onTapped:null,
style: ButtonStyle(
elevation: MaterialStateProperty.resolveWith<double>(
(Set<MaterialState> states) {
return 0.0;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return Color(0xffF7E86C);
return enable?(color!=null?color:null):Color(0xffDBD9D2); // Use the component's default.
},
),
textStyle: MaterialStateProperty.resolveWith<TextStyle>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return ZuzuTopography.FF2_Button_Bold.copyWith(color: Colors.black);
return ZuzuTopography.FF2_Button_Bold.copyWith(color: Colors.white); // Use the component's default.
},
),
shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
(Set<MaterialState> states) {
// if (states.contains(MaterialState.pressed))
// return radius!=null? RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(radius),
// ):null;
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius!=null?radius:30.0),
); // Use the component's default.
},
),
),
),
);
}
}
My output.
How to make this button occupy its container height? I searched internet for solutions but could not found any solutions. Any suggestions in my code? Is there any alternative for Raised Button other than Elevated Button.
I just started using Elevated Button. For me I just change the height using this:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size(width, height) // put the width and height you want
),
child: Text("NEXT"),
)
You can use ConstrainedBox for doing the same. Please refer below code for the reference.
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 300, height: 200),
child: ElevatedButton(
child: Text('300 x 200'),
onPressed: () {},
),
),
Use SizeBox with width and height parameters.
SizedBox(
width: double.infinity,
height: 55.0,
child: ElevatedButton(
),
);
You can simply use fixedSize(width, height). Here is a sample
ElevatedButton(
onPressed: () {},
child: Text(
'submit',
),
style: ElevatedButton.styleFrom(
fixedSize: Size(90, 15),
primary: Colors.deepOrange,
),
)
You can use minimumSize property of an elevated button instead of SizedBox:
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
minimumSize: Size(100, 48), // Size(width, height)
backgroundColor: AppColors.primary,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
child: Text("Button Text", style: textTheme.button),
onPressed: (){},
),
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'),
)