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

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

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

   

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

2. Usando RoundedRectangleBorder

   

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

3. Usando CircleBorder

   

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

4. Usando BeveledRectangleBorder

   

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

OutlinedButton

1. Usando StadiumBorder

   

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

2. Usando RoundedRectangleBorder

   

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

3. Usando CircleBorder:

   

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

4. 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 OutlinedButtonsin embargo, solo puede ver las formas cuando se presiona el botón.

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

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í.