Flutter dar contenedor borde redondeado

3 minutos de lectura

Avatar de usuario de Karel Debedts
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?

Avatar de usuario de Evaldo Bratti
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 de BorderRadius.all(Radius.circular(20))

    – Exfridos

    26 de marzo de 2021 a las 14:23


Avatar de usuario de SR Keshav
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: ...
    )

Avatar de usuario de NavodDinidu
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'),
),

Avatar de usuario de Adam Shelby
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"))),
          )

avatar de usuario de hsul4n
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 de Container

ClipRRect

ingrese la descripción de la imagen aquí

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Container(height: 100, width: 100, color: Colors.orange)),

ClipOval

ingrese la descripción de la imagen aquí

ClipOval(
    child: Container(height: 100, width: 100, color: Colors.orange)),

CajaDecoración

  • Frontera en todas las esquinas

ingrese la descripción de la imagen aquí

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );
  • Borde en una esquina particular

ingrese la descripción de la imagen aquí

 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

ingrese la descripción de la imagen aquí

  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

Avatar de usuario de Hanisha
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,
     ),
                               
                                

Aquí está la imagen

¿Ha sido útil esta solución?