플러터에서 fluro 패키지 사용법 [라우팅]

플러터(Flutter)에서 네비게이션을 구현할 때 많이 사용되는 fluro 패키지에 대해 알아보겠습니다. fluro는 Flutter 애플리케이션에서 라우팅을 간편하게 관리할 수 있게 해주는 패키지입니다. 이 패키지는 다양한 옵션을 제공하여 더욱 유연하고 사용자 정의 가능한 네비게이션을 구현할 수 있습니다.

1. fluro 패키지 설치

먼저, pubspec.yaml 파일에 fluro 패키지를 추가하여 설치합니다.

dependencies:
  fluro: ^2.0.3

그리고나서 패키지를 업데이트하거나 설치하기 위해 터미널에서 flutter pub get을 실행하세요.

2. 기본적인 사용법

fluro 패키지는 주로 네비게이션 경로를 정의하고, 해당 경로로 화면을 이동하는 데 사용됩니다. 다음은 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final router = FluroRouter(); // 라우터 인스턴스 생성

    // 경로 정의
    router.define(
      '/details/:id',
      handler: Handler(
        handlerFunc: (context, parameters) {
          // id 매개변수를 이용해 화면을 구성
          final id = parameters['id']?[0];
          return DetailsScreen(id);
        },
      ),
    );

    return MaterialApp(
      title: 'Flutter Fluro Example',
      onGenerateRoute: router.generator, // 라우터 설정
      initialRoute: '/', // 초기 경로 설정
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 버튼 클릭 시 /details 경로로 이동
            FluroRouter.router.navigateTo(context, '/details/123');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  final String id;

  DetailsScreen(this.id);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('Details for ID: $id'),
      ),
    );
  }
}

3. 주요 옵션

fluro 패키지는 다양한 옵션을 제공하여 네비게이션을 더욱 유연하게 관리할 수 있습니다.

• Wildcards: 경로 정의 시 동적 매개변수를 사용할 수 있습니다. 예를 들어, /details/:id와 같이 경로를 정의하고, 해당 매개변수를 활용하여 다양한 상세화면을 표시할 수 있습니다.
• Query Parameters: 경로에 쿼리 매개변수를 추가하여 필요한 정보를 전달할 수 있습니다. 예를 들어, /details?id=123과 같이 쿼리를 사용할 수 있습니다.
• Transitions: 화면 전환 시 애니메이션 효과를 추가할 수 있습니다. fluro는 화면 전환 시 사용자 정의 애니메이션을 쉽게 구현할 수 있도록 도와줍니다.
• Guards: 특정 경로로의 접근을 제한하거나 보호하기 위해 보호자(Guard)를 설정할 수 있습니다. 이를 통해 인증된 사용자만 접근 가능한 경로를 만들 수 있습니다.

주요 TransitionType

fluro 패키지에서 제공하는 주요 Transitions 옵션 중 일부를 살펴보겠습니다.

1. fadeIn: 새로운 화면이 등장할 때 페이드 인 애니메이션을 적용합니다.
2. slideInLeft: 왼쪽에서 오른쪽으로 슬라이드 애니메이션을 적용합니다.
3. slideInRight: 오른쪽에서 왼쪽으로 슬라이드 애니메이션을 적용합니다.
4. slideInTop: 위에서 아래로 슬라이드 애니메이션을 적용합니다.
5. slideInBottom: 아래에서 위로 슬라이드 애니메이션을 적용합니다.

결론

fluro 패키지는 Flutter 애플리케이션에서 강력한 네비게이션 관리 기능을 제공합니다.

위의 예제를 통해 간단하게 시작할 수 있으며, 다양한 옵션을 활용하여 복잡한 네비게이션 흐름도 쉽게 구현할 수 있습니다.

Flutter 개발에서 네비게이션 관리를 좀 더 효율적으로 하고 싶다면 fluro 패키지를 한 번 살펴보세요!

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg