Erstellen Sie in Flutter einen abgerundeten Button / Button mit Border-Radius

Ich entwickle gerade eine Android-App in Flutter. Wie kann ich eine abgerundete Schaltfläche hinzufügen?

Aktualisieren

Da die linksseitigen Schaltflächen jetzt veraltet sind, verwenden Sie die rechtsseitigen.

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

• ElevatedButton

1. Verwenden StadiumBorder

   

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

2. Verwenden RoundedRectangleBorder

   

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

3. Verwenden CircleBorder

   

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

4. Verwenden BeveledRectangleBorder

   

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

OutlinedButton

1. Verwenden StadiumBorder

   

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

2. Verwenden RoundedRectangleBorder

   

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

3. Verwenden CircleBorder:

   

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

4. Verwenden BeveledRectangleBorder

   

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

TextButton

TextButton funktioniert auch ähnlich ElevatedButton Und OutlinedButtonjedoch können Sie die Formen nur sehen, wenn die Schaltfläche gedrückt wird.

Seit September 2020 Flutter 1.22.0:

Sowohl “RaisedButton” als auch “FlatButton” sind veraltet.

Die aktuellste Lösung ist die Verwendung neuer Schaltflächen:

1. ElevatedButton:

Code:

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),
    ),
  ),
)

Nicht vergessen, es gibt auch eine .icon Konstruktor zum einfachen Hinzufügen eines Symbols:

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:

Code:

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:

Sie können immer verwenden TextButton wenn Sie keinen Umriss oder keine Farbfüllung wünschen.

Sie können einfach verwenden RaisedButton

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),
    ),
  ),
)

Ausgang:

Mehr Info: RSCoder

Sie können einfach verwenden RaisedButton oder Sie können verwenden InkWell um eine benutzerdefinierte Schaltfläche und auch Eigenschaften wie zu erhalten onDoubleTap, onLongPress, usw.:

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),),),
  ),
),

Wenn Sie die verwenden möchten splashColor Und highlightColor Eigenschaften in der InkWell Widget, verwenden Sie das Material Widget als übergeordnetes Element der InkWell Widget, anstatt den Container zu dekorieren (Löschen der Dekorationseigenschaft). Lesen Sie hier, warum.