Respostas:
Você pode adicionar as TextField
como child
a a Container
que possui uma propriedade 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"),
)
Aqui está uma resposta expandida. A DecoratedBox
é o que você precisa para adicionar uma borda, mas estou usando a Container
para a conveniência de adicionar margem e preenchimento.
Aqui está a configuração geral.
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),
),
);
}
onde BoxDecoration
está
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
Estes têm uma largura da borda de 1
, 3
e, 10
respectivamente.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}
Estes têm uma cor de borda de
Colors.red
Colors.blue
Colors.green
Código
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}
Estes têm um lado da fronteira de
Código
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,
),
),
);
}
Estes têm raios fronteira 5
, 10
e, 30
respectivamente.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
DecoratedBox
Eu BoxDecoration
sou muito flexível. Leia Flutter - BoxDecoration Cheat Sheet para muitas mais idéias.
Conforme declarado na documentação, a vibração prefere a composição sobre os parâmetros. Na maioria das vezes, o que você procura não é uma propriedade, mas um invólucro (e algumas vezes alguns ajudantes / "construtores")
Para bordas, o que você quer é DecoratedBox
, que possui uma decoration
propriedade que define bordas; mas também imagens de fundo ou sombras.
Alternativamente, como @Aziza disse, você pode usar Container
. Que é a combinação de DecoratedBox
, SizedBox
e alguns outros widgets úteis.
A melhor maneira é usar BoxDecoration ()
Vantagem
Desvantagem
BoxDecoration
use apenas com o Container
widget para que você deseje envolver seu widgetContainer()
Exemplo
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"),
)
Usar BoxDecoration () é a melhor maneira de mostrar borda.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 4,
)),
child: //Your child widget
),
Você também pode ver o formato completo aqui