[Flutter] Container - decoration

Container의 decoration 속성중에 많이 사용하는 속성들을 살펴보겠습니다.

UI 디자인을 위해 가장 많이 사용되는 내용들입니다.

 

1) Container의 색상 또는 border 의 색상변경(border)

2) 모서리를 둥글게 변경(borderRadius)

 

child: Row(
  children: [
    Container(
        margin: const EdgeInsets.fromLTRB(15, 0, 10, 0), // 왼쪽과 오른쪽 15, 10 margin
        padding: const EdgeInsets.all(10), // left, right, top, bottom 10 margin
        child: const Text('SAMSUNG', style: TextStyle(fontSize: 20),),
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(
              color: Colors.blue),
        ),
    ),
    Container(
        margin: const EdgeInsets.only(left: 10), // 왼쪽으로 10 margin
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), // 가로 10, 세로 10 margin
        child: const Text('GALAXY S22', style: TextStyle(fontSize: 20),),
        decoration: const BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
    )
  ],
)

 

실제 배포용 앱을 만든다면 자주 사용할 코드들이므로 잘 정리해두고 사용하셔야 할 코드입니다.