¿Cómo puedo agregar un borde a un widget en Flutter?

Estoy usando Flutter y me gustaría agregar un borde a un widget (en este caso, un Textwidget).

Intenté TextStyley Text, pero no vi cómo agregar un borde.

Jan 01 '70 08:01 Seth Ladd

Aquí hay una respuesta ampliada. A DecoratedBoxes lo que necesita para agregar un borde, pero estoy usando a Containerpara la conveniencia de agregar margen y relleno.

Aquí está la configuración general.

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),
    ),
  );
}

donde BoxDecorationesta

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

Ancho del borde

Estos tienen un ancho de borde de 1, 3y 10respectivamente.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

Color del borde

Estos tienen un color de borde de

• Colors.red
• Colors.blue
• Colors.green

Código

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

Lado fronterizo

Estos tienen un lado fronterizo de

• izquierda (3.0), arriba (3.0)
• abajo (13.0)
• izquierda (azul[100], 15.0), arriba (azul[300], 10.0), derecha (azul[500], 5.0), abajo (azul[800], 3.0)

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,
      ),
    ),
  );
}

Radio del borde

Estos tienen radios de borde de 5, 10y 30respectivamente.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

Continuando

DecoratedBoxSoy BoxDecorationmuy flexible. Lea Flutter - Hoja de referencia de BoxDecoration para obtener muchas más ideas.

Dec 08 '2018 06:12 Suragch

La mejor manera es usar BoxDecoration()

Ventaja

• Puedes configurar el borde de un widget.
• Puede establecer el color o el ancho del borde.
• Puede establecer una esquina redondeada de un borde
• Puedes agregar una sombra de un widget.

Desventaja

• BoxDecorationÚselo solo con Containerel widget, por lo que desea envolver su widget enContainer()

Ejemplo

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800], // Set border color
            width: 3.0),   // Set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // Set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

Dec 03 '2019 09:12 Sanjayrajsinh