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

05 Dec 2023

flutter

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

1. velocity_x 패키지 추가하기

우선, pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. 다음 코드를 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행하세요:

flutter pub get

2. 검색 애니메이션 구현하기

검색 애니메이션을 구현하기 위해 StatefulWidget을 사용할 것입니다. 다음과 같이 코드를 작성하세요:

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

class SearchAnimation extends StatefulWidget {
  @override
  _SearchAnimationState createState() => _SearchAnimationState();
}

class _SearchAnimationState extends State<SearchAnimation> {
  bool showSearchBar = false;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "Search Animation".text.make(),
      ),
      body: VStack(
        [
          if (showSearchBar)
            TextField(
              decoration: InputDecoration(
                labelText: 'Search',
              ),
            ).p(16),
          ElevatedButton(
            onPressed: () {
              setState(() {
                showSearchBar = !showSearchBar;
              });
            },
            child: showSearchBar ? "Hide" : "Show".text.make(),
          ).p(16),
        ],
        crossAlignment: CrossAxisAlignment.center,
        alignment: MainAxisAlignment.center,
      ),
    );
  }
}

위 코드에서 SearchAnimation 위젯은 StatefulWidget으로 정의되며, showSearchBar라는 bool 변수를 사용하여 검색 바를 보여줄지 여부를 제어합니다.

body에서 showSearchBar의 상태에 따라 검색 바와 “Show” 또는 “Hide” 버튼을 보여줍니다. 버튼을 누를 때마다 showSearchBar의 값을 변경하여 애니메이션을 구현합니다.

3. 실행해보기

검색 애니메이션을 포함하는 위젯을 사용할 화면에 SearchAnimation 위젯을 추가하세요:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAnimation(),
    );
  }
}

위 코드를 실행하여 앱을 실행하고 결과를 확인하세요.

이제 velocity_x를 사용하여 간단한 검색 애니메이션을 만들 수 있습니다. 자유롭게 코드를 확장하거나 변경하여 원하는 애니메이션 효과를 추가할 수 있습니다.

1. velocity_x 패키지 추가하기

2. 검색 애니메이션 구현하기

3. 실행해보기

참고 자료