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.

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

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

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.

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ù BoxDecorationest

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

Largeur de la bordure

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

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

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

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.

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.

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

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

Vous pouvez utiliser Container pour contenir votre widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Utilisez un contenant avec Boxdercoration.

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