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

5 minutos de lectura

Avatar de usuario de Seth Ladd
Seth Ladd

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.

Avatar de usuario de Shady Aziza
Shady Aziza

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

ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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.

  • ¿Alguien sabe cómo usar BorderSide con BorderRadius?

    – HaSnen Tai

    8 de febrero de 2020 a las 15:42

  • @HaSnenTai ¿Encontraste alguna solución? En mi diseño, necesito dar un borde inferior con forma de píldora. ¿Cómo puedo conseguir esto?

    – Roberto Williams

    12 de abril de 2020 a las 13:03

  • @RobertWilliams, usaría un widget de dibujo personalizado.

    – Suragch

    12 de abril de 2020 a las 13:27

  • @Suragch El widget es Texto que necesita un borde fuerte (en forma de píldora). El ancho del widget de texto no es fijo. Para usar el widget de dibujo personalizado, ¿no tendré que proporcionar propiedades de reparación?

    – Roberto Williams

    14 de abril de 2020 a las 17:31

  • U también puede usar la abreviatura BorderRadius.circular(8) en lugar de BorderRadius.all(Radius.circular(5.0)).

    -Son Nguyen

    25 de agosto de 2021 a las 13:45

Avatar de usuario de Sanjayrajsinh
Sanjayrajsinh

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

Ingrese la descripción de la imagen aquí

Avatar de usuario de Abdullah Waheed
Abdullah Waheed

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

Avatar de usuario de Rémi Rousselet
Rémi Rousselet

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.

Avatar de usuario de Peter Mortensen
Pedro Mortensen

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:

Ingrese la descripción de la imagen aquí

Resumen

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

Resultados de las fronteras explicadas a continuación:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí


Explicación

Básico

ingrese la descripción de la imagen aquí

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

BorderColor, ancho y trazoAlign

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

      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

ingrese la descripción de la imagen aquí

      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

ingrese la descripción de la imagen aquí

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

¿Ha sido útil esta solución?