Making Mobile Apps Run On the Web With Flutter

It’s not the first time when Matej Rešetár, a.k.a ResoCoder, joins our Flutter Warsaw event. During its 16th edition, he shares more about what you can encounter while creating Web apps with Flutter. We all love building apps in Flutter because the written code runs with almost no changes on all the platforms. Unfortunately, supporting the web complicates things up a bit. From working around through some features that are impossible to do inside a web browser to accessing native JavaScript functionality right from the Dart code. Flutter Web is still not 100% ready for production, and there are also some limitations on what you can do. But if your app falls into a suitable category for Flutter Web, you will definitely benefit from having just one codebase.

Find out more about Matej and his opinion on Dart & Flutter's current development by reading the interview.

Or see our earlier conversation about his beginnings with Flutter.

The presentation contains insights on:

• Flutter Web vs “Regular” Web
• Mindset shift - no division between Flutter Code and Platform Code
• Showing an alert from Flutter Web application
• What to do when a Dart code is broken?
• Using a WebView on the Web
• The importance of importing shims
• When do we import “dart:ui”?

Watch the video about Flutter for web

Questions after the Developing apps for Flutter Web presentation:

1. Dmitry [the 2nd Flutter Warsaw quest], what do you think about Flutter Web? Is it stable enough? What is your impression of it?

[Dmitry Zhifarsky]: I haven’t checked the latest version, but some time ago, we tried to test it - because we had a huge codebase in Dart Angular. And unfortunately, in the current state of the frontend, when you have a lot of micro frontends, the Flutter for Web performance is pretty poor, and we weren’t able to make it work properly. So, in my opinion, Flutter for Web is not ready for huge and complex web apps.

For instance, if you can just add a screen to the native app for Android or iOS and have two worlds coexist with the Flutter for Web, you can’t have one micro frontend app in Flutter and another in React or anything else. Flutter requires the whole screen to render properly, and with a small screen, it starts to render in junks that are not production-ready.

2. Is it possible to do debugging in Flutter for Web?

[Matej Rešetár]: Flutter Web still lacks in many areas, and debugging is one of them. Even when you get exceptions thrown, it doesn’t really tell you as much as other platforms. So, if I need to build something for Flutter Web, I try to catch all the possible bugs on Mobile Platforms mostly. Of course, then you encounter an issue with authorization code flow. You really cannot exchange the authorization code for the access token directly inside your web app.

You need to do it through, for example, a web server or microservice. And when you encounter this kind of issue and can’t debug it because it’s on the Web, it’s quite troublesome to get rid of this problem because you don’t see everything written properly in the console. If you have web-specific bugs or exceptions, that can be problematic, but you can work your way around it.

3. Does Flutter support Dev tools in Flutter for Web version?

[Community answer]: You can use Chrome dev tools, but it’s tricky. It’s probably coming in the next version. Flutter for Web works, but it still isn’t as easy as we want it to be.

4. Can keys pressed in WebView in Flutter be logged?

[Community answer]: It works more or less like many of the web frameworks that you get code mapping. So you can debug inside of Chrome’s dev tools. As I remember from the Dart Angular experience, it had pretty bad debugging too. I mean, HTML and CSS were fine but compiled Dart was a problem. There are several issues right now, e.g., scaling doesn’t work correctly on the web when using canvas kit.

5. I sometimes use keys. But don't really understand the use-case. Can you explain the concept? It would be a great help with an example! I know simple use cases of key but looking for complex scenario use cases.

[Matej Rešetár]: One of them is for testing. The easiest way to select something for the widget test is to find it by key. It’s a quite useful thing. Another use case is for example if you have to list view you don’t want to preserve their state you provide different keys.

[Mateusz Wojtczak]: I think the reordering list is a good real-world use case. Because you have the same things but in different order end. This is the case that you can actually get in commercial applications when you have your lists to switch places in some business application.

6. Talking about widgets, how do you decide which widgets to provide keys? I mean everything is a widget in a Flutter. This is something I always face problems with.

[Mateusz Wojtczak]: I can only say that after Navigator 2.0, at LeanCode we just use Navigator 2.0 with some of our code. But I know that people also use different packages.

[Dmitry Zhifarsky]: I have heard a lot of good reviews of go_router but I have never tried it. I also use Navigator 2.0. in my projects.

[Matej Rešetár]:  I use AutoRoute, and it uses code generation, so again, if you have a large app with many different pages to navigate between, it may not be very optimal. Because yes, you save time while writing a code, but when the code is generated, you may actually lose a lot of time. But I do like it. The other option is using go_router. I have not used it myself, but I know you need to write more code upfront because it doesn’t get generated. Still, it provides a good base for using Navigator 2.0.