Flutter에서 위젯에 테두리를 어떻게 추가하나요?

Flutter에서 위젯에 테두리를 어떻게 추가하나요?

---

Flutter를 사용하고 있으며 위젯 (이 경우에는 Text 위젯)에 테두리를 추가하고 싶습니다.

TextStyle과 Text를 시도했지만 테두리를 추가하는 방법을 보지 못했습니다.

---

당신은 추가 할 수 있습니다 TextFieldA와를 childA와 Container가 그 BoxDecoration와 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"),
)

---

다음은 확장 된 답변입니다. A DecoratedBox는 테두리를 추가하는 데 필요한 것이지만 Container여백과 패딩을 추가하는 편의를 위해를 사용하고 있습니다.

다음은 일반적인 설정입니다.

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

곳이 BoxDecoration있습니다

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

테두리 너비

이들의 테두리 너비가 1, 3그리고 10각각을.

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

테두리 색상

테두리 색상은

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

암호

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

국경면

이것들은 국경면이 있습니다

• 왼쪽 (3.0), 위쪽 (3.0)
• 하단 (13.0)
• left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)

Code

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

Border radius

These have border radii of 5, 10, and 30 respectively.

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

Going on

DecoratedBox/BoxDecoration are very flexible. Read Flutter — BoxDecoration Cheat Sheet for many more ideas.

---

As stated in the documentation, flutter prefer composition over parameters. Most of the time what you're looking for is not a property, but instead a wrapper (and sometimes a few helpers/"builder")

For borders what you want is DecoratedBox, which has a decoration property that defines borders ; but also background images or shadows.

Alternatively like @Aziza said, you can use Container. Which is the combination of DecoratedBox, SizedBox and a few other useful widgets.

참고 URL : https://stackoverflow.com/questions/47423297/how-do-i-add-a-border-to-a-widget-in-flutter