Erstellen Sie eine Schaltfläche mit abgerundeten Rahmen

Wie würden Sie eine FlatButton in eine Schaltfläche mit einem abgerundeten Rand? Ich habe die abgerundeten Rahmen, Form mit RoundedRectangleBorder aber irgendwie müssen die Farbe der Grenze.

new FlatButton(
  child: new Text("Button text),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)

Beispiel, wie button mit abgerundeten button Aussehen würde : Erstellen Sie eine Schaltfläche mit abgerundeten Rahmen

InformationsquelleAutor S.D. | 2018-04-29
  1. 44

    Verwenden OutlineButton statt FlatButton.

    new OutlineButton(
  child: new Text("Button text"),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)
    • Verpasst ein schließen zitieren, nach der "Button-text"
    • wie kann ich das ändern Rahmenfarbe?
    • in Flattern, wenn onPressed: null es bedeutet, dass die Taste deaktiviert ist, wird nur etwas tun, mit onPressed und die Farbe wird sich zeigen.
    InformationsquelleAutor Rémi Rousselet
  2. 9
    new OutlineButton(  
 child: new Text("blue outline") ,
   borderSide: BorderSide(color: Colors.blue),
  ),

//this property adds outline border color
    • Wenn jemand fragt, warum die Farbe nicht angezeigt, in meinem Fall ist es, weil Sie sich übergeben müssen onPress nicht null ist.
    InformationsquelleAutor cindy
  3. 9

    Verwenden StadiumBorder Form

                  OutlineButton(
                onPressed: () {},
                child: Text("Follow"),
                borderSide: BorderSide(color: Colors.blue),
                shape: StadiumBorder(),
              )
    InformationsquelleAutor Ahmed
  4. 2

    Für die Umsetzung der abgerundeten Rahmen-Schaltfläche mit einem border-color verwenden Sie diese

    OutlineButton(
                    child: new Text("Button Text"),borderSide: BorderSide(color: Colors.blue),
                    onPressed: null,
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0))
                ),
    InformationsquelleAutor Faris Muhammed
  5. 2

    So, ich habe mir mit voller styling und Grenze Farben wie dieses:

    new OutlineButton(
    shape: StadiumBorder(),
    textColor: Colors.blue,
    child: Text('Button Text'),
    borderSide: BorderSide(
        color: Colors.blue, style: BorderStyle.solid, 
        width: 1),
    onPressed: () {},
)
    InformationsquelleAutor Optimoose
  6. 1

    Wenn Sie nicht möchten, zu verwenden OutlineButton und halten wollen, normal RaisedButton Sie können wickeln Sie Ihre Schaltfläche in ClipRRect oder ClipOval wie:

    ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    child: Text("Button"),
    onPressed: () {},
  ),
),
    InformationsquelleAutor CopsOnRoad
  7. 0
    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)),
        )
    InformationsquelleAutor wizmeaaaa
Schreibe einen Kommentar