web-dev-qa-db-fra.com

Comment ajouter une bordure à un widget, dans Flutter?

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

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

dartflutter
63
Seth Ladd

Vous pouvez ajouter la TextField en tant que child à une Container possédant une propriété BoxDecoration avec border:

enter image description here

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

Voici une réponse élargie. Un DecoratedBox est ce dont vous avez besoin pour ajouter une bordure, mais j'utilise un Container pour la commodité d'ajouter une marge et un remplissage.

Voici la configuration générale.

enter image description here

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 est

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

Largeur de la bordure

enter image description here

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

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

Couleur de la bordure

enter image description here

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

enter image description here

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

  • à gauche (3,0), en haut (3,0)
  • bas (13.0)
  • gauche (bleu [100], 15,0), haut (bleu [300], 10,0), droit (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 frontière

enter image description here

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

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

Continuer

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

87
Suragch

Comme indiqué dans la documentation, les flottements préfèrent 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 aides/"constructeur")

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

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

4
Rémi Rousselet