[flutter] velocity_x를 사용하여 어떻게 검색 결과 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

이번에는 Flutter에서 velocity_x 패키지를 사용하여 검색 결과 애니메이션을 만드는 방법에 대해 알아보겠습니다.

velocity_x란?

velocity_x는 Flutter에서 UI 구성을 쉽게 할 수 있도록 도와주는 패키지입니다. 이 패키지를 사용하면 애니메이션, 레이아웃, 스타일 등을 더 쉽게 처리할 수 있습니다.

검색 결과 애니메이션 만들기

먼저, velocity_x 패키지를 불러와야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  velocity_x: ^1.5.1

그리고 패키지를 import 해주세요.

import 'package:velocity_x/velocity_x.dart';

이제 실제 예제를 작성해보겠습니다.

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

class SearchAnimationPage extends StatefulWidget {
  @override
  _SearchAnimationPageState createState() => _SearchAnimationPageState();
}

class _SearchAnimationPageState extends State<SearchAnimationPage> {
  bool _isSearching = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "Search".text.make(),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              setState(() {
                _isSearching = !_isSearching;
              });
            },
          )
        ],
      ),
      body: VStack([
        VxTextField(
          hintText: "Search",
        ).px(16),
        if (_isSearching)
          "Search Results".text.xl2.makeCentered()
        else
          "Tap on the search icon to start searching.".text.center.xl2.makeCentered(),
      ]).py(16),
    );
  }
}

위의 예제 코드는 간단한 검색 화면을 작성한 것입니다. _isSearching 변수를 사용하여 검색 버튼을 누르면 검색 결과를 표시하도록 설정하였습니다. 검색 결과를 표시할 때는 velocity_x의 text와 makeCentered()를 사용하여 UI를 생성합니다.

이제 위의 예제를 실행해보면, 검색 버튼을 누르면 애니메이션과 함께 검색 결과가 나타나게 됩니다.

결론

Flutter에서 velocity_x 패키지를 사용하여 검색 결과 애니메이션을 만들 수 있습니다. velocity_x를 통해 UI 구성을 쉽게 처리할 수 있으므로, 다양한 애니메이션 및 UI 요소를 구현할 때 유용하게 사용할 수 있습니다.

참고 자료

velocity_x 패키지: https://pub.dev/packages/velocity_x
Flutter 공식 문서: https://flutter.dev/docs