Colin's Blog
[flutter] DropdownButton 위젯과 함께 사용하는 애니메이션 효과

Flutter에서 DropdownButton 위젯을 사용할 때, 기본적인 UI 요소 위에 애니메이션 효과를 추가하고 싶을 때가 있습니다. 이러한 경우, DropdownButton 위젯과 함께 AnimatedContainer나 AnimatedSize를 활용하여 애니메이션 효과를 쉽게 구현할 수 있습니다.

AnimatedContainer를 사용한 애니메이션 효과

AnimatedContainer 위젯은 상태 변경에 따라 자식 위젯의 크기나 속성을 부드럽게 애니메이션화할 수 있는 위젯입니다. DropdownButton의 값이 변경될 때, 선택된 값을 표시하는 영역의 크기를 부드럽게 변경하는 애니메이션 효과를 구현하고 싶다면 AnimatedContainer를 사용할 수 있습니다.

아래는 DropdownButton과 함께 AnimatedContainer를 사용하여 애니메이션 효과를 구현한 예시 코드입니다.

String dropdownValue = 'One';
bool showSelection = false;

Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      DropdownButton<String>(
        value: dropdownValue,
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
            showSelection = true; // 선택된 값 표시 영역을 보이도록 설정
          });
        },
        items: <String>['One', 'Two', 'Three', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          })
          .toList(),
      ),
      SizedBox(height: 20),
      AnimatedContainer(
        duration: Duration(milliseconds: 500),
        height: showSelection ? 50 : 0, // 선택된 값 표시 영역의 높이를 변경해 부드럽게 애니메이션화
        child: showSelection
            ? Center(
                child: Text('Selected: $dropdownValue'),
              )
            : null,
      ),
    ],
  );
}

위 코드에서 AnimatedContainer를 사용하여 showSelection 상태에 따라 선택된 값이 표시되는 영역의 높이를 변경하고 있습니다. 따라서 DropdownButton의 값이 변경될 때, 선택된 값이 표시되는 영역이 애니메이션 효과와 함께 나타나게 됩니다.

AnimatedSize를 사용한 애니메이션 효과

또 다른 옵션으로 AnimatedSize 위젯을 사용하여 DropdownButton의 값을 변경할 때 선택된 값을 부드럽게 확대/축소하는 애니메이션 효과를 구현할 수 있습니다. 이를 통해 DropdownButton가 값을 변경할 때, 선택된 값이 부드럽게 나타나는 효과를 추가할 수 있습니다.

아래는 DropdownButton과 함께 AnimatedSize를 사용하여 애니메이션 효과를 구현한 예시 코드입니다.

String dropdownValue = 'One';

Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      DropdownButton<String>(
        value: dropdownValue,
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: <String>['One', 'Two', 'Three', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          })
          .toList(),
      ),
      SizedBox(height: 20),
      AnimatedSize(
        vsync: this,
        duration: Duration(seconds: 1),
        child: Container(
          width: 200,
          height: 50,
          color: Colors.blue,
          child: Center(
            child: Text('Selected: $dropdownValue'),
          ),
        ),
      ),
    ],
  );
}

위 코드에서 AnimatedSize를 사용하여 DropdownButton의 값을 변경할 때 선택된 값이 부드럽게 확대/축소되는 애니메이션 효과를 추가하고 있습니다. 이를 통해 DropdownButton의 값 변경 시 선택된 값을 부드럽게 표시하는 효과를 적용할 수 있습니다.

위와 같이 DropdownButton 위젯과 AnimatedContainer 또는 AnimatedSize를 함께 사용하여 선택된 값의 표시 영역에 애니메이션 효과를 적용할 수 있습니다.

이러한 방식으로 DropdownButton과 애니메이션을 조합하여 보다 풍부하고 동적인 UI를 구현할 수 있습니다.

참고자료:

© 2018 Colin. All rights reserved.