Adding Fluro Routing for Flutter. Here's how to do it

Several Routing techniques/packages have been developed for Flutter, which gets us the job done, but why am I only talking about Fluro itself. We will be finding that one in this article.

Let’s gear up

Fluro

Fluro claims to provide the simplest, flexible and clear Routing approach. Besides this,

Takes Map<String, dynamic> for parameters passing

Wildcard Parameters

Query String Parameters

Built-in Transitions and custom creations

Project Structure

We will be having a simple project containing two screens. Both screens will have ElevatedButton() present in the Center().

Implementation

Install Fluro package

flutter pub add fluro

Next, Create a Fluro Object.

final router = FluroRouter();

Note: Its much better to create a new file for our Routing Structure.

Create a new file as “fluro_router.dart”, under this file create a class as “Router”. This class is responsible for handling application Routes.

class Router{
  static final router = FluroRouter();
  //Handler for every route
}

Once we’re done, we have to define handlers and routes for our two screen application. A handler requires BuildContext and Map<String, dynamic> (for parameter).

static var firstScreen = Handler(
    handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return const Screen1();
    });

Full Snippet

class Routes {
  static final router = FluroRouter();

  static var firstScreen = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return const Screen1();
      });

  static var secondScreen = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return const Screen2();
      });
}

Note: If your projects has null-safety enabled, be sure to add “?” in BuildContext. I was stuck for a long time on this issue.

After we are done, we need to define all the routes upon initialization.

static dynamic defineRoutes() {
  router.define("/", handler: firstScreen);
  router.define("second", handler: secondScreen);
}

In addition, we can also define Custom Transition for routes.

Just as handler, you can also pass “transitionType: TransitionType.inFromLeft” for instance.

static dynamic defineRoutes() {
  router.define("/", handler: splashHandler,transitionType: TransitionType.fadeIn);
  router.define("second", handler: placeHandler,transitionType: TransitionType.inFromLeft);
}

Now, just pass this function in the initState and you’re good to go.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    Routes.defineRoutes();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        initialRoute: '/',
        onGenerateRoute: Routes.router.generator,
    );
  }
}

Route

To simply route to next screen,

body: Center(
  child: ElevatedButton(
    child: const Text("Button 1"),
    onPressed: () => Navigator.pushNamed(context, 'second'),
  ),
),

Run the application.

Without Parameter passing

With Parameter passing

To pass a parameter simply add “/: data”. Modify the following,

Snippet#1 — defineRoutes

static dynamic defineRoutes() {
  router.define("/", handler: splashHandler,transitionType: TransitionType.fadeIn);
  router.define("second/:data", handler: placeHandler,transitionType: TransitionType.inFromLeft);
}

Snippet#2 — Handler

static var placeHandler = Handler(
    handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
      return Screen2(data: params["data"][0]);
    });

Note: Name should be same “data”.

Snippet#3— Screens

//Screen 1
Navigator.pushNamed(context, 'second/Fluro article'),
//After route name, add your String
//Screen 2

class Screen2 extends StatelessWidget {
  const Screen2({Key? key, required this.data}) : super(key: key);

  final String data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Screen 2"),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Text(data),

            ElevatedButton(
              child: const Text("Button 2"),
              onPressed: () {},
            ),
          ],
        ),
      ),

    );
  }
}

Run the app again.

That’s all!

If you feel you have learned even a bit from this article then 👏 it.

Feel free to ask questions, I will try to respond asap. Thanks

Follow me on Medium, YouTube & GitHub. Don’t forget to check out my apps on Play Store. Give it a try.

Android Apps by UniqueDeveloper365 on Google Play

Mustafa Tahir

mustafatahirhussein — Overview