Flutter dar contorno arredondado
Estou a fazer um contentor, dei-lhe uma fronteira, mas seria bom ter fronteiras arredondadas.
isto é o que eu tenho agora (ver imagem)
Https://drive.google.com/file/d/1AJ8ytjuUBCDX6mLBE3jmNyJdt7lTGBeW/view?usp=sharing
Container(
width: screenWidth / 7,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Text(
'6',
style: TextStyle(
color: Colors.red[500],
fontSize: 25),
),
Text(
'sep',
style: TextStyle(
color: Colors.red[500]),
)
],
),
),
);
Tentei colocar cliprect sobre ele, mas isso elimina a fronteira. Existe uma solução para isto? Obrigado antecipadamente!!!
47
Author: Karel Debedts, 2019-09-03
6 answers
Tente usar a propriedade borderRadius
de BoxDecoration
Algo como
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
130
Author: Evaldo Bratti, 2019-09-03 20:43:30
Para torná-lo completamente circular.
Container(
decoration: BoxDecoration(
shape: BoxShape.circle
),
Para o fazer circular em locais seleccionados.
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0)),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)),
child: Text("hello"),
),
Ou
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
13
Author: S.R Keshav, 2020-08-11 10:01:28
Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), border: Border.all( color: HexColor('#C88A3D'), width: 3.0 ) ), child: Container( decoration: new BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white,), ) ),
1
Author: Sachit Gagneja, 2020-10-25 22:52:59
Aumento para a resposta acima.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
),
child: ...
)
0
Author: hsul4n, 2020-08-11 09:45:13
A chave aqui é adicionar um BorderRadius
:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[340],
),
borderRadius: BorderRadius.all(Radius.circular(35),
),
child: `enter code here`
),
0
Author: Rohit Sharma, 2021-02-10 14:56:34
Pode usar o elemento Cliprect:
ClipRRect (
borderRadius: BorderRadius.circular(5.0),
child: Container(
height: 25,
width: 40,
color: const Color(0xffF8742C),
child: Align(
alignment: Alignment.center,
child: Text("Withdraw"))),
)
-1
Author: Adam Shelby, 2020-10-06 06:37:58