Routing With Fluro In Flutter
Routing or navigating starting with one page and then onto the next page is fundamental for any application. All things considered, when it came to Flutter’s in-constructed routing system, it was quite simple to get a handle on, after a long tutorial and numerous uses in projects.
Then, I utilized Fluro at that point, and I was astounded. If you come from a front-end web development background, you would feel comfortable with how Fluro handles its routes.
This blog will explore the Routing With Fluro In Flutter. We perceive how to execute a demo program. We will learn how to route from one page to another page using the fluro package in your Flutter applications.
If you’re looking for the best flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
fluro | Flutter Package
English | Português The brightest, hippest, coolest router for Flutter. Simple route navigation Function handlers (map…pub.dev
Table Of Contents::
Introduction:
The below demo video shows a two-page Home page and a Second page. On the Home page, we will add an elevated button and on the Second page, we will add Floating Action Buttons to navigate to the other page. It will be shown on your devices.
When moving from Home to Second, we require some extra information, such as data, so we pass that as part of the route parameters. So we’ll be learning how to do that through Fluro.
While moving from Home to Second, we require some additional information, like data, so we pass that as a component of the route parameters. So we’ll figure out how to do that through Fluro.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
fluro: ^2.0.4
Step 2: Import
import 'package:fluro/fluro.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called router.dart inside the lib folder.
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_fluro_routing_demo/second_page.dart';
import 'package:flutter_fluro_routing_demo/home_page.dart';
class Routes {
static final router = FluroRouter();
static var firstScreen = Handler(
handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
return const HomePage();
});
static var placeHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
return SecondPage(data: params["data"][0]);
});
static dynamic defineRoutes() {
router.define("home", handler: firstScreen,transitionType: TransitionType.fadeIn);
router.define("second/:data", handler: placeHandler,transitionType: TransitionType.inFromLeft);
}
}
The first line inside the Routes class initializes a static instance of FluroRouter() from the Fluro library.
static final router = FluroRouter();
Then, we have a handler where we deal with highlighting which widget/part must be loaded while visiting a route. You can consider them controllers on the off chance that you are accompanying information from a past framework.
// Handler for Home Page
static var firstScreen = Handler(
handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
return const HomePage();
});
// Handler for Second Page
static var placeHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
return SecondPage(data: params["data"][0]);
});
params[‘data’][0] will return the data sent by the route path and will be sent to the SecondPage as an attribute.
Next, we have a defineRoutes() function, where we will define individual routes and their paths. This is also where we will define any parameters if any. Let’s take a close look at the router.define() function.
static dynamic defineRoutes() {
router.define("home", handler: firstScreen,transitionType: TransitionType.fadeIn);
router.define("second/:data", handler: placeHandler,transitionType: TransitionType.inFromLeft);
}
Create a new dart file called main.dart inside the lib folder.
Now, just pass this function in the initState and you’re good to go.
import 'package:flutter/material.dart';
import 'package:flutter_fluro_routing_demo/router.dart';
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(
debugShowCheckedModeBanner: false,
initialRoute: 'home',
onGenerateRoute: Routes.router.generator,
);
}
}
Create a new dart file called home_page.dart inside the lib folder.
Navigator.pushReplacementNamed() is a capability that replaces the stack with anything that route you pass to it, so the user can’t return to the past screen by just squeezing the back button.
On the off chance that you would need such usefulness of returning a screen, you can utilize Navigator.pushNamed() with similar attributes.
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Fluro Routing Demo'),
centerTitle: true,
backgroundColor: Colors.teal,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Home Page',style: TextStyle(fontSize: 20),),
const SizedBox(height: 20,),
ElevatedButton(
onPressed: () {
var data = "FlutterDevs";
Navigator.pushReplacementNamed(context, 'second/$data');
},
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.teal[300],
minimumSize: const Size(88, 36),
padding: const EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2)),
),
),
child: const Text('Press Button'),
),
],
),
),
);
}
}
Create a new dart file called second_page.dart inside the lib folder.
On the Second Page, it’s genuinely straightforward as we need to pass no parameters accordingly, so we simply need to call pushReplacementNamed() once more.
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
const SecondPage({Key? key, required this.data}) : super(key: key);
final String data;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second page'),
centerTitle: true,
backgroundColor: Colors.teal,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png",width: 300,height: 250,),
Text('Welcome, $data',style: const TextStyle(fontSize: 20,fontWeight: FontWeight.w700),),
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.teal,
child: const Icon(Icons.settings_backup_restore),
onPressed: () {
Navigator.pushReplacementNamed(context, 'home');
},
),
);
}
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Conclusion:
In the article, I have explained Routing With Fluro’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Routing With Fluro On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Routing With Fluro in your Flutter projects. We will show you what the Introduction is. Make a demo program for working Routing With Fluro and you’ve learned how to route from one page to another page using the fluro package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
