[flutter] velocity_x를 사용하여 플러터 앱의 상태 전환과 라우팅 구현하기

14 Dec 2023

flutter

velocity_x는 flutter 패키지 중 하나로, 상태 관리 및 라우팅을 쉽게 구현할 수 있도록 지원합니다. 이번 블로그 글에서는 velocity_x를 사용하여 플러터 애플리케이션의 상태 전환과 라우팅을 구현하는 방법을 다룰 것입니다.

velocity_x 패키지 소개
상태 전환 구현
라우팅 구현

velocity_x 패키지 소개

velocity_x 패키지는 flutter에서 상태 관리 및 라우팅을 쉽게 구현할 수 있도록 도와주는 도구입니다. 앱의 상태 관리 시 손쉽게 사용할 수 있으며, 간단한 구문으로 라우팅을 처리할 수 있습니다. 해당 패키지를 통해 앱의 코드를 간결하게 유지할 수 있습니다.

상태 전환 구현

velocity_x를 사용하면 앱의 상태 전환을 간단하게 처리할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 화면의 상태를 바꾸고 싶을 때는 아래와 같이 구현할 수 있습니다.

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

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: '상태 전환 예제'.text.make(),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.vxNav.push(Uri.parse('/newPage'));
          },
          child: '새 페이지로 이동'.text.make(),
        ),
      ),
    );
  }
}

위 코드에서 context.vxNav.push를 통해 쉽게 새로운 페이지로 이동할 수 있습니다.

라우팅 구현

velocity_x를 사용하면 라우팅을 간단히 구현할 수 있습니다. 예를 들어, 새로운 페이지를 만들고 해당 페이지에서 데이터를 출력하고 싶다면 아래와 같이 구현할 수 있습니다.

class NewPage extends StatelessWidget {
  final String data;

  const NewPage({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: '새 페이지'.text.make(),
      ),
      body: Center(
        child: '$data'.text.make(),
      ),
    );
  }
}

위 코드에서는 새로운 페이지를 만들고, 해당 페이지에서 데이터를 출력하는 예제입니다.

velocity_x 패키지를 사용하면 위와 같이 간단하게 flutter 애플리케이션의 상태 전환과 라우팅을 구현할 수 있습니다.

이상으로 velocity_x를 사용하여 flutter 앱의 상태 전환과 라우팅을 구현하는 방법에 대해 알아보았습니다. 감사합니다.

참고: <링크>