버튼 위젯의 상태에 따라 구현하기 위한 기초 스터디

ButtonStyle class

Many of the ButtonStyle properties are MaterialStateProperty objects which resolve to different values depending on the button’s state. For example the Color properties are defined with MaterialStateProperty<Color> and can resolve to different colors depending on if the button is pressed, hovered, focused, disabled, etc.

버튼 스타일의 많은 속성은 버튼의 상태에 따라 다른 값을 결정하는 MaterialStateProperty 객체임. 예를 들어, Color 속성은 MaterialStateProperty<Color> 로 정의되고 버튼이 눌린 경우, 포커스된 경우, 호버된 경우, 비활성화된 경우 등에 따라 다른 색상으로 설정할 수 있음.

즉, 버튼은 사용자가 눌리거나, 눌리지 않는 등 상태에 따라 버튼이라는 객체의 속성이 달라지는 데 버튼의 이러한 속성은 MaterialStateProperty 객체로 불린다. 이러한 상태에 따라 버튼의 속성이 달라지도록 값을 설정하는 것을 “resolve” 라고 표현하고 있다.

여기서 잠깐! MaterialStateProperty<T> class 란?

Interface for classes that resolve to a value of type T based on a widget’s interactive “state”, which is defined as a set of MaterialStates.

위젯의 상호작용되는 “상태”에 따라 타입T  값로 해결되는 클래스를 위한 인터페이스로 MaterialState값의 집합으로 정의된다.

• Interface 의 개념을 알아보자.

  Interface란 클래스가 구현해야 하는 메서드와 속성을 정의하는 일종의 계약(contract)라고 생각할 수 있다. 인터페이스를 사용하여 특정 클래스가 반드시 구현해야 하는 기능을 정의하고, 이러한 인터페이스를 구현한 클래스는 그 인터페이스의 요구 사항을 충족해야 한다.

    // 인터페이스 정의
    abstract class Animal {
      void makeSound();
    }
    
    // Animal 인터페이스를 구현한 클래스
    class Dog implements Animal {
      @override
      void makeSound() {
        print('멍멍!');
      }
    }

위에서 볼 수 있듯이, Animal은 인터페이스로 정의되어 있고 `Dog` 라는 클래스는 이 인터페이스를 구현하고 있다.

머터리얼 상태 속성은 위젯의 머터리얼 “상태”에 따라 값이 달라지는 것을 나타낸다. 이 상태는 MaterialState값의 집합으로 인코딩되며, focused, hovered, pressed와 같은 값을 가리킨다. 예를 들어, InkWell.overlayColor는 눌렸을 때(”물결 효과 색상”) 등 inkWell 의 현재 상태에 따라 inkWell 의 색상을 계산하기 위해 오버레이 색상의 resolve 메서드를 사용한다.

ButtonStyle은 TextButton, ElevatedButton , OutlinedButton 등과 같은 버튼의 모양을 구성하는 데 사용되며, 많은 매터리얼 상태 속성을 가지고 있습니다. 버튼 위젯은 현재 매터리얼 상태를 추적하고, 필요한 경우 버튼 스타일의 매터리얼 상태 속성을 resolve 한다.

These properties can override the default value for just one state or all of them. For example to create a ElevatedButton whose background color is the color scheme’s primary color with 50% opacity, but only when the button is pressed, one could write:

이러한 속성들은 하나 또는 모든 상태에 대한 기본 값으로 재정의할 수 있다. 예를 들어, 버튼이 눌렸을 때만 버튼의 배경색을 color scheme의 불투명도 50%로 설정하려면 다음과 같이 코드를 작성할 수 있다.

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color?>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Theme.of(context).colorScheme.primary.withOpacity(0.5);
        }
        return null; // Use the component's default.
      },
    ),
  ),
  child: const Text('Fly me to the moon'),
  onPressed: () {
    // ...
  },
),

• resolve abstract method는

  사용자와 상호작용하려는 위젯의 states 따라 T 타입의 값을 반환한다.

  구현방법으로는 다음과 같다.

  T resolve(Set<MaterialState> states);

• MaterialState enum

  사용자 입력을 받을 때 일부 머터리얼 위젯이 가질 수 있는 상호작용 상태를 의미한다.

• Enum이란?

  열거형 값으로 이 클래스는 열거형 선언을 사용해 introduce된 모든 유형과 값을 구현한다. 구체적인 클래스는 이 인터페이스를 구현할 수 없다.

In this case the background color for all other button states would fallback to the ElevatedButton’s default values. To unconditionally set the button’s backgroundColor for all states one could write:

이 경우, 다른 모든 버튼 상태에 대한 배경색은 ElevatedButton 의 기본값으로 되돌아 간다. 모든 상태에 대해 버튼의 배경색을 무조건 설정하려면 다음과 같이 작성할 수 있다.

ElevatedButton(
  style: const ButtonStyle(
    backgroundColor: MaterialStatePropertyAll<Color>(Colors.green),
  ),
  child: const Text('Let me play among the stars'),
  onPressed: () {
    // ...
  },
),

ButtonStyle을 직접 구성하면 모든 상태에 대한 버튼의 시각적 속성을 매우 정밀하게 제어할 수 있다. 이 수준의 제어(control)는 사용자 지정 “브랜드” 룩앤필을 원할 때 필요로 함. 그러나, 많은 경우 몇 가지 초기 간단한 값에 기반한 상대적으로 포괄적인 변경을 만드는 게 유용하다. 버튼의 styleFrom() 메서드를 사용하면 포괄적인 변경이 가능하다.

For example, to override the default text and icon colors for a TextButton, as well as its overlay color, with all of the standard opacity adjustments for the pressed, focused, and hovered states, one could write:

예를 들어, TextButton 의 기본 텍스트 및 아이콘 색상을 재정의하고, 오버레이 색상을 설정하고 눌린 상태, 호버 상태 또는 포커스된 상태에 대한 표준 불투명도 조정을 모두 적용하려면 다음과 같이 할 수 있다.

TextButton(
  style: TextButton.styleFrom(foregroundColor: Colors.green),
  child: const Text('Let me see what spring is like'),
  onPressed: () {
    // ...
  },
),

To configure all of the application’s text buttons in the same way, specify the overall theme’s textButtonTheme:

모든 애플리케이션의 텍스트 버튼을 동일하게 구성하려면 전체 테마의 textButtonTheme을 지정하면 된다.

MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(foregroundColor: Colors.green),
    ),
  ),
  home: const MyAppHome(),
),