Cree un botón / botón redondeado con radio de borde en Flutter

3 minutos de lectura

Avatar de usuario de Kingsley CA
Kingsley CA

Actualmente estoy desarrollando una aplicación para Android en Flutter. ¿Cómo puedo agregar un botón redondeado?

Avatar de usuario de CopsOnRoad
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

  1. Usando StadiumBorder

    ingrese la descripción de la imagen aquí

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(shape: StadiumBorder()),
    )
    
  2. Usando RoundedRectangleBorder

    ingrese la descripción de la imagen aquí

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12), // <-- Radius
        ),
      ),
    )
    
  3. Usando CircleBorder

    ingrese la descripción de la imagen aquí

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(24),
      ),
    )
    
  4. Usando BeveledRectangleBorder

    ingrese la descripción de la imagen aquí

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(12)
        ),
      ),
    )
    

OutlinedButton

  1. Usando StadiumBorder

    ingrese la descripción de la imagen aquí

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: StadiumBorder(),
      ),
    )
    
  2. Usando RoundedRectangleBorder

    ingrese la descripción de la imagen aquí

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    )
    
  3. Usando CircleBorder:

    ingrese la descripción de la imagen aquí

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(24),
      ),
    )
    
  4. Usando BeveledRectangleBorder

    ingrese la descripción de la imagen aquí

    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 OutlinedButtonsin 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

Avatar de usuario de WSBT
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:

Botón sin icono

Botón con un icono

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:

Botón contorneado

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:

ingrese la descripción de la imagen aquí

Más información: RSCoder

Avatar de usuario de Peter Mortensen
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),),),
  ),
),

Ingrese la descripción de la imagen aquí

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 agregar borderRadius: BorderRadius.circular(10.0) hacia InkWell 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


¿Ha sido útil esta solución?