Flutter 2.0 Buttons V2

새로운 버튼!

Flutter 2.0 업데이트가 되면서 버튼 위젯이 크게 업데이트 되었습니다. 기존에는 버튼을 사용하려면 FlatButton, OutlineButton, RaisedButton 중 하나를 사용하는게 일반적이었는데 이 버튼들이 1.25버전 기준으로 deprecate 되면서 TextButton, OutlinedButton, ElevatedButton 을 사용해야되게 변경이 됐습니다. 이번 강의는 각 버튼이 어떻게 변경이 되었고 스타일링 및 API 활용을 어떻게 해야하는지 알아보도록 할게요!

애니메이션 변경

일단 기본적으로 버튼 클릭때 생기는 Splash 애니메이션이 변경되었어요! 이건 말로 어떻게 표현해야 할지 모르겠는데 직접 코드를 작성해서 실행해보시는걸 추천드립니다. (귀찮으시면 위에 제 영상을 봐보셔도 되세요!) 기존 애니메이션보다 무언가 훨씬 부드러워지고 누르고 있으면 뭔가 새로 기름칠을 한것처럼 매끄러운게 기분이 좋아집니다 ㅎㅎ.

스타일링 API 변경

기존 버튼에는 각각 버튼에 스타일링 파라미터가 바로 달려있었습니다. 예를들어서 버튼의 색깔을 변경하고 싶으면 버튼 바로 아래에 color 파라미터를 사용하면 됐었죠. 하지만 이제 style 파라미터가 새로 생겼습니다.

styleFrom

기존 버튼들을 스타일링 할때와 가장 API 가 비슷하게 새로운 버튼들을 스타일링 하는 방법은 styleFrom 을 사용하는겁니다. styleFrom 은 아래와같이 정의 되어있는데 제가 파악을 한 파라미터에는 설명을 추가 해드릴게요

  static ButtonStyle styleFrom({
    // 프라이머리 색상 (텍스트 색상)
    Color? primary,
    // 버튼이 disabled 상태일때 텍스트 색상
    Color? onSurface,
    // 배경 색상
    Color? backgroundColor,
    // 쉐도우 색상 (elevation 을 0 이상으로 올렸을때)
    Color? shadowColor,
    // 높이 조절
    double? elevation,
    // child 에 텍스트가 들어갈 경우 해당 텍스트 스타일
    TextStyle? textStyle,
    // 패딩
    EdgeInsetsGeometry? padding,
    // 최소 사이즈
    Size? minimumSize,
    // 보더 스타일링
    BorderSide? side,
    // 보더 모양
    OutlinedBorder? shape,
    MouseCursor? enabledMouseCursor,
    MouseCursor? disabledMouseCursor,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? tapTargetSize,
    Duration? animationDuration,
    bool? enableFeedback,
    // child 를 어떻게 배치할지
    AlignmentGeometry? alignment,
  });

명칭만 조금 바뀌고 저희가 기존에 알던 파라미터와 크게 차이가 나지는 않습니다. 글로 보고 잘 모르겠는 파라미터가 있으시면 제 영상을 시청해주세요!

ButtonStyle

버튼들을 스타일링 할 수 있는 두번째 방법이 있습니다. 바로 ButtonStyle 을 사용하는 방법인데요. 기존에는 버튼 상태에 따라서 다른 스타일링을 적용하려면 조건문을 버튼 밖에서 따로 짜서 스타일 적용을 해줬어야 했습니다. 하지만 이제는 바로 버튼의 style 파라미터에서 바로 버튼 상태를 받아볼 수 있는데 이게 바로 ButtonStyle 의 존재 이유입니다.

  renderElevatedButton() {
    return ElevatedButton(
      onPressed: () {},
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(
          Colors.red,
        ),
        backgroundColor: MaterialStateProperty.resolveWith(
          (states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.grey;
            } else {
              return Colors.blue;
            }
          },
        ),
      ),
      child: Text('Elevated Button'),
    );
  }

위와 같은 코드를 예로 들 수 있는데 각각의 스타일별로 MaterialStateProperty.all() 또는 MaterialStateProperty.resolveWith() 을 적용할 수 있습니다. 가장 간단한 MaterialStateProperty.all() 을 사용하면 모든 상태에 하나의 스타일을 적용하겠다는 뜻이고 MaterialStateProperty.resolveWith 을 사용하면 각 상태별로 콜백을 받아서 유동적으로 스타일을 적용할 수 있습니다. 예를들어서 위 코드의 backgroundColor 파라미터를 보면 disabled 상태에서는 회색을 적용하고 나머지 상태에서는 파란색을 적용하는 간단한 로직을 적용할 수 있죠.

결론

Flutter 프레임워크가 2.0 업데이트를 하면서 웹 개발이 스테이블 채널에 머지가 되었어요. 제 생각에는 웹, 그러니까 마우스 또는 트랙패드를 사용하는 환경에서 더욱 효율적인 위젯을 만드는데 편리하도록 변화가 이루어졌다고 생각합니다! 전 최근에 꽤나 큰 프로젝트를 Flutter 2.0 으로 업데이트 했는데 크게 문제 없이 잘 쓰고 있습니다! 독자님들도 빠른 시일내에 안전히 업데이트 할 수 있길 기원해요!

©Code Factory All Rights Reserved