In one of my flutter application, have a FlatButton like following
FlatButton(
child: Text("Forgot ist ?",
style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
textAlign: TextAlign.left
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(0.0),
side: BorderSide(color: Colors.transparent),
),
onPressed: (){
Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
},
)
How to make the text of the button to be align at right ? Currently it is centered with equal space at left and right.
Currently showing like this
+-----------------+
| Button Text |
+-----------------+
I am trying to make it like
+-----------------+
| Button Text|
+-----------------+
Your currently can't use the Text class textAlign property to fix this issue because a Text inside a FlatButton takes up minimum amount of space. Therefore, that property will do nothing. You need to set a space to be taken by the text widget. Here's a solution:
FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(0.0),
side: BorderSide(color: Colors.black),
),
onPressed: (){
Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()));
},
child: Container(
alignment: Alignment.centerRight,
width: 100, // choose your width
child: Text("Forgot ist ?",
style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
),
),
),
This would work perfectly, check it out.
FlatButton(
padding: EdgeInsets.zero,
color: Colors.blue,
// wrap the text in a container and give it a specified width
child: Container(
width: 100,
child: Text(
"Forgot ist ?",
style: TextStyle(
color: Color.fromRGBO(107, 106, 106, 1),
fontFamily: 'ActoBook',
),
// set the alignment of the text to TextAlign.end
textAlign: TextAlign.end,
),
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(0.0),
side: BorderSide(color: Colors.transparent),
),
onPressed: () {
Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
},
)),
This code above gives the below output:
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
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,
),
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'),
)
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: () {},
),
),