Despite it looks intimidating at first glance, the evolved Flutter navigation system could solve more issues than it seems to create

During the second half of 2020, the Flutter team introduced a revamped navigation and routing system called Navigator 2.0. The reception by the developer community has not been great so far: principal criticisms regard the API complexity and the absence of an extra abstraction layer for common scenarios.


In a previous article I discussed about freezed and kt_dart, a couple of packages that bring immutable value types to Dart and Flutter. I omitted to cover a free feature exposed by freezed: the integration with json_serialializable.

Installation

First of all, add the dependency to pubspec.yaml file:

Then, edit your immutable object declaration like this:

  • You need to declare another part file with .g.dart suffix.
  • You need to declare a new factory constructor called fromJson and to bind it to a synthesized deserializer provided by freezed generator.

And that’s it! It just works!

If you provide wrong types or…

When I started developing Flutter apps, I also met the Dart language for the first time in my life. I was quite surprised to notice that the Flutter team chose a language that does not support immutability extensively out-of-the-box. I still think that’s quite strange, in particular if you compare it to Swift UI that is deeply rooted in value types.

Let’s explore our alternatives.

The naïve immutability

First of all, let’s see what Dart (at current version, which is 2.8) provides out-of-the-box.


I’m not too convinced that cross-platform UI will ever be a real thing in terms of final product quality (btw, I think a real thing might be Kotlin Multiplatform logic + native UI layer), nobody can doubt that tools like Flutter or React Native are really effective if we talk about quick prototyping and deployment.

Flutter, in particular, helps a lot to deliver a good looking Material Design app with a few lines of code. But a Material app is not and will never be a real iOS app, so you need to use Cupertino widgets duplicating a lot of…


First things first: what is Next.js?

A small framework for server-rendered universal JavaScript webapps, built on top of React, Webpack and Babel.

It comes out of the box with preconfigured features like routing, static optimization, server-side rendering, code splitting, CSS-in-JS support, hot reloading and API routes à la Express.js,

Deployment to ZEIT Now is super easy but I would like to explore to possibility to deploy my apps to Firebase Functions, in order to have a central common point for database, analytics, advertising and hosting.

There are not as much sources as one could think, given Next.js and Firebase popularity…


I was reading again my article about Jetpack Navigation, in particular the part regarding the parameters passed to destinations. I can pass small serializable objects, but what can I do to pass more complex stateful objects?

How to pass the baton to next destination?

When you navigate to a destination, a fragment is automatically instantiated with direction parameters archived in a bundle. We have not an initializer to call, so we cannot pass the baton to next fragment. Google states it clearly:

In general, you should strongly prefer passing only the minimal amount of data between destinations. For example, you should pass a key to retrieve an object…


From an iOS developer perspective, how screens are presented in an Android is quite strange. The first time I developed an Android app, I was taught to create an Activity per screenful of content. Then, they have introduced me to Fragments, at the same time warning me about their cumbersome behavior and the lack of a proper constructor.

I was so confused and, searching the web for a simple alternative to navigate from a list to a detail screen, I encountered Conductor project. Basically, they embrace a single Activity structure of the project and they introduce Controller objects able to…


A Noob Meets Wep Apps, Episode 7

In previous episode I introduced code splitting without adding any feature. Now it’s time to move on and to code an header component with logo, title and navigation commands.

Layout component

It is useful to create a general layout component to make sure every screen have same UI structure.


A Noob Meets Web Apps, Episode 6

In previous episode we introduced routing. App starts to have a structure: I’ll try to run a production build to evaluate code size.

$ npm run build

A Noob Meets Web Apps, Episode 5

In previous episode I structured my React app using composition of components. Now it’s time to adopt react-router to go from poll list to single poll where user will vote.

$ npm install --save react-router-dom
$ npm install --save-dev @types/react-router-dom

Firebase hosting is already configured to support browser history thanks to global rewrites:

Make first route

I want to make a route to highlighted polls, parametrizing language. I move HighlightedPolls.tsx to app/features/highlightedPolls/component.tsx defining a new module. So I can create routeInfo.ts inside that folder:

If I can detect a valid language in route path I will load highlighted polls in that…

Marco Muccinelli

Call me Muccy. I’m a Senior iOS Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store