Flutter 2.0 Buttons V2

Written by 코드팩토리 JC

1월 15, 2024

플러터 2.0 가이드

새로운 버튼!

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,
  }); 
Dart

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

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'),
    );
  }
Dart

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

결론

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

관련 포스트

플러터에서의 Immutable Programming: copyWith 함수 마스터하기!

플러터에서의 Immutable Programming: copyWith 함수 마스터하기!

서론 불변 프로그래밍: 현대 개발의 핵심 현대 소프트웨어 개발에서 불변 프로그래밍(Immutable Programming)의 중요성은 간과할 수 없는 요소입니다. 플러터(Flutter)에서도 마찬가지로 불변 프로그래밍 개념이 매우 중요하며, copyWith 함수는 이러한 불변성을 유지하는 데 핵심적인 역할을 합니다. 이 글에서는 플러터를 배우기 시작하는 개발자들에게 불변 프로그래밍의 중요성을 강조하고, copyWith 함수의 역할과 사용 방법에 대해 설명 해보겠습니다!...

ChatGPT가 이야기하는 2024년 개발자 로드맵

ChatGPT가 이야기하는 2024년 개발자 로드맵

서론 개발자의 여정을 시작하며 안녕하세요, 미래의 개발자 여러분! 오늘부터 시작하는 여러분의 개발 여정에 함께할 수 있어서 기쁩니다. 2023년은 기술이 매우 빠르게 변화하는 해였으며, 이러한 변화 속에서 개발자가 되기 위한 길은 더욱 다채롭고 흥미로워졌습니다. 이 로드맵은 초보자인 여러분이 개발의 세계에 첫발을 내딛는 데 필요한 기초부터 시작해, 점차 심화 단계로 나아가는 길을 안내해 드릴 것입니다. 백엔드 개발 이 글은 단순히 기술을 배우는 것 이상의 의미를 가집니다....

Flutter Freezed 플러그인! Entity Code Generation은 이거 하나로 끝!

Flutter Freezed 플러그인! Entity Code Generation은 이거 하나로 끝!

https://youtu.be/i5p6wXLAX7I 서론 Flutter 는 Code Generation 기능이 상당히 많이 활성화되어 있어요. 흔히들 많이 사용하는 json_serializable 라이브러리도 있고 retrofit 및 chopper 라이브러리도 있습니다. 오늘 알려드릴 freezed 또한 데이터 클래스에 편의 기능들을 제공해주는 code generation 라이브러리입니다. Freezed vs Json Serializable Code Generation 이라는...