How to add border to widget in Flutter?

Question

I use Flutter, and I would like to add a border to the widget (in this case, to the text widget).

I tried TextStyle and Text, but I did not see how to add a border.

Answer 1

You can add TextFieldas childto Container, which has a property BoxDecorationwith a property border:

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

Answer 2

Here is an extended answer. DecoratedBox- this is what you need to add a border, but I use Containerfor the convenience of adding margins and indents.

Here is a general setup.

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

Where BoxDecoration

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

Frame width

They have a border width 1, 3and 10accordingly.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

Border color

They have a border color.

• Colors.red
• Colors.blue
• Colors.green

The code

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

• (3,0), (3,0)
• (13,0)
• ( [100], 15,0), ( [300], 10,0), ( [500], 5,0), ( [800], 3,0)

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

5, 10 30 .

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

DecoratedBox/ BoxDecoration . Flatter - BoxDecoration .

Answer 3

, . , , , ( / "" )

DecoratedBox, decoration, ; .

, @Aziza , Container. DecoratedBox, SizedBox .

Answer 4

How to get a beveled rectangle with borders?