Estou usando o Flutter e gostaria de adicionar uma borda a um widget (neste caso, um widget de texto).
Tentei TextStyle e Text, mas não vi como adicionar uma borda.
fonte
Estou usando o Flutter e gostaria de adicionar uma borda a um widget (neste caso, um widget de texto).
Tentei TextStyle e Text, mas não vi como adicionar uma borda.
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 umadecoration
propriedade que define bordas; mas também imagens de fundo ou sombras.Alternativamente, como @Aziza disse, você pode usar
Container
. Que é a combinação deDecoratedBox
,SizedBox
e alguns outros widgets úteis.fonte
A melhor maneira é usar BoxDecoration ()
Vantagem
Desvantagem
BoxDecoration
use apenas com oContainer
widget para que você deseje envolver seu widgetContainer()
Exemplo
fonte
Usar BoxDecoration () é a melhor maneira de mostrar borda.
Você também pode ver o formato completo aqui
fonte
Você pode usar o Container para conter seu widget:
fonte
Use um recipiente com Boxdercoration.
fonte