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

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

Puede agregar el TextFieldas childa un Containerque tiene una propiedad BoxDecorationwith border:

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Aquí hay una respuesta ampliada. A DecoratedBoxes lo que necesita para agregar un borde, pero estoy usando un Containerpara la comodidad 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 el BoxDecorationes

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

Ancho del borde

Estos tienen una anchura 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 de la frontera

Estos tienen un borde lateral de

• izquierda (3.0), arriba (3.0)
• inferior (13.0)
• izquierda (azul [100], 15.0), superior (azul [300], 10.0), derecha (azul [500], 5.0), inferior (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 de borde

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

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

Continuando

DecoratedBox/ BoxDecorationson muy flexibles Lea Flutter - BoxDecoration Cheat Sheet para muchas más ideas.

Como se indica en la documentación, el aleteo prefiere la composición sobre los parámetros. La mayoría de las veces lo que está buscando no es una propiedad, sino un contenedor (y, a veces, algunos ayudantes / "constructores")

Para las fronteras lo que quieres es DecoratedBox, que tiene undecoration propiedad que define los bordes; pero también imágenes de fondo o sombras.

Alternativamente, como dijo @Aziza, puede usar Container. Cuál es la combinación de DecoratedBox, SizedBoxy algunos otros widgets útiles.

La mejor manera es usar BoxDecoration ()

Ventaja

• Puedes configurar el borde del widget
• Puede establecer el color o el ancho del borde
• Puede configurar la esquina redondeada del borde
• Puedes agregar Shadow of widget

Desventaja

• BoxDecorationsolo use con Containerwidget para que desee 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"),
    )

Usar BoxDecoration () es la mejor manera de mostrar el borde.

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

También puedes ver el formato completo aquí

Puede usar Contenedor para contener su widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Use un recipiente con Boxdercoration.

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );