[flutter] FlatButton의 크기와 모양을 조절하는 방법은?

26 Dec 2023

flutter

Flutter에서 FlatButton의 크기와 모양을 조절하는 방법은 다양합니다. 여러가지 방법 중에서 가장 일반적인 방법은 FlatButton 위젯을 Container나 SizedBox로 감싸거나, padding 속성을 이용하여 크기를 조절하는 것입니다.

1. Container로 감싸기

Container(
  width: 150,
  height: 50,
  child: FlatButton(
    onPressed: () {},
    child: Text('버튼'),
  ),
)

2. SizedBox 이용하기

SizedBox(
  width: 150,
  height: 50,
  child: FlatButton(
    onPressed: () {},
    child: Text('버튼'),
  ),
)

3. padding 속성 이용하기

FlatButton(
  onPressed: () {},
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  child: Text('버튼'),
)

4. 모양을 변경하는 속성

또한 FlatButton의 모양을 변경하기 위해 다양한 속성을 사용할 수 있습니다. 예를 들면, color, highlightColor, shape, borderRadius 등이 있습니다.

모양을 변경하는 예시:

FlatButton(
  onPressed: () {},
  color: Colors.blue,
  highlightColor: Colors.lightBlue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
    side: BorderSide(color: Colors.black),
  ),
  child: Text('버튼'),
)

FlatButton의 크기와 모양을 조절하는 다양한 방법을 통해 UI 디자인을 원하는 대로 구현할 수 있습니다.

참고 자료

Flutter FlatButton 공식 문서: https://api.flutter.dev/flutter/material/FlatButton-class.html
Flutter Container 공식 문서: https://api.flutter.dev/flutter/widgets/Container-class.html
Flutter SizedBox 공식 문서: https://api.flutter.dev/flutter/widgets/SizedBox-class.html