[Flutter 2.0] ElevatedButton / OutlinedButton

Flutter 2.0이 업데이트 되면서 버튼 위젯들이 크게 개편되었습니다.

제가 가장 당황스러웠던 건 기존에 잘 사용하고 있던 OutlineButton, RaisedButton 이 deprecate되면서

OutlinedButton, ElevatedButton으로 변경된 부분이였는데요.

 

 

ButtonStyle

---

기존 버튼 위젯에는 color, elevation 등 여러 스타일을 수정할 수 있는 파라미터가 있었으나 2.0에서는 대부분의 파라미터가 제거되고, style을 통해 지정 하도록 변경되었습니다.

 

class ButtonStyle with Diagnosticable {
  /// Create a [ButtonStyle].
  const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
  });

 

기존 코드를 위의 ButtonStyle을 사용해 마이그레이션 해보니, 제 경우에는 위의 style 변경 만으로는 충족되지 못했던 기능들이 있었습니다. ( color, elevation 제거 등)

그래서 자료를 찾아 보았고, 제 빅데이터 관리용과 정보 공유를 위해 아래에 정리해두겠습니다.

 

ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey; // disable color
      }
      return Colors.white; // enable color
    }),

 

Elevation 제거

ElevatedButton(
    style: ButtonStyle(
        elevation: MaterialStateProperty.all(0)
    )
);

 

Button State에 따른 overlay color 변경

ElevatedButton(
    style: ButtonStyle(
        overlayColor: MaterialStateColor.resolveWith((states) {
            if (states.contains(MaterialState.hovered)) return Colors.black.withOpacity(0.04);
            if (states.contains(MaterialState.focused) || states.contains(MaterialState.pressed)) return Colors.black.withOpacity(0.12);
            return null;
         })
    )
)