[Flutter] fluro package (navigation 이동, route, transition) sample code

 

fluro 를 사용하여 route를 관리할 수 있다. arguments 정하는것도 가능하고 transitionType을 통해 원하는 애니메이션을 보이게, 안보이게 할 수도 있다.

 

pub.dev/packages/fluro

fluro | Flutter Package

 

 

code sample 이다.

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


Handler _TestNativeHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestNative());
Handler _TestNativeModalHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestNativeModal());
Handler _TestInFromLeftHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestInFromLeft());
Handler _TestInFromTopHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestInFromTop());
Handler _TestInFromRightHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestInFromRight());
Handler _TestInFromBottomHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestInFromBottom());
Handler _TestFadeInHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestFadeIn());
Handler _TestCustomHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestCustom());
Handler _TestMaterialHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestMaterial());
Handler _TestMaterialFullScreenDialogHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestMaterialFullScreenDialog());
Handler _TestCupertinoHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestCupertino());
Handler _TestCupertinoFullScreenDialogHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestCupertinoFullScreenDialog());
Handler _TestNoneHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => TestNone());
Handler _HomePageHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) => HomePage());

final List routeNames = [
  'TestNative',
  'TestNativeModal',
  'TestInFromLeft',
  'TestInFromTop',
  'TestInFromRight',
  'TestInFromBottom',
  'TestFadeIn',
  'TestCustom',
  'TestMaterial',
  'TestMaterialFullScreenDialog',
  'TestCupertino',
  'TestCupertinoFullScreenDialog',
  'TestNone',
  'home',
];

final List handlers = [
  _TestNativeHandler,
  _TestNativeModalHandler,
  _TestInFromLeftHandler,
  _TestInFromTopHandler,
  _TestInFromRightHandler,
  _TestInFromBottomHandler,
  _TestFadeInHandler,
  _TestCustomHandler,
  _TestMaterialHandler,
  _TestMaterialFullScreenDialogHandler,
  _TestCupertinoHandler,
  _TestCupertinoFullScreenDialogHandler,
  _TestNoneHandler,
  _HomePageHandler,
];

final List transitionTypes = [
  TransitionType.native,
  TransitionType.nativeModal,
  TransitionType.inFromLeft,
  TransitionType.inFromTop,
  TransitionType.inFromRight,
  TransitionType.inFromBottom,
  TransitionType.fadeIn,
  TransitionType.custom,
  TransitionType.material,
  TransitionType.materialFullScreenDialog,
  TransitionType.cupertino,
  TransitionType.cupertinoFullScreenDialog,
  TransitionType.none,
  TransitionType.none,
];

class MyFluroRouter {
  static FluroRouter router = FluroRouter();

  static void setupRouter() {
    for(int i=0; i<routeNames.length; i++){
      router.define(routeNames[i], handler: handlers[i], transitionType: transitionTypes[i]);
    }
  }
}

void main() {
  MyFluroRouter.setupRouter();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Fluro Tutorial',
        initialRoute: 'home',
        onGenerateRoute: MyFluroRouter.router.generator
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ListView.builder(
          padding: const EdgeInsets.all(4),
          itemCount: routeNames.length,
          itemBuilder: (BuildContext context, int index) {
            return FlatButton(
                onPressed: () {
                  nvAction(context, routeNames[index]);
                },
                child: Text(routeNames[index]));
          },
        ),
      ),
    );
  }

  void nvAction(context, path) {
    Navigator.pushReplacementNamed(context, path);
  }
}

class TestNative extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Native'),
      ),
      body: Center(
        child: Text('Test Native'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestNativeModal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test NativeModal'),
      ),
      body: Center(
        child: Text('Test NativeModal'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestInFromLeft extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test InFromLeft'),
      ),
      body: Center(
        child: Text('Test InFromLeft'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestInFromTop extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test InFromTop'),
      ),
      body: Center(
        child: Text('Test InFromTop'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestInFromRight extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test InFromRight'),
      ),
      body: Center(
        child: Text('Test InFromRight'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestInFromBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test InFromBottom'),
      ),
      body: Center(
        child: Text('Test InFromBottom'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestFadeIn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test FadeIn'),
      ),
      body: Center(
        child: Text('Test FadeIn'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestCustom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Custom'),
      ),
      body: Center(
        child: Text('Test Custom'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}
class TestMaterial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Material'),
      ),
      body: Center(
        child: Text('Test Material'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestMaterialFullScreenDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test MaterialFullScreenDialog'),
      ),
      body: Center(
        child: Text('Test MaterialFullScreenDialog'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestCupertino extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Cupertino'),
      ),
      body: Center(
        child: Text('Test Cupertino'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

class TestCupertinoFullScreenDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test CupertinoFullScreenDialog'),
      ),
      body: Center(
        child: Text('Test Material'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}
class TestNone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test None'),
      ),
      body: Center(
        child: Text('Test None'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
      ),
    );
  }
}

 

유용할것 같은것은 타입은

native

inFormLeft

inFormRight

inFormTop

cupertino

materialFullScreenDialog

none 입니다.

 

native는 android 인지 ios 인지 판별해서 material과 cupertino 에서 고르는거 같기도 합니다.

... 노가다이니 직접 일일히 찾지 마시고 이걸로 한번에 확인만 하세요..