How can I add a border to a widget in Flutter

Question

I'm using Flutter and I'd like to add a border to a widget (in this case, a Text widget).

I tried TextStyle and Text, but I didn't see how to add a border.

Answer 1

To add a border to a widget in Flutter, you can wrap it with a Container widget and set its decoration property to a BoxDecoration with the desired border settings.

Here's an example of how to add a border to a Text widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Hello, World!',
    style: TextStyle(fontSize: 24),
  ),
),

In this example, we wrapped the Text widget with a Container widget and set its decoration property to a BoxDecoration with a black border of width 2, and a border radius of 10. You can adjust these values to suit your needs.

Note that you can also use other types of borders, such as BorderDirectional, and you can set different border properties such as dashPattern, style, and side.

To know more about Flutter, join our Best Flutter Course today.