Flutter Button Style 지정하기

대표적인 버튼 3가지
1. ElevatedButton

• 그림자가 있는 입체적인 버튼

스타일 지정

ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                // 메인 컬러
                // primary: Colors.red, // Deprecated
                // 텍스트색상, ripple컬러
                foregroundColor: Colors.redAccent,
                // 버튼 배경 색
                backgroundColor: Colors.greenAccent,
                // 그림자 컬러
                shadowColor: Colors.greenAccent,
                elevation: 10.0,
                textStyle:
                    TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
                // 글자 주변에 적용
                padding: EdgeInsets.all(32.0),
                // 테두리 설정
                side: BorderSide(color: Colors.black, width: 4.0,
                // 라운드 처리
               shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30)
                ),
             ),
           ),
          child: Text('ElevatedButton'),
          ),

2. OutlinedButton

• 테두리가있는 버튼

OutlinedButton(
              onPressed: () {},
              style: OutlinedButton.styleFrom(
                foregroundColor: Colors.greenAccent,
                // backgroundColor: Colors.indigo
              ),
              child: Text('OutlinedButton'),
            ),

3. TextButton

• 평범한 버튼

TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(foregroundColor: Colors.greenAccent),
              child: Text('TextButton'),
            ),

버튼 스타일 지정 시
style : 버튼위젯.styleFrom() 해서 사용하는 것이 유지보수관점에서 좋다.

styleFrom

• 해당 파라미터들을 결국 MaterialStatePropery에 대입해서 ButtonStyle에 대입해서 return해줌
• 따라서, ButtonStyle을 통해 직접적으로 스타일을 지정해줄 수 있다.

ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.greenAccent),
                foregroundColor: MaterialStateProperty.resolveWith(
                    (Set<MaterialState> states) {
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.white;
                  }

                  return Colors.redAccent;
                }),
                padding: MaterialStateProperty.resolveWith(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed)) {
                      return EdgeInsets.all(100.0);
                    }

                    return EdgeInsets.all(20.0);
                  },
                ),
              ),
              child: Text('ButtonStyle'),
            ),

MaterialStateProperty는 all과 resolveWith가 있다.
all

• 해당 상태값을 유지하는 것

resolveWith

• 해당 속성에 따라 (MaterialState) 파라미터 값을 줄 수 있음.

Material State

hovered - 호버링 상태 (마우스 커서를 올려놓은 상태)
focused - 포커스 상태 (텍스트 필드)
pressed - 눌렸을 때
dragged - 드래그
selected - 선택됬을 때 (체크박스, 라디오 버튼)
scrollUnder - 다른 컴포넌트 밑으로 스크롤링 됐을때
disabled - 비활성화 됐을 때 (onPressed가 null일 때 - 버튼 비활성화)
error - 에러상태

foregroundColor: MaterialStateProperty.resolveWith(
                    (Set<MaterialState> states) {
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.white;
                  }

                  return Colors.redAccent;
                }),

해당코드의 경우 버튼 클릭 시(pressed) 색상이 바뀌는 코드

padding: MaterialStateProperty.resolveWith(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed)) {
                      return EdgeInsets.all(100.0);
                    }

                    return EdgeInsets.all(20.0);
                  },
                ),
              ),

해당코드 역시 버튼 클릭 시(pressed) padding값이 바뀌는 코드

이와 같이 조건에 따라 값을 다르게 주어 다이나믹한 스타일을 지정해줄 수 있다.