[flutter] FlatButton의 모양과 디자인을 커스터마이징하는 방법은?

26 Dec 2023

flutter

아래는 FlatButton을 커스터마이징하는 방법입니다:

색상 변경

FlatButton(
  color: Colors.blue, // 버튼의 배경색을 파란색으로 변경
  textColor: Colors.white, // 버튼의 텍스트 색상을 흰색으로 변경
  child: Text('Custom Button'),
  onPressed: () {},
)

모서리 둥글게 만들기

FlatButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0)), // 버튼의 모서리를 둥글게 만듦
  child: Text('Custom Button'),
  onPressed: () {},
)

그림자 효과 추가

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  onPressed: () {},
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    child: Text('Custom Button'),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5), // 그림자 색 및 투명도 조정
          spreadRadius: 5,
          blurRadius: 7,
          offset: Offset(0, 3), // 그림자 위치 조정
        ),
      ],
    ),
  ),
)

위와 같이 FlatButton의 쉬운 커스터마이징을 통해 원하는 디자인을 만들 수 있습니다. 또한, ElevatedButton 또는 TextButton과 같은 다른 버튼 위젯도 비슷한 방법으로 커스터마이징할 수 있습니다.