it-swarm.com.de

Erstellen Sie eine abgerundete Schaltfläche mit einem Randradius in Flutter

Ich entwickle gerade eine Android-App in Flutter. Wie kann ich einen abgerundeten Button hinzufügen? http://pertamini.co/rounded-button/

21

Sie können das RaisedButton-Widget verwenden. Das Widget für erhöhte Schaltflächen verfügt über eine Formeigenschaft, die Sie wie unten gezeigt verwenden können.

 new RaisedButton(
          child: new Text("Press Me"),
          onPressed: null,
          shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )
78
dhuma1981

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

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

 enter image description here

Wenn Sie splashColor, highlightColor-Eigenschaften in InkWell-Widget verwenden möchten, verwenden Sie Material als Widget des InkWell-Widgets, anstatt den Container zu dekorieren (Dekorationseigenschaft löschen). Warum lesen? Hier .

14
Blasanka

enter image description here

Es gibt viele Möglichkeiten, dies zu tun. Ich liste hier nur wenige auf.

(1) Verwenden von RoundedRectangleBorder

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {},
  child: Text("Button"),
)

(2) Verwenden von ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(3) Verwenden von ClipOval

ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(4) Verwenden von ButtonTheme

ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(5) Verwenden von StadiumBorder

RaisedButton(
  shape: StadiumBorder(),
  onPressed: () {},
  child: Text("Button"),
)
11
CopsOnRoad

Sie können den folgenden Code verwenden, um eine abgerundete Schaltfläche mit einer Verlaufsfarbe zu erstellen.

 Container(
          width: 130.0,
          height: 43.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.9],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                Color(0xff1d83ab),
                Color(0xff0cbab8),
              ],
            ),
          ),
          child: FlatButton(
            child: Text(
              'Sign In',
              style: TextStyle(
                fontSize: 16.0,
                fontFamily: 'Righteous',
                fontWeight: FontWeight.w600,
              ),
            ),
            textColor: Colors.white,
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {

            },
          ),
        );
3

Sie sollten sich wahrscheinlich besonders mit dieser Seite der Dokumente vertraut machen: Ecken abrunden .

Die Dokumente zeigen Ihnen, wie Sie den Stil einer Komponente und den entsprechenden Stil in css ändern, wenn Sie dies bereits kennen.

2
Devin Fields

Sie können diesen Code für eine transparente, abgerundete Schaltfläche verwenden, indem Sie eine transparente Farbe an die color -Eigenschaft in BoxDecoration übergeben. z.B. color: Colors.transparent. Beachten Sie außerdem, dass diese Schaltfläche nur die Widgets Container und GestureDetector verwendet.

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

Transaparent Background Button

2
mjhansen3

Sie können Shape für FlatButton und RaisedButton verwenden.

 shape: new RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),

enter image description here Form: new RoundedRectangleBorder (borderRadius: new BorderRadius.circular (0.0), Seite: BorderSide (Farbe: Colors.red)), enter image description here .Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), side: BorderSide(color: Colors.red)), color: Colors.white, textColor: Colors.red, padding: EdgeInsets.all(8.0), onPressed: () {}, child: Text( "Add to Cart".toUpperCase(), style: TextStyle( fontSize: 14.0, ), ), ), SizedBox(width: 10), RaisedButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), side: BorderSide(color: Colors.red)), onPressed: () {}, color: Colors.red, textColor: Colors.white, child: Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)), ), ], )

1

Sie können immer die Materialschaltfläche verwenden, wenn Sie die Material-App als Haupt-Widget verwenden.

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)
1
Matias

Sie können einfach RaisedButton verwenden.


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