플러터 위젯에서 Border 혹은 Outline 지정

위젯에 보더를 지정하는 몇가지 방법이 있습니다. 가장 기본적인 방법으로는 DecoratedBox 를 위젯에 씌워서 사용하는 것이죠. 하지만 Container를 사용한다면 decoration속성을 사용하는 것입니다. 

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
       border: Border.all( 
         width: 1,
         color: Colors.orange, 
      ),
    ), //  POINT: BoxDecoration
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

decoration속성에 BoxDecoration생성자를 통해서 border속성을 지정해 줄 수 있습니다.

왼쪽 오른쪽 등 특정 위치에만 보더를 넣으려면 다음과 같이 BorderSide를 사용하는 것입니다. 

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( // POINT
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( // POINT
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

둥근 코너를 넣으려면 borderRadius를 사용합니다.

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

다음 참조된 링크에서 다양한 사용 사례를 확인할 수 있습니다. 

Ref. https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20