[flutter] 버튼 눌림(클릭) 효과 주기 - 스타일 변경

플루터에서 버튼 스타일 및 눌림 효과 주는 방법

 

1. 버튼 스타일 변경

명칭은 다르지만 적용하는 속성의 명칭은 모두 동일합니다. 

 

1-1. ElevatedButton

ElevatedButton.styleFrom 사용

ElevatedButton(
  onPressed: () {},
  child: Text(
    "ElevatedButton",
  ),
  style: ElevatedButton.styleFrom(
    // 글자 및 에니메이션 색상
    foregroundColor: Colors.black,

    // 메인 칼라
    backgroundColor: Colors.red,
    //그림자 색상
    shadowColor: Colors.green,
    // 3d 입체감 효과
    elevation: 100,
    textStyle: TextStyle(
      fontWeight: FontWeight.w800,
      fontSize: 20,
    ),
    padding: EdgeInsets.all(10),
    side: BorderSide(
      color: Colors.black,
      width: 3,
    ),
  ),
),

1-2. OutlineButton

OutlinedButton.styleFrom

OutlinedButton(
  onPressed: () {},
  child: Text(
    "OutlineButton",
  ),
  style: OutlinedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.yellow,
    padding: EdgeInsets.all(30),
    side: BorderSide(
      color: Colors.black,
      width: 30,
    ),
  ),
),

1-3. TextButton

TextButton.styleFrom

 TextButton(
  onPressed: () {},
  child: Text(
    "TextButton",
  ),
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
  ),
),

 

2. 눌림 효과 주기

 

ButtonStyle => MaterialStateProperty.resolveWith

ElevatedButton(
      onPressed: () {},
      child: Text(
        "ElevatedButton",
      ),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(
          Colors.amber,
        ),
        foregroundColor: MaterialStateProperty.resolveWith(
          (states) {
            /*
            MaterialState
              hovered : 호버링 상태 (마우스 커서를 올려둠)
              focused : 포커스 되었을 때 (텍스트 필드)
              pressed : 눌렀을 때
              dragged : 드래그 했을 때
              selected : 선택 되었을 때 (라이도, 체크박스)
              disabled : 비활성화 되었을 때
              scrollUnder : 다른 컴포넌트 밑으로 스크롤링 되었을 때
              error : 에러 상태
          */
            print(states);
            if (states.contains(MaterialState.pressed)) {
              return Colors.red;
            }
            return Colors.black;
          },
        ),
        padding: MaterialStateProperty.resolveWith(
          (states) {
            if (states.contains(MaterialState.pressed)) {
              return EdgeInsets.all(100);
            }
            return EdgeInsets.all(5);
          },
        ),
      ),
    ),

 

 

 

잠시만! [Hey To Do]앱을 소개합니다. 

Hey To Do앱은 할일앱을 관리하는 심플한 앱입니다.

할일을 등록하면 등록한 [할일]을 [캘린더]와 [해시태그]로 분류하여 관리할 수 있습니다.

 

iOS, Android모두 다운로드 가능합니다.

 

현재 무료 다운로드 가능합니다 

꼭 한번 써보세요!

 

안드로이드 다운로드

https://play.google.com/store/apps/details?id=kr.co.heynow.todocalendar&pli=1

 

iOS 다운로드

https://apps.apple.com/us/app/hey-to-do-calendar-hashtag/id6475393572

 

 

 

iOS, Android모두 다운로드 가능합니다.

 

안드로이드 다운로드

https://play.google.com/store/apps/details?id=kr.co.heynow.todocalendar&pli=1

 

iOS 다운로드

https://apps.apple.com/us/app/hey-to-do-calendar-hashtag/id6475393572