Réponses:
Vous pouvez ajouter le TextField
as a child
à un Container
qui a une propriété BoxDecoration
with 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 DecoratedBox
est ce dont vous avez besoin pour ajouter une bordure, mais j'utilise a Container
pour 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ù BoxDecoration
est
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
Celles - ci ont une largeur de bordure 1
, 3
et 10
respectivement.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width 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,
),
);
}
Ceux-ci ont un côté frontière de
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,
),
),
);
}
Ceux - ci ont des rayons de la 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
),
);
}
DecoratedBox
/ BoxDecoration
sont 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
, SizedBox
et quelques autres widgets utiles.
Le meilleur moyen est d'utiliser BoxDecoration ()
Avantage
Désavantage
BoxDecoration
utilisez uniquement avec un Container
widget 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