Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”. This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money
This article focuses on using Flutter and Fluro to navigate as they would on the Web
Fluro is a routing library that handles some of the basics for us and gives us some Web-like routing capabilities. In this tutorial, I’ll show you how to set up Fluro, use built-in transformations, and use Web-like routing.
Set up the
We first added Fluro to our project.
Fluro: 1.4.0Copy the codeThen, in the same way as the routing tutorial we named it, we’ll create a new file, this time called fluro_router.dart.
import 'package:fluro/fluro.dart';
class FluroRouter {
static Router router = Router();
}
Copy the codeFluro provides you with a router where you can define pathnames and the variables it receives, similar to routing in some Web frameworks. We’ll create a static method that can be called from Main before the application starts running.
// In fluro_router.dart class
static void setupRouter() {
}
// in main.dart
void main() {
FluroRouter.setupRouter();
runApp(MyApp());
}
Copy the codeNow we can define our handler. To define a route, you must provide a handler. The handler has an optional type and a handlerFunc. HandlerFunc takes a context and a Map<String, List> argument and returns a widget. The returned widget is what the router will display. We will create two views to display the navigation.
class LoginView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.yellow[400], floatingActionButton: FloatingActionButton( onPressed: () { }, ), body: Center (child: Text (this. RuntimeType. ToString (), style: TextStyle (fontSize: 23.0, fontWeight: fontWeight. Bold),)),); } } class HomeView extends StatelessWidget { final String data; HomeView(this.data); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue[400], body: Center( child: Text(data, style: TextStyle(fontSize: 23.0, fontWeight: fontweight.bold),); }}Copy the codeThe home view accepts a string, and the login has a floating action button to which we will add the navigation call. Before we could navigate, we had to use Fluro to define our route and provide handlers for it. To log in first.
static Handler _loginHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
LoginView());
Copy the codeLogin is a static Handler variable with a handlerFunc that returns LoginView. Quite simply, we still need to register handlers with the router. To do this, we use definitions.
static void setupRouter() {
router.define("login", handler: _loginHandler);
}
Copy the codeHere we tell the router to call the _loginHandler I defined above when namedRoute login is pushed. There is only one thing left to do and we will complete all the Settings to display a view. Go to the main.dart file and provide the generator for the Fluro router for onGenerateRoute. We will also set up the initial route to log in
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( initialRoute: 'login', onGenerateRoute: FluroRouter.router.generator); }}Copy the codeIf you run it now, your application will launch at login and you are using the Fluro router 😁
Navigate as you would on the Web
Fluro navigation is associated with the Flutter Navigator, so the navigation remains the same. You pushNamedRoute it will determine the widget you expect to be routed through the route defined by Fluro. One of the cool things about Fluro is that you can navigate and pass query parameters. As an example, we will define a route for HomeView.
// Define the home view handler
static Handler _homeViewHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
HomeView(params['userId'][0]));
static void setupRouter() {
...
// define the route
router.define("home/:userId", handler: _homeViewHandler);
}
Copy the codeThe handler is almost the same, except that the userId is used to index the params value and pass the first item there. This userId is defined in the setupRouter function using the path “home/:userId”. ‘:’ tells Fluro that you are passing a parameter to the path, and that they should extract it into the Params map for you to use. Finally, we must actually navigate the main view. Go to the login view and add the navigation call in the onPressed function.
. floatingActionButton: FloatingActionButton( onPressed: () { Navigator.pushNamed(context, 'home/90'); },),...Copy the codeWe will use Navigator and push a named route, passing 90 as the user ID. If you run it and press the button, you will navigate to Home with a value of 90 displayed on the screen.
The transition
Fluro has a few built-in conversions, to be exact:
enum TransitionType {
native,
nativeModal,
inFromLeft,
inFromRight,
inFromBottom,
fadeIn,
custom, // if using custom then you must also provide a transition
}
Copy the codeYou can define a transition for each route, and we’ll just use fade out to keep it simple and show functionality. You should play around with these values and check them. In the router file where we defined the route, add a new property at the end and pass in the desired transition.
static void setupRouter() {
router.define("login",
handler: _loginHandler, transitionType: TransitionType.fadeIn);
router.define("home/:userId",
handler: _homeViewHandler, transitionType: TransitionType.fadeIn);
}
Copy the codeMultiple parameters
If you are passing multiple parameter values, you do not have to define any of them in the path. You simply use Navigator to navigate and pass it as a normal URL query parameter. This will make it available in the handler’s argument function. For example, you can deeply link login paths.
// Example push Navigator.pushNamed('login? name=FilledStacks&account=2'); // Handler static Handler _loginHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { var name = params['name']? .first; var account = params['account']? .first; // Use name and account values return LoginView(); });Copy the codeIf you’re not passing complex objects, this is a very convenient way to set up routing.