Agregar borde a un contenedor con borderRadius en Flutter

Siéntete libre de divulgar nuestro espacio y códigos con tus amigos, necesitamos de tu ayuda para aumentar esta comunidad.

Solución:

No es posible agregar border: y borderRadius: al mismo tiempo, obtendrá este error:

Sólo se puede dar borderRadius para bordes uniformes.

Puedes lograr lo que quieras usando borderRadius: y boxShadow: en lugar de border: así:

boxShadow: [
  BoxShadow(color: Colors.green, spreadRadius: 3)
]

Su código de muestra sería así:

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

---

Editar: Para lograr el ejemplo que ahora proporcionó, podría hacer esto:

Container(
  padding: EdgeInsets.only(left: 12.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  height: 50,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0)),
      color: Colors.white,
    ),
    child: Text(
      'This is a Container',
      textScaleFactor: 2,
      style: TextStyle(color: Colors.black),
    ),
  ),
),

Otra solución:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.white,
  ),
  height: 50,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        width: 12.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)),
          color: Colors.green,
        ),
      ),
      Text(
        'This is a Container',
        textScaleFactor: 2,
        style: TextStyle(color: Colors.black),
      )
    ],
  ),
),

Hay un par de formas de agregar un borde a un widget de Flutter. La forma más básica es envolver su widget en un DecoratedBox. sin embargo, el Container widget también tiene un DecoratedBox incorporado

Para una salida como la anterior, use un Stack en vez de Row porque Stack nos permite hacer que múltiples widgets se superpongan entre sí y puede alinear o posicionar su widget usando el Align o Positioned artilugio.

 Container(
  height: 65,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.deepPurple.shade100,
  ),
  child: Stack(
    children: [
      Container(
        width: 8,

        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15),
              bottomLeft: Radius.circular(15)),
          color: Colors.deepPurple,
        ),
      )
    ],
  ),
)

Si te animas, puedes dejar un ensayo acerca de qué le añadirías a este artículo.

---

---

Utiliza Nuestro Buscador