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

Lo intenté TextStyle y Textpero no vi cómo agregar un borde.

Puedes agregar el Text como un child a un Container que tiene un BoxDecoration con border propiedad:

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 DecoratedBox es lo que necesitas para agregar un borde, pero estoy usando un Container por 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 el BoxDecoration es

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

Ancho del borde

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

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 del borde

Estos tienen un borde lateral de

• izquierda (3.0), arriba (3.0)
• abajo (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 del borde

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

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

pasando

DecoratedBox/BoxDecoration son muy flexibles. Leer Flutter — Hoja de referencia de BoxDecoration para muchas más ideas.

La mejor manera es usando BoxDecoration()

Ventaja

• Puede configurar el borde de un widget
• Puede establecer el borde Color o Ancho
• Puede establecer un Esquina redondeada de una frontera
• Puedes agregar un Sombra de un widget

Desventaja

• BoxDecoration usar solo con Container widget, por lo que desea envolver su widget en Container()

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"),
    )

Puede envolver el widget con DecoratedBox que proporciona decoración:

Widget textDecoration(String text){
    return DecoratedBox(
        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.red,
                width: 10,
            ),
        ),
        child: Text(text)
    );
}

Como se indica en la documentación, Flutter prefiere la composición a los parámetros.

La mayoría de las veces no está buscando una propiedad, sino un envoltorio (y, a veces, algunos ayudantes/”constructores”).

Para las fronteras, quieres DecoratedBoxque tiene un decoration propiedad que define fronteras; pero también imágenes de fondo o sombras.

Alternativamente, como dijo Aziza, puedes usar Container. cual es la combinacion de DecoratedBox, SizedBox y algunos otros widgets útiles.

Aquí, como el Texto widget no tiene una propiedad que nos permita definir un border, deberíamos envolverlo con un widget que nos permita definir un borde. Hay varias soluciones. Pero la mejor solución es el uso de CajaDecoración en el Envase artilugio.

¿Por qué elegir utilizar BoxDecoration?

Porque BoxDecoration ofrece más personalización como la posibilidad de definir:

Primero el border y también definir:

• color del borde
• ancho del borde
• radio del borde
• forma
• y más …

Un ejemplo:

   Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

Producción:

Resumen

He tratado de resumir todas las posibilidades importantes al usar border en BoxDecoration.

Resultados de las fronteras explicadas a continuación:

Explicación

Básico

  Container(
    decoration: BoxDecoration(border: Border.all()),
    child: const Text("Text"),
 ),    

BorderColor, ancho y trazoAlign

Container(
   decoration: BoxDecoration(
   border: Border.all(
       width: 4,
       color: Colors.green,
       strokeAlign: BorderSide.strokeAlignCenter)),
   child: const Text("Text"),
),

Borde solo en un lado específico

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            decoration: const BoxDecoration(
                border: Border(top: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(
                    top: BorderSide(width: 2),
                    bottom: BorderSide(width: 4))),
            child: const Text("Text"),
          ),
        ],
      ),

Diferentes formas

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                shape: BoxShape.circle),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(),
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text("Text"),
          ),
        ],
      ),

Radio de borde curvo

    Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.horizontal(
                    left: Radius.circular(5), right: Radius.circular(20))
                ),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomRight: Radius.circular(20))),
            child: const Text("Text"),
          ),
        ],
      ),