Kingsley CA
Actualmente estoy desarrollando una aplicación para Android en Flutter. ¿Cómo puedo agregar un botón redondeado?
policíasencarretera
Actualizar
Dado que los botones del lado izquierdo ahora están en desuso, use los del lado derecho.
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
-
ElevatedButton
-
Usando
StadiumBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom(shape: StadiumBorder()), )
-
Usando
RoundedRectangleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), // <-- Radius ), ), )
-
Usando
CircleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
-
Usando
BeveledRectangleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12) ), ), )
OutlinedButton
-
Usando
StadiumBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: StadiumBorder(), ), )
-
Usando
RoundedRectangleBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
-
Usando
CircleBorder
:OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
-
Usando
BeveledRectangleBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
Botón de texto
TextButton
también funciona de manera similar a ElevatedButton
y OutlinedButton
sin embargo, solo puede ver las formas cuando se presiona el botón.
-
RaisedButton está en desuso y ya no se usa. Use el botón Elevado con ButtonStyle como lo sugiere Peter
– Ashutosh Singh
31 de mayo de 2021 a las 16:24
WSBT
Desde septiembre de 2020, Flutter 1.22.0:
Tanto “RaisedButton” como “FlatButton” están en desuso.
La solución más actualizada es usar nuevos botones:
1. ElevatedButton
:
Código:
ElevatedButton(
child: Text("ElevatedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
No lo olvides, también hay un .icon
constructor para agregar un icono fácilmente:
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
2. OutlinedButton
:
Código:
OutlinedButton.icon(
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
3. TextButton
:
Siempre puedes usar TextButton
si no desea un contorno o un relleno de color.
Simplemente puede usar Botón elevado
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)
Producción:
Más información: RSCoder
Pedro Mortensen
Simplemente puede usar RaisedButton
o puedes usar InkWell
para obtener un botón personalizado y también propiedades como onDoubleTap
, onLongPress
, etc.:
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
Si desea utilizar el splashColor
y highlightColor
propiedades en el InkWell
artilugio, utilice el Material
widget como padre del InkWell
widget en lugar de decorar el contenedor (borrando la propiedad de decoración). Lea acerca de por qué aquí.
-
si quieres el
InkWell
para recortar a las esquinas redondeadas, entonces necesita agregarborderRadius: BorderRadius.circular(10.0)
haciaInkWell
widget también, de lo contrario, irá a los bordes del rectángulo delimitador.– Víctor Rendina
1 jun 2019 a las 20:36
-
@VictorRendina Estaba buscando una forma de redondear las ondas, gracias por tu comentario. agregue esto como una respuesta separada a las preguntas del tintero, ya que muchos no mencionan esto.
– Extremis II
22 de junio de 2019 a las 19:56
Esto aquí ha mencionado múltiples formas mightytechno.com/botón-redondeado-flutter
–Ishan Fernando
26 de diciembre de 2019 a las 9:13