How to fix this parameter name error. It error after I change OutlinedButton. Someone can help me.
Padding(
padding: EdgeInsets.fromLTRB(0, 10, 10, 10),
// ignore: deprecated_member_use
child: OutlinedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: secondaryColor,
borderSide: BorderSide(color: secondaryColor),
child: Text('Send Notification'),
onPressed: () => _sendNotificationDialog(context),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
),
FlatButton, Raised button and some widgets are now deprecated from the flutter framework. They wanted to distinguish the styling of the button from the rest of the widget. As you can see hear: New buttons and button themes
Outlined button is not deprecated. To give style to it, you need to override the parameter 'style', like the code below:
OutlinedButton(
style: OutlinedButton.styleFrom(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(
color: secondaryColor,
),
),
),
child: Text('Send Notification'),
onPressed: () => _sendNotificationDialog(context),
),
What did you had before OutlinedButton ?
The code error means that the parameters you try to assign, doesn't exist in the OutlineButton Widget
Edit :
What I've found is that the buttons were migrated. it could be useful for other of your buttons :
See the migration guide in flutter.dev/go/material-button-migration-guide). ' 'This feature was deprecated after v1.26.0-18.0.pre.'
You can try to use style argument instead. You'll find plenty of parameters to edit your button
OutlinedButton(
style: ButtonStyle(
shape: ,
textStyle: ,
), onPressed: () { },
child: const Text('Hello'),
)
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 got following code:
FlatButton.icon(
minWidth: double.infinity,
padding: EdgeInsets.symmetric(
vertical: kDefaultPadding,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: kPrimaryColor,
onPressed: () {},
icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
label: Text(
"New message",
style: TextStyle(color: Colors.white),
),
).addNeumorphism(
topShadowColor: Colors.white,
bottomShadowColor: Color(0xFF234395).withOpacity(0.2),
),
It seems the FlatButtun is now deprecated and I must convert it to TextButton but when I try that, it gives me errors for minWith parameter. When I try to wrap it with ConstrainedBox I get other errors for padding shape, etc.
I don't know how make this old code work as expected before?
As I've commented, you can't just "convert" a FlatButton.icon to a TextButton.icon. The changes in the buttons are breaking changes made to Flutter:
A new set of basic material button widgets and themes have been added
to Flutter. The original classes have been deprecated and will
eventually be removed. The overall goal is to make buttons more
flexible, and easier to configure via constructor parameters or
themes.
So, to solve your problem, you'll have to compose your own widgets to get close to FlatButton.icon.
For your example, you can use the Padding widget for padding, and SizedBox for the width. for rounded corners, you can use the style property.
Your button code can look something like this using TextButton.icon:
SizedBox(
width: double.infinity,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 10,
),
child: TextButton.icon(
//rounded corners
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
onPressed: () {},
icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
label: Text(
"New message",
style: TextStyle(color: Colors.white),
),
),
),
)
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
This question already has answers here:
Flutter: Remove padding in buttons - FlatButton, ElevatedButton, OutlinedButton
(11 answers)
Closed last year.
I just updated my code in Flutter to use TextButton instead of old FlatButton. I can't figure out how to set width and height of a button though.
I got two problems. First one is that I have this icon Button now:
TextButton.icon(
label: Container(),
style: TextButton.styleFrom(padding: EdgeInsets.all(0),
backgroundColor: Colors.black26),
icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
onPressed: () {}),
which loos like this:
I can't figure out how to get rid of the padding on the left and the right. Although I did set the padding inside the style to zero.
My Second Problem is a button that I had like this:
ButtonTheme(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
height: 10,
minWidth: 15,
padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
child: FlatButton(
color: Colors.white.withOpacity(0.9),
child: <MyChild>,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: condition
? Theme.of(context).primaryColor
: widget.color != null
? widget.color
: Colors.black54,
width: 0.5)),
));
}
and it looked like this:
Now I updated my code to this:
OutlinedButton(
style: OutlinedButton.styleFrom(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
side: BorderSide(
width: 0.5,
color: condition
? Theme.of(context).primaryColor
: widget.color != null
? widget.color
: Colors.black54),
primary: Colors.white.withOpacity(0.9),
),
child: <MyChild>,
onPressed: () {})
But it looks like this now:
The padding on top/bottom is too much but I can't figure out how to minimize it.
Any advice? Thank you!
Edit: I tried to use OutlinedButtonTheme but this did not allow me to set a height etc.
Flutter TextButton is the new button. Since Flutter 2.0 FlatButton is deprecated.
Example of how to use this button with custom styles.
This is a back button with an icon.
It has a wide pressable area and alignment to left according to design.
For inner padding just use Padding widget in the child property - it gives you consistent style for any String length.
TextButton(
onPressed: () => Navigator.pop(context),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(50, 30),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
alignment: Alignment.centerLeft),
child: Icon(
CupertinoIcons.back,
color: Colors.black,
size: 18,
),
),
For those who are curious about tapTargetSize: MaterialTapTargetSize.shrinkWrap, property - more info is here https://stackoverflow.com/a/71841707/7198006
You need to set three attributes: minimumSize, padding and tapTargetSize
TextButton(
onPressed: (){},
child: Icon(Icons.delete, color: Colors.black54),
style: TextButton.styleFrom(
minimumSize: Size.zero,
padding: EdgeInsets.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
)
Edit:
I have added some padding in my code, and it looks good.
padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),
Okay, I just figured it out. One need to set the minimumSize attribute.
OutlinedButton.styleFrom(
minimumSize: Size(widthValue, heightValue),
)
This was what made my Buttons bigger than I wanted.
This question already has answers here:
Create a rounded button / button with border-radius in Flutter
(35 answers)
Closed 3 years ago.
How would you make a FlatButton into a button with a rounded border? I have the rounded border shape using RoundedRectangleBorder but somehow need to color the border.
new FlatButton(
child: new Text("Button text),
onPressed: null,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)
Example of how button with rounded button would look :
Use OutlinedButton instead of FlatButton.
OutlinedButton(
onPressed: null,
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
),
child: const Text("Button text"),
);
FlatButton(
onPressed: null,
child: Text('Button', style: TextStyle(
color: Colors.blue
)
),
textColor: MyColor.white,
shape: RoundedRectangleBorder(side: BorderSide(
color: Colors.blue,
width: 1,
style: BorderStyle.solid
), borderRadius: BorderRadius.circular(50)),
)
Use StadiumBorder shape
OutlineButton(
onPressed: () {},
child: Text("Follow"),
borderSide: BorderSide(color: Colors.blue),
shape: StadiumBorder(),
),
new OutlineButton(
child: new Text("blue outline") ,
borderSide: BorderSide(color: Colors.blue),
),
// this property adds outline border color
So I did mine with the full styling and border colors like this:
new OutlineButton(
shape: StadiumBorder(),
textColor: Colors.blue,
child: Text('Button Text'),
borderSide: BorderSide(
color: Colors.blue, style: BorderStyle.solid,
width: 1),
onPressed: () {},
)
For implementing the rounded border button with a border color use this
OutlineButton(
child: new Text("Button Text"),borderSide: BorderSide(color: Colors.blue),
onPressed: null,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0))
),
If you don't want to use OutlineButton and want to stick to normal RaisedButton, you can wrap your button in ClipRRect or ClipOval like:
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
child: Text("Button"),
onPressed: () {},
),
),