Créer un bouton / bouton arrondi avec un rayon de bordure dans Flutter

174

Je développe actuellement une application Android dans Flutter. Comment puis-je ajouter un bouton arrondi?

flutter dart

— Bande-dessinées Kingsley Kbc
source

1

Vous pouvez utiliser RaisedButtonouInkWell

— Blasanka

Ceci a mentionné plusieurs façons mightytechno.com/rounded-button-flutter

— Ishan Fernando

303

1. Résumé de la solution

Vous pouvez utiliser shapepour FlatButtonet RaisedButton.

2. Bouton arrondi

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

Bouton carré

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

Exemple complet

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FlatButton(
      shape: RoundedRectangleBorder(
        borderRadius: 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: RoundedRectangleBorder(
        borderRadius: 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)),
    ),
  ],   
)

— Abror Esonaliyev
source

1

Salut Abror, cela m'a été très utile. Merci beaucoup!

— jkoech

198

Vous pouvez utiliser le widget RaisedButton. Le widget Bouton en relief a une propriété de forme que vous pouvez utiliser comme indiqué dans l'extrait de code ci-dessous.

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

— dhuma1981
source

37

Il existe de nombreuses façons de procéder. J'en énumère quelques-uns ici.

(1) Utilisation RoundedRectangleBorder

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

(2) Utilisation ClipRRect

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

(3) Utilisation ClipOval

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

(4) Utilisation ButtonTheme

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

(5) Utilisation StadiumBorder

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

— CopsOnRoad
source

31

Vous pouvez simplement utiliser 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),
    ),
  ),
)

Production:

Plus d'informations: RSCoder

— Rahul Shukla
source

1

Merci! Je cherche la réponse que vous avez mentionnée.

— Pramesh Bhalala

28

Vous pouvez simplement utiliser RaisedButtonou vous pouvez utiliser InkWellpour obtenir un bouton personnalisé ainsi que des propriétés telles que onDoubleTap, onLongPresset 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 vous souhaitez utiliser splashColor, highlightColorpropriétés dans un InkWellwidget, utilisez Materialwidget comme le parent du InkWellwidget de au lieu de décorer le conteneur (suppression de la propriété de décoration). Lisez pourquoi? ici .

— Blasanka
source

4

Si vous voulez que le InkWellclip aux coins arrondis, vous devez également ajouter borderRadius: BorderRadius.circular(10.0)au InkWellwidget, sinon il ira aux bords du rectangle de délimitation.

— Victor Rendina

@VictorRendina Je cherchais un moyen d'arrondir les ondulations, merci pour votre commentaire. ajoutez ceci comme une réponse claire aux questions encrier car beaucoup ne le mentionnent pas.

— sudesh

5

Vous pouvez utiliser le code ci-dessous pour créer un bouton arrondi avec une couleur dégradée.

 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: () {

            },
          ),
        );

— Tahseen Quraishi
source

3

Vous devriez probablement vous familiariser avec cette page de la documentation en particulier: arrondir les coins .

La documentation vous montre comment modifier le style d'un composant et le style équivalent en css, si vous le connaissez déjà.

— Champs de Devin
source

3

Vous pouvez utiliser ce code pour un bouton arrondi transparent en passant une couleur transparente à la propriété color à l'intérieur BoxDecoration. par exemple. color: Colors.transparent. Notez également que ce bouton utilise uniquement les widgets Containeret GestureDetector.

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

— mjhansen3
source

1

Si quelqu'un cherche un bouton circulaire complet, je l'ai réalisé de cette façon.

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // icon
                        Text("Picture"), // text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )

— Speedy11
source

0

Vous pouvez toujours utiliser le bouton Matériel si vous utilisez Material App comme widget principal.

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

— Matias
source

0

Dans le Container()widget Flutter, utilisez pour styliser votre widget.En utilisant le Container()widget, vous pouvez définir la bordure ou le coin arrondi de n'importe quel widget

Si vous souhaitez définir n'importe quel type de style et de décoration, mettez ce widget dans le Container()widget, qui fournit de nombreuses propriétés à la décoration.

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // make rounded corner
  child: Text("Click"),
)

— Sanjayrajsinh
source

0

pour utiliser n'importe quelle forme dans You'r Button, assurez-vous d'exécuter tout le code à l'intérieur du widget Button

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

si vous voulez que Square utilise `BorderRadius.circular (0.0), il devient automatiquement Square

le bouton comme celui-ci

Voici le code source complet de l'écran d'interface utilisateur donné

 Scaffold(
    backgroundColor: Color(0xFF8E44AD),
    body: new Center(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
            padding: new EdgeInsets.only(top: 92.0),
            child: Text(
              "Currency Converter",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(),
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Amount",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "From",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                  filled: true,
                  fillColor: Colors.white,
                  labelText: "To",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
            ),
          ),
          SizedBox(height: 20.0),
          MaterialButton(
            height: 58,
            minWidth: 340,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(12)),
            onPressed: () {},
            child: Text(
              "CONVERT",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            color: Color(0xFFF7CA18),
          ),
        ],
      ),
    ),
  ),
);

— Champ 96k
source

0

voici une autre solution

 Container(
                    height: MediaQuery.of(context).size.height * 0.10,
                    width: MediaQuery.of(context).size.width,
                    child: ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width * 0.75,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            side: BorderSide(color: Colors.blue)),
                        onPressed: () async {
                           // do something 
                        },
                        color: Colors.red[900],
                        textColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("Button Text,
                              style: TextStyle(fontSize: 24)),
                        ),
                      ),
                    ),
                  ),

— ekoRem
source

0

Voici le code pour votre problème, il vous suffit de prendre un simple conteneur avec un rayon de bordure dans boxdecoration.

    new Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
        color: Colors.blue,
      ),

      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Text(
              "Next",
              style: new TextStyle(
                 fontWeight: FontWeight.w500,
                  color: Colors.white,
                  fontSize: 15.0,
               ),
             ),
          ),
        ],
      ),
    ),

— Paras Sharma
source

0

RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )

— shilpa navale
source

1

Bien que ce code puisse résoudre la question, inclure une explication sur comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre message et entraînerait probablement plus de votes à la hausse. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir, pas seulement à la personne qui la pose maintenant. Veuillez modifier votre réponse pour ajouter des explications et donner une indication des limites et des hypothèses applicables.

— Богдан Опир

ok merci dis-moi où je me trompe

— shilpa navale