Provide route generator to create route map quickly by annotations

  Maps

ff_annotation_route

Languages: English | 中文简体

Description

Provide a route generator to create route map quickly by annotations.

Usage

Add packages to dev_dependencies

Add the package to dev_dependencies in your project/packages’s pubspec.yaml

dev_dependencies:
  ff_annotation_route: latest-version

Download with flutter packages get

Add annotation

Empty Constructor

import 'package:ff_annotation_route/ff_annotation_route.dart';

@FFRoute(
  name: "fluttercandies://mainpage",
  routeName: "MainPage",
)
class MainPage extends StatelessWidget
{
  // ...
}

Constructor with arguments

import 'package:ff_annotation_route/ff_annotation_route.dart';

@FFRoute(
  name: "fluttercandies://picswiper",
  routeName: "PicSwiper",
  argumentNames: ["index", "pics"],
  showStatusBar: false,
  pageRouteType: PageRouteType.transparent,
)
class PicSwiper extends StatefulWidget {
  final int index;
  final List<PicSwiperItem> pics;
  PicSwiper({this.index, this.pics});
  // ...
}

FFRoute

ParameterDescriptionDefault
nameThe name of the route (e.g., “/settings”).required
argumentNamesArguments name passed to FFRoute.–
argumentTypesThe types of arguments.–
showStatusBarWhether to show the status bar.true
routeNameThe route name to track page.”
pageRouteTypeThe type of page route.(material, cupertino, transparent)–
descriptionThe description of the route.”
extsThe extend arguments.–

Generate Route File

Environment

Add dart bin into to your $PATH.

cache\dart-sdk\bin

More info

Activate the plugin

pub global activate ff_annotation_route

Execute command

Go to your project’s root and execute command.

ff_route <command> [arguments]

Command Parameter

Available commands:

command namedescription
-h, –helpPrint this usage information.
-p, –path [arguments]The path of folder to be executed with commands.
-rc, –route-constantsWhether generate route names as constants.
-rh, –route-helperWhether generate xxx_route_helper.dart
-rn, –route-namesWhether generate route names as a list.
-s, –saveWhether save commands in local, it will read commands from local next time to execute if run “ff_route” without any commands.
-na, –no-argumentsWhether RouteSettings has arguments(for lower flutter sdk).
-g, –git package1,package2Whether scan git lib,you should specify package names and split multiple by ‘,’.
–packageIs this a package.
–no-is-initial-routeWhether RouteSettings has isInitialRoute(for higher flutter sdk).
-o –outputThe path of main project route file and helper file. it is relative to the lib directory.
-rfo –routes-file-outputThe path of routes file.It is relative to the lib directory.

Main.dart

  • If you execute command with --route-helper, FFNavigatorObserver/FFRouteSettings will generate in xxx_route_helper.dart which help you to track page or change status bar state.
  • If you execute command with --route-helper, FFTransparentPageRoute will generate in xxx_route_helper.dart which helps you to push a transparent page route.
Widget build(BuildContext context) {
    return OKToast(
        child: MaterialApp(
      title: 'ff_annotation_route demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [
        FFNavigatorObserver(routeChange:
            (RouteSettings newRouteSettings, RouteSettings oldRouteSettings) {
          //you can track page here
          print(
              "route change: ${oldRouteSettings?.name} => ${newRouteSettings?.name}");
          if (newRouteSettings is FFRouteSettings &&
              oldRouteSettings is FFRouteSettings) {
            if (newRouteSettings?.showStatusBar !=
                oldRouteSettings?.showStatusBar) {
              if (newRouteSettings?.showStatusBar == true) {
                SystemChrome.setEnabledSystemUIOverlays(
                    SystemUiOverlay.values);
                SystemChrome.setSystemUIOverlayStyle(
                    SystemUiOverlayStyle.dark);
              } else {
                SystemChrome.setEnabledSystemUIOverlays([]);
              }
            }
          }
        })
      ],
      builder: (c, w) {
        ScreenUtil.instance =
            ScreenUtil(width: 750, height: 1334, allowFontScaling: true)
              ..init(c);
        var data = MediaQuery.of(c);
        return MediaQuery(
          data: data.copyWith(textScaleFactor: 1.0),
          child: w,
        );
      },
      initialRoute: Routes.FLUTTERCANDIES_MAINPAGE,// fluttercandies://mainpage
      onGenerateRoute: (RouteSettings settings) =>
          onGenerateRouteHelper(settings, notFoundFallback: NoRoute()),
    ),
  );
}

More info

Push

Push name

  Navigator.pushNamed(context, Routes.FLUTTERCANDIES_MAINPAGE /* fluttercandies://mainpage */);

Push name with arguments

arguments MUST be a Map<String, dynamic>

  Navigator.pushNamed(
    context,
    Routes.FLUTTERCANDIES_PICSWIPER, // fluttercandies://picswiper
    arguments: {
      "index": index,
      "pics": listSourceRepository
          .map<PicSwiperItem>((f) => PicSwiperItem(f.imageUrl, des: f.title))
          .toList(),
    },
  );

Download Flutter annotation route source code on GitHub

https://github.com/fluttercandies/ff_annotation_route