dart - container - ¿Cómo agrego un borde a un widget, en Flutter?

flutter stack

Question

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.

Answer 1

Aquí hay una respuesta ampliada. Un DecoratedBox es lo que necesita para agregar un borde, pero estoy usando un Container para 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 está la BoxDecoration

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

Ancho del borde

Estos tienen un ancho de borde de 1 , 3 y 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 de la frontera

Estos tienen un borde lateral de

• izquierda (3.0), superior (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 borde de 5 , 10 y 30 respectivamente.

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

Continuando

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

Answer 2

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 algunas veces algunos ayudantes / "constructores")

Para los bordes, lo que desea es DecoratedBox , que tiene una propiedad de decoration 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 , SizedBox y algunos otros widgets útiles.

Answer 3

Puede agregar TextField como elemento child a un Container que tiene una BoxDecoration con propiedad de border :

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