[TIL-022] Flutter 도대체 버튼 스타일링 어떻게 해야 하는거야?

현재 버전

• Flutter : 3.29.2
• Dart : 3.7.2

 

Flutter에서 ElevatedButton위젯을 사용할 때 style속성을 이용해 버튼의 스타일링을 할 수 있다.

그렇지만 스타일링에 사용하는 위젯이 2가지이다.

 

그래서 너무 헷갈리기에 정리해 본다.

 

ButtonStyle 위젯

기본 사용법

// 편의를 위해 스타일 속성만 사용
Widget myButton() {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: WidgetStatePropertyAll(Colors.red)
      ),
    );
  }

• ButtonStyle위젯은 색을 지정하기 위해 background: Colors.red를 하면 에러가 발생한다.
• 해결하기 위해서 WidgetStateProperty타입을 반환해줘야 하기에 background: WidgetStatePropertyAll(Colors.red) 또는 WidgetStateProperty.all(Colors.red)를 해야 한다.
• WidgetStatePropertyAll()과 WidgetStateProperty.all()은 어떤 상태이든 동일한 색을 지정한다는 뜻이다. 버튼이 비활성화가 되든, 누르든 동일한 색이 적용된다.

 

심화 사용법

WidgetStateProperty타입은 위젯의 상태에 따라 다르게 스타일링하기 위해 생겨났다.

상태의 종류

 

// 편의를 위해 스타일 속성만 사용
Widget myButton() {
  return ElevatedButton(
    style: ButtonStyle(
      backgroundColor: WidgetStateProperty.resolveWith((states) {
        if (states.contains(WidgetState.pressed)) {
          return Colors.deepOrangeAccent; // 눌렸을 때 색상
        }
        return Colors.greenAccent; // 기본 색상
      }),
    ),
  );
}

• 상태의 조건에 따라 색을 다르게 지정할 수 있다.

 

ElevatedButton.styleFrom 위젯

// 편의를 위해 스타일 속성만 사용
Widget myButton() {
  return ElevatedButton(
    style: ElevatedButton.styleFrom(
    	backgroundColor: Colors.blue
    ),
  );
}

• ElevatedButton.styleFrom은 각 속성의 타입이 단순하다.
• 색상 관련 속성의 타입은 그냥 Color타입만 반환하면 되므로 background: Colors.blue는 정상동작하게 된다.
• 버튼의 상태가 속성으로 바로 사용될 수 있어서 편하지만 버튼의 상태 중 없는 것도 있다.

 

마무리(느낀 점)

즉, 둘 다 서로 없는 것이 있으므로 원하는 속성이 있는 위젯을 사용하면 될 것 같다.

Flutter를 하면서 가장 불편하고 어려운 점은 동일한 기능의 위젯이 너무 많고 일관성이 없어 보이는 것이다.

 

Text위젯에서의 color속성은 글자의 색을 변경하고, Container위젯의 color속성은 박스의 색.

즉, background의 색을 변경한다. 

 

왜 이렇게 개발이 된 것인지 모르겠다.