Comment ajouter une bordure à un widget dans Flutter?

151

J'utilise Flutter et j'aimerais ajouter une bordure à un widget (dans ce cas, un widget Texte).

J'ai essayé TextStyle et Text, mais je n'ai pas vu comment ajouter une bordure.

Seth Ladd
la source

Réponses:

305

Vous pouvez ajouter le TextFieldas a childà un Containerqui a une propriété BoxDecorationwith border:

entrez la description de l'image ici

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)
Aziza
la source
206

Voici une réponse élargie. A DecoratedBoxest ce dont vous avez besoin pour ajouter une bordure, mais j'utilise a Containerpour la commodité d'ajouter une marge et un remplissage.

Voici la configuration générale.

entrez la description de l'image ici

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

BoxDecorationest

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

Largeur de la bordure

entrez la description de l'image ici

Celles - ci ont une largeur de bordure 1, 3et 10respectivement.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

Couleur de la bordure

entrez la description de l'image ici

Ceux-ci ont une couleur de bordure de

  • Colors.red
  • Colors.blue
  • Colors.green

Code

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

Côté bordure

entrez la description de l'image ici

Ceux-ci ont un côté frontière de

  • gauche (3.0), haut (3.0)
  • bas (13,0)
  • gauche (bleu [100], 15,0), haut (bleu [300], 10,0), droite (bleu [500], 5,0), bas (bleu [800], 3,0)

Code

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

Rayon de la bordure

entrez la description de l'image ici

Ceux - ci ont des rayons de la frontière de 5, 10et 30respectivement.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

Continuer

DecoratedBox/ BoxDecorationsont très flexibles. Lisez Flutter - BoxDecoration Cheat Sheet pour plus d'idées.

Suragch
la source
Quelqu'un sait-il utiliser BorderSide avec BorderRadius?
HaSnen Tai
@HaSnenTai Avez-vous trouvé une solution? Dans ma conception, je dois donner un fond de bordure avec une forme de pilule. Comment puis-je atteindre cet objectif?
Robert Williams le
@RobertWilliams, j'utiliserais un widget de dessin personnalisé.
Suragch le
@Suragch Le widget est un texte qui a besoin d'une bordure solide (en forme de pilule). La largeur du widget texte n'est pas fixe. Pour utiliser un widget de dessin personnalisé, n'ai-je pas besoin de fournir des propriétés de correction?
Robert Williams le
@RobertWilliams, je ne sais pas exactement ce que vous essayez de faire. J'ouvrirais une nouvelle question avec une illustration et une explication de ce qui ne fonctionne pas actuellement. N'hésitez pas à créer un lien vers celui-ci à partir d'ici.
Suragch le
10

Comme indiqué dans la documentation, le flutter préfère la composition aux paramètres. La plupart du temps, ce que vous recherchez n'est pas une propriété, mais plutôt un wrapper (et parfois quelques helpers / "builder")

Pour les frontières, ce que vous voulez est DecoratedBox, qui a undecoration propriété qui définit les bordures; mais aussi des images de fond ou des ombres.

Alternativement, comme @Aziza l'a dit, vous pouvez utiliser Container. Quelle est la combinaison de DecoratedBox, SizedBoxet quelques autres widgets utiles.

Rémi Rousselet
la source
7

Le meilleur moyen est d'utiliser BoxDecoration ()

Avantage

  • Vous pouvez définir une bordure du widget
  • Vous pouvez définir la couleur de la bordure ou largeur de la
  • Vous pouvez définir un coin arrondi de la bordure
  • Vous pouvez ajouter l' ombre du widget

Désavantage

  • BoxDecorationutilisez uniquement avec un Containerwidget pour que vous souhaitiez envelopper votre widget dansContainer()

Exemple

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

entrez la description de l'image ici

Sanjayrajsinh
la source
1

L'utilisation de BoxDecoration () est la meilleure façon d'afficher la bordure.

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

Vous pouvez également afficher le format complet ici

Arshia Mehta
la source
0

Vous pouvez utiliser Container pour contenir votre widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),
竭 智 Dan
la source
-1

Utilisez un contenant avec Boxdercoration.

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );
SR Keshav
la source