[Flutter] 버튼 Radius 주는 방법은 Style 로!!!

여러가지 버튼 위젯으로 BorderRadius(테두리) 를 변경하는 방법을 설명하고자 한다. 설명에는 ElevatedButton, TextButton, OutlinedButton 을 활용한 변경과 기본적인 Container 를 사용한 방법을 소개한다.

1. ElevatedButton 테두리 변경하기

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 동작
  },
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ),
  ),
  child: Text("Rounded Button"),
)

1.1 ElevatedButton 에서 Material 3 스타일로 테두리 변경하기

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 동작
  },
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
    ),
  ),
  child: Text("M3 Rounded Button"),
)

 

2. TextButton 테두리 변경하기

TextButton(
  onPressed: () {
    // 버튼 클릭 시 동작
  },
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text("Rounded Text Button"),
)

 

3. OutlinedButton 테두리 변경하기

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 동작
  },
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text("Rounded Outlined Button"),
)

 

4. 기본적인 Container로 버튼을 만들고 테두리 변경하는 방법

GestureDetector(
  onTap: () {
    // 버튼 클릭 시 동작
  },
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    child: Text(
      "Custom Button",
      style: TextStyle(color: Colors.white),
    ),
  ),
)