Comment ajouter une bordure à un widget dans Flutter ?

Question

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

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

Answer 1

Vous pouvez ajouter le Text en tant que child à un Container qui a un BoxDecoration con border propriété :

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

Answer 2

Voici une réponse élargie. A DecoratedBox est ce dont vous avez besoin pour ajouter une bordure, mais j'utilise un fichier Container pour la commodité de l'ajout de la marge et du rembourrage.

Voici la configuration générale.

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

où le BoxDecoration es

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

Largeur de la bordure

Ces derniers ont une largeur de bordure de 1 , 3 y 10 respectivement.

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

Couleur de la bordure

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é frontière

Ces derniers ont un côté frontalier 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

Ces derniers ont des rayons de bordure de 5 , 10 y 30 respectivement.

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

Continuez

DecoratedBox / BoxDecoration sont très flexibles. Lire Aide-mémoire pour la décoration des boîtes à palettes pour de nombreuses autres idées.

Answer 3

La meilleure façon est d'utiliser BoxDecoration()

Avantage

• Vous pouvez définir le frontière d'un widget
• Vous pouvez définir la bordure Couleur o Largeur
• Vous pouvez définir un Coin arrondi d'une frontière
• Vous pouvez ajouter un Ombre d'un widget

Désavantage

• BoxDecoration à utiliser uniquement avec Container vous voulez donc envelopper votre widget dans Container()

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

Answer 4

Comme indiqué dans la documentation, Flutter préfère la composition aux paramètres.

La plupart du temps, vous ne recherchez pas une propriété, mais plutôt un wrapper (et parfois quelques helpers/"builder").

Pour les frontières, vous voulez DecoratedBox qui a un decoration qui définit les bordures, mais aussi les images de fond ou les ombres.

Alternativement, comme Aziza a dit vous pouvez utiliser Container . Qui est la combinaison de DecoratedBox , SizedBox et quelques autres widgets utiles.

Answer 5

Ici, comme le Texte ne dispose pas d'une propriété permettant de définir un objet border nous devons l'entourer d'un widget qui nous permet de définir une bordure. Il existe plusieurs solutions. Mais la meilleure solution est l'utilisation de BoxDecoration dans le Container widget.

Pourquoi choisir d'utiliser BoxDecoration ?

Parce que BoxDecoration offre plus de personnalisation comme la possibilité de définir :

Tout d'abord, le border et aussi définir :

• Couleur de la bordure
• largeur de la bordure
• rayon de la bordure
• forme
• et plus encore ...

Un exemple :

   Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

Sortie :