Karel debedts
estoy haciendo un Container()
Le di un borde, pero sería bueno tener bordes redondeados.
Esto es lo que tengo ahora:
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]),
)
],
),
),
);
Traté de poner ClipRRect
en él, pero eso recorta el borde. ¿Existe alguna solucion para esto?
Evaldo Bratti
Intenta usar la propiedad borderRadius
de BoxDecoration
Algo como
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
-
BorderRadius.circular(20)
puede usarse como abreviatura deBorderRadius.all(Radius.circular(20))
– Exfridos
26 de marzo de 2021 a las 14:23
SR Keshav
Para hacerlo completamente circular:
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)
Para convertirlo en un círculo en los puntos 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"),
),
o
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ...
)
Navod Dinidu
Puedes usar así. Si desea un borde para todas las esquinas, puede usar como se muestra a continuación.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
),
Si desea bordes redondeados solo para los lados seleccionados, puede usar como se muestra a continuación.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Text('Text'),
),
adam shelby
Puedes usar ClipRRect
Widget:
ClipRRect (
borderRadius: BorderRadius.circular(5.0),
child: Container(
height: 25,
width: 40,
color: const Color(0xffF8742C),
child: Align(
alignment: Alignment.center,
child: Text("Withdraw"))),
)
hsul4n
Mejora para la respuesta anterior.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
),
child: ...
)
-
No publique solo el código como respuesta, sino que también brinde una explicación de lo que hace su código y cómo resuelve el problema de la pregunta. Las respuestas con una explicación suelen ser más útiles y de mejor calidad, y es más probable que atraigan votos a favor.
– Mark Rotteveel
10 de agosto de 2020 a las 6:22
-
Lo siento, echo de menos eso.
– hsul4n
11 de agosto de 2020 a las 9:47
Se puede hacer de muchas maneras diferentes.
- Si tiene una esquina redondeada simple para implementar, use
ClipRRect
,
ClipOval
- Si desea tener más control sobre las esquinas redondeadas, use
BoxDecoration
dentro deContainer
ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(height: 100, width: 100, color: Colors.orange)),
ClipOval
ClipOval(
child: Container(height: 100, width: 100, color: Colors.orange)),
CajaDecoración
-
Frontera en todas las esquinas
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.orange),
height: 100,
width: 100,
);
-
Borde en una esquina particular
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
bottomRight: Radius.circular(40)),
color: Colors.orange),
height: 100,
width: 100,
),
-
Frontera en un eje particular
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.horizontal(
right: Radius.circular(60),
),
color: Colors.orange),
height: 100,
width: 100,
);
-
No publique solo el código como respuesta, sino que también brinde una explicación de lo que hace su código y cómo resuelve el problema de la pregunta. Las respuestas con una explicación suelen ser más útiles y de mejor calidad, y es más probable que atraigan votos a favor.
– Mark Rotteveel
10 de agosto de 2020 a las 6:22
-
Lo siento, echo de menos eso.
– hsul4n
11 de agosto de 2020 a las 9:47
Hanisha
Para hacer un círculo completo, simplemente use la propiedad de forma:
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Icon(
Icons.add,
size: 15.0,
color: Colors.white,
),