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 Text
pero no vi cómo agregar un borde.
Shady Aziza
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
, 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 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
, 10
y 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 deBorderRadius.all(Radius.circular(5.0))
.-Son Nguyen
25 de agosto de 2021 a las 13:45
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 conContainer
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"),
)
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)
);
}
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 DecoratedBox
que 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.
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:
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"),
),
],
),