[Flutter] Container Radius 넣는 방법

오늘은 Container에 Radius를 넣고 예쁘게 만드는 소스를 정리해봅니다. 
예시 이미지는 아래와 같습니다. 

위와 같이 예쁜 모양의 틀을 한번 만든 소스를 공유해드릴께요. 

Widget build(BuildContext context) {
    //screen width 를 아래와 같이 가져오는 것.
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('테스트'),
      ),
      body:  SafeArea(
        child: SingleChildScrollView(
          child: Column(
          children: [
            Container(
              width: screenWidth ,
              height: 250,
              margin: const EdgeInsets.all(7.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                color: Colors.black
              ),
              child: Center(
                  child:
                  Text(
                    'Hello',
                    style: TextStyle(
                      color: Colors.white
                    ),
                  )
              ),
            ),

          ],
        )
        ),
      ),
    );
  }

일단 소스를 보시면 responsive ui를 위해서

final screenWidth = MediaQuery.of(context).size.width;

선언해서 접속하는 device의 width 를 가지고 왔습니다. 

Container(
  width: screenWidth ,
  height: 250,
  margin: const EdgeInsets.all(7.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    color: Colors.black
  ),
  child: Center(
      child:
      Text(
        'Hello',
        style: TextStyle(
          color: Colors.white
        ),
      )
  ),
)

Container내부의 decoration 속성을 이용한 BoxDecoration의 borderRadius속성을 이용하여 이쁘게 만들어 봤습니다. 
간단한것같지만 Flutter의 Widget을 겹겹이 사용해야하니 구현할려고 하면 이런 부분이 항상 막히는 것 같습니다. 

소스는 참고용으로 보여드렸구요. 
앞으로 이것과 관련된 앱이 만들어지면 다시 소스 공유해드릴께요 ^^