[flutter] velocity_x 패키지를 사용하여 데이터 상태 관리를 하는 방법

14 Dec 2023

flutter

velocity_x 패키지는 flutter 앱에서 간단하게 데이터 상태를 관리하고 UI를 작성할 수 있도록 도와주는 유용한 패키지입니다. 이 패키지를 사용하여 상태 관리를 효율적으로 할 수 있습니다. 이번 블로그에서는 velocity_x 패키지의 기본적인 사용 방법에 대해 알아보고자 합니다.

velocity_x 패키지 설치하기

먼저 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.
```
dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^3.0.0  # 현재 가장 최신 버전을 사용하려면 버전을 확인해주세요.
```
패키지를 추가한 다음에는 flutter pub get 명령어로 패키지를 설치합니다.
velocity_x 패키지를 사용하여 상태 관리하기

가장 먼저 해야 할 일은 velocity_x 패키지를 import 하는 것입니다.
```
import 'package:velocity_x/velocity_x.dart';
```
이제 ViewModel을 생성하여 상태를 관리할 수 있습니다.
```
class MyViewModel extends VxNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}
```
그리고 다음과 같이 VxBuilder를 사용하여 UI를 업데이트합니다. 예를 들어, MyViewModel 클래스의 count 값을 화면에 표시하기 위한 예제 코드는 다음과 같습니다.
```
VxNotifierBuilder(
  mutations: {MyViewModel},
  builder: (context, notifier, child) {
    return Text(notifier<MyViewModel>().count.toString());
  },
)
```
위의 코드에서 VxNotifierBuilder 위젯은 MyViewModel을 감시하고, count 값이 변경될 때마다 화면을 자동으로 업데이트합니다.
velocity_x를 사용한 UI 작성

velocity_x 패키지를 사용하면 UI 작성도 간편해집니다. 다양한 유용한 메서드를 제공하여 코드를 간결하게 작성할 수 있습니다. 예를 들어, TextStyle, padding, alignment 등을 쉽게 적용할 수 있습니다.
```
Vx.print("Hello, velocity_x!"); // 콘솔에 텍스트 출력

"Hello, velocity_x!"
    .text
    .blue500
    .makeCentered()
    .box
    .red400
    .rounded
    .p4
    .make()
```
위의 코드에서는 텍스트 스타일링과 컨테이너 스타일링이 모두 한 줄의 코드로 가능하며, UI를 간편하게 작성할 수 있습니다.

velocity_x 패키지를 사용하면 flutter 앱의 상태 관리와 UI 작성이 더욱 편리해집니다. 이 패키지를 사용하여 더 나은 flutter 앱을 개발할 수 있습니다!

참고 문헌:

velocity_x GitHub 페이지