[flutter] FlatButton의 색상과 배경을 변경하는 방법은?

26 Dec 2023

flutter

1. 버튼 위젯에 직접 스타일 적용

당신은 FlatButton 위젯의 color 속성을 사용하여 버튼의 색상을 변경할 수 있습니다. 또한, splashColor 속성은 버튼을 누를 때 나타나는 색상을 설정합니다.

예를 들어:

FlatButton(
  color: Colors.blue, // 버튼의 배경색을 파란색으로 설정
  splashColor: Colors.red, // 버튼을 누를 때 나타나는 색상을 빨간색으로 설정
  onPressed: () {
    // 버튼이 눌렸을 때 수행할 작업
  },
  child: Text('버튼'),
)

2. 버튼을 감싸는 색상 변경

FlatButton을 감싸는 Container 위젯을 사용하여 버튼의 배경을 변경할 수도 있습니다.

예를 들어:

Container(
  decoration: BoxDecoration(
    color: Colors.blue, // 버튼의 배경색을 파란색으로 설정
  ),
  child: FlatButton(
    onPressed: () {
      // 버튼이 눌렸을 때 수행할 작업
    },
    child: Text('버튼'),
  ),
)

양식에 따라 이 두가지 방법 중 하나를 선택하여 적절한 색상과 배경을 설정할 수 있습니다.