Flutter Heroes

New post on /r/flutterdev subreddit:

Some observations about the Flutter router and opening nested routes on the web. onGenerateRoute is called multiple times.
TLDRI request an initial route of /home/1/2/3/4/5 , but onGenerateRoute is called 7 times, 7 states are allocated and 7 widgets are built. One is expected for each.Solution: Use onGenerateInitialRoutes to override the default behavior.Deep Dive:I'm going to share what I've learned out of my own research when facing this issue.When opening a deep link, the flutter router recreates all the prior router/history states of the app.This means that the back button can return the user trough all the screens needed to get there even if it got there via deep linking.This behavior makes sense for mobile devices. However, on the web, this behavior is not wanted.If we load a deep link such as: http://domain/s/lorem-ipsum/all/posts we end up initialising each route level if it has it's own screen definedIf you happen to have the same component on all levels this in turn leads to 5 sets of duplicated API calls which is completely unacceptableTherefore we can use onGenerateInitialRoutes to prevent this behavior from occurring.The default history stack is overridden with a router/history stack with just one statemain.dart

... return MaterialApp( ... initialRoute: user != null ? '/' : '/login', // The default history stack is overridden with a router/history stack with just one state // In this case I used fluro but any other onGenerateRoute method will do the trick onGenerateInitialRoutes: (initialRoute) => [appRouter.generator(RouteSettings(name: initialRoute))!], onGenerateRoute: appRouter.generator, );

router.dart

final appRouter = FluroRouter(); void defineAppRoutes() { final routes = { // Auth '/login': LoginPage(), '/register': RegisterPage(), // Pages '/': MainFeed(), '/s': MainFeed(), '/s/:spaceId': MainFeed(), '/s/:spaceId/:activityId': MainFeed(), '/s/:spaceId/:activityId/posts': MainFeed(), ... many more such routes }; routes.forEach((route, page) { appRouter.define(route, handler: Handler( handlerFunc: (BuildContext? context, Map<String, List<String>> params) => page, )); }); // Not found appRouter.notFoundHandler = Handler( handlerFunc: (BuildContext? context, Map<String, dynamic> params) { return NotFoundPage(); }); }

Performance/Billing concernsSome of you might be using Firebase and possibly planning to run an app with high volumes of traffic. Therefore it is quite important to pay attention to what your router does. You might be sending requests for more data than what you actually need to load for your first view of the app. Especially for sharing links on the web this might be costly if you don't optimize your API calls. Since Firebase does everything via websockets make sure you either place print statements in all your API calls or you can also switch to json-server during development to get a better view of the HTTP calls in the developer tools. There are many ways to handle this optimisation. What matters first of all is to be aware of your API calls and how many. I was able to generate 15K api calls with 3-4 work hours using an unoptimised version of my app.Final NotesinitState will be called as many route segments as you have unless you override onGenerateInitialRoutesbuild is called as many times as flutter thinks there's a change event. As long as you don't do any complex logic or any API calls during the build stage it's not that bad. Similar to React or Angular the change detection algo makes sure that if duplicate builds happen only the relevant changes are computed.I'm still learning some of this stuff so please excuse me if I used some wrong terms. Let me know how can I improve this post or if got something completely wrong. Hopefully it helps you.

November 11, 2021 at 01:31PM by SpaceInstructor
https://ift.tt/3F4wiBV

Some observations about the Flutter router and opening nested...

**TLDR** I request an initial route of **/home/1/2/3/4/5** , but onGenerateRoute is called 7 times, 7 states are allocated and 7 widgets are...

1.5K views13:14