[Flutter] ElevatedButton 색상 바꾸기

ElevatedButton은 플러터 내에서 입체적인 폼을 가진 버튼입니다.

 

색상을 바꾸는 방법은 ButtonStyle 객체에 각종 Color 파라미터를 넘겨주어 색상을 변경합니다.

 

backgroundColor : 버튼의 기본 색상
overlayColor : 버튼 선택 시 표현할 색상
shadowColor : 버튼 선택 시 표현할 그림자 색상

 

MaterialStateProperty.all(Colors."사용할 컬러") : 전달할 컬러 객체

 

ElevatedButton(
          onPressed: () {
            print('버튼 선택 됨');
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all<Color>(Colors.green), //기본 색상
            overlayColor: MaterialStateProperty.all<Color>(Colors.lightGreen), //선택 시 표현할 색상
            shadowColor: MaterialStateProperty.all<Color>(Colors.cyan), //선택 시 표현할 그림자 색상
          ),
          child: Container(
            width: 150,
            height: 50,
            child: Row(
              children: [
                Icon(Icons.add_circle),
                SizedBox(width: 5),
                Text('새 게시물 추가')
              ],
            ),
          ),
        )