ButtonStyle과 styleFrom (+MaterialStateProperty)

1. ButtonStyle:

• ButtonStyle은 버튼 위젯의 스타일을 정의하는 데 사용되는 클래스입니다. 버튼의 배경색, 텍스트 색상, 패딩, 그림자 등 다양한 스타일 속성을 설정할 수 있습니다. 예를 들어, ButtonStyle을 사용하여 모든 상태에서 버튼의 배경색을 빨간색으로 설정하거나 특정 상태에서만 다른 스타일을 적용할 수 있습니다.

2. styleFrom 함수:

• ElevatedButton.styleFrom 같은 함수를 사용해 간단하게 버튼 스타일을 정의할 수 있습니다. 이 함수는 ButtonStyle을 반환하며, 복잡한 스타일 정의를 단순화해줍니다.

3. ButtonStyle과 styleFrom의 차이점

styleFrom과 ButtonStyle의 차이점은 다음 표와 같습니다:

항목	ButtonStyle	styleFrom
정의 방법	버튼 스타일을 세밀하게 정의하기 위한 클래스	ButtonStyle을 쉽게 생성하기 위한 헬퍼 함수
유연성	매우 유연하며, 모든 스타일 속성을 설정할 수 있음	일반적인 스타일 속성을 간편하게 설정
상태별 스타일	상태별로 다양한 스타일을 설정할 수 있음 (MaterialStateProperty 사용)	내부적으로 ButtonStyle 반환, 상태별 스타일 설정 제한
사용 사례	복잡하고 구체적인 스타일 적용이 필요할 때	간단한 버튼 스타일을 빠르게 설정하고자 할 때

• ButtonStyle 사용 예시:

  TextButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
      foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.blue;
        }
        return Colors.white;
      }),
    ),
    onPressed: () {},
    child: Text('ButtonStyle Example'),
  );

• styleFrom 사용 예시:

  TextButton(
    style: TextButton.styleFrom(
      //primary는 버튼의 기본 색상을 의미
      primary: Colors.red,
      padding: EdgeInsets.all(16.0),
    ),
    onPressed: () {},
    child: Text('styleFrom Example'),
  );

4. MaterialStateProperty:

버튼 스타일에 특정 상태 (e.g., 눌림, 포커스, 비활성화 등)를 적용할 때 MaterialStateProperty를 사용합니다. MaterialStateProperty의 정의는 다음과 같습니다:

MaterialStateProperty는 기본적인 구조를 가진 클래스(추상 클래스)이며, 버튼의 상태(예: 눌림, 포커스 등)에 따라 적절한 스타일 값을 반환하는 resolve 메서드를 제공합니다.

(resolve 메서드를 제공한다는 것은 MaterialStateProperty 클래스가 버튼의 다양한 상태에 맞춰 적절한 값을 반환하는 기능을 가지고 있다는 의미)

• 상태 예시로:

  • hovered (마우스 호버): 마우스 커서가 위에 있을 때의 상태.
  • focused (포커스 상태): 위젯이 포커스를 받을 때의 상태, 예를 들어 텍스트 필드가 선택된 경우.
  • pressed (눌린 상태): 버튼이 눌렸을 때의 상태.
  • disabled (비활성화 상태): 버튼이 비활성화되어 있을 때의 상태.
  • dragged (드래그된 상태): 위젯이 드래그될 때의 상태.
  • selected (선택된 상태): 체크박스나 라디오 버튼 등이 선택된 상태.
  • scrollUnder (스크롤 언더 상태): 다른 컴포넌트 아래로 스크롤될 때의 상태.
  • error (에러 상태): 위젯에 오류가 있을 때의 상태.

5. MaterialStateProperty.all():

MaterialStateProperty.all()을 사용해 어떤 상태에서든 특정 스타일을 적용할 수 있습니다.

예를 들어, 모든 상태에서 버튼의 배경색을 빨간색으로 설정할 수 있습니다.

6. MaterialStateProperty.resolvewith():

• MaterialStateProperty.resolveWith:
  MaterialStateProperty.resolveWith 메서드를 사용해 상태에 따른 스타일을 설정할 수 있습니다. 이 메서드는 콜백 함수로 버튼의 상태(pressed, hovered 등)를 받아서, 그 상태에 맞는 스타일 값을 반환합니다.
  예를 들어, 버튼이 눌린 상태일 때 배경색을 빨간색으로, 기본 상태일 때는 검정색으로 설정할 수 있습니다.

• 스타일링의 유연성:
  상태별로 스타일을 설정하는 것은 매우 유연한 방식이지만, 모든 경우에 항상 콜백 함수를 사용하는 것은 번거로울 수 있습니다. 따라서, 간단한 스타일 적용을 위해 MaterialStateProperty.all이나 styleFrom 함수를 사용하는 방법도 설명했습니다.

• 항목	MaterialStateProperty.resolveWith()	MaterialStateProperty.all()
  목적	상태별로 다른 스타일 값을 동적으로 설정하기 위함	모든 상태에 동일한 스타일을 적용하기 위함
  유연성	각 상태에 맞는 스타일을 반환하기 위해 콜백 함수 사용	특정 상태 구분 없이 단일 스타일 값을 설정
  사용 방식	콜백 함수로 상태를 받아 그에 맞는 스타일 값을 반환	단일 값을 모든 상태에 적용
  사용 사례	버튼이 눌렸을 때 색상을 변경하거나, 포커스 상태일 때 다르게 설정할 때	단순히 모든 상태에서 버튼 배경색을 일관되게 설정할 때

• MaterialStateProperty.all() 사용 예시:

  TextButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
    ),
    onPressed: () {},
    child: Text('MaterialStateProperty.all() Example'),
  );

• MaterialStateProperty.resolveWith() 사용 예시:

  TextButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
        (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.blue;
        } else if (states.contains(MaterialState.hovered)) {
          return Colors.green;
        } else if (states.contains(MaterialState.disabled)) {
          return Colors.grey;
        }
        return Colors.red;
      }),
    ),
    onPressed: () {},
    child: Text('MaterialStateProperty.resolveWith() Example'),
  );

• 사용 예시 코드 설명

  • Set 타입:
    Set은 중복되지 않는 값을 저장하는 컬렉션입니다.

     // Set 생성
    
     Set<int> numberSet = {1, 2, 3, 4};
    
     // 요소 추가
    
     numberSet.add(5);
    
     print(numberSet); // 출력: {1, 2, 3, 4, 5}

  • MaterialState 타입:
    MaterialState는 Flutter의 Material 디자인 시스템에서 위젯의 다양한 상태를 나타내는 열거형(Enum)입니다. MaterialState는 다음과 같은 상태를 포함합니다.

    pressed: 버튼이 눌린 상태.
    hovered: 마우스 커서가 버튼 위에 있을 때.
    focused: 위젯이 포커스를 받았을 때.
    disabled: 버튼이 비활성화되어 사용 불가능한 상태

    중요) flutter 프레임 워크가 사용자의 행동을 실시간으로 파악해서 Set<MaterialState>에 담아둡니다.

    Set<MaterialState> 역할:

    Set<MaterialState>는 여러 MaterialState 값을 포함할 수 있는 데이터 구조입니다 예를 들어 다음과 같은 상태값들을 저장합니다.

    MaterialState.pressed: 버튼이 눌렸을 때의 상태.
    MaterialState.hovered: 마우스 커서가 버튼 위에 있을 때의 상태.

    if (states.contains(MaterialState.pressed)) 부분 설명

    Flutter에서 버튼의 상태가 특정 상태(pressed)인지를 확인하는 조건문입니다.

    states.contains()
    contains() 메서드는 Set 안에 특정 값이 있는지 확인하는 역할을 합니다. 이 코드에서는 states에 MaterialState.pressed가 포함되어 있는지를 확인합니다. 만약 포함되어 있다면 버튼이 현재 눌린 상태라는 의미입니다.

    MaterialState.pressed
    MaterialState 열거형의 pressed라는 상태를 호출하는 것입니다. .을 사용하여 MaterialState 안에 정의된 상태(pressed, hovered, focused, disabled 등)를 쉽게 참조할 수 있습니다.

\