With Flutter Web entering beta, our dream of one single code base is getting closer and closer. So I decided to try it out.
I created a portfolio page that looks like this.
The process was much easier than I expected, but also containing some caveats.
Here are my 5 takeaways.
Disclaimer
1. ListView.builder() is your friend
I originally wanted to have a dedicated blog on this site. So I tried using flutter_markdown to render a sample markdown text.
The page performed well on the desktop, but when I switched to Chrome on iOS, I noticed significant frame drops and jankiness.
The reason is Flutter is not yet optimized for large static content. So things like large images, long texts, long ListView will cause performance issues.
After I split the text into a list of Strings and use ListView.builder() to lazy-load the content, the page appeared to be smooth again. But that’s still a no-go right now for blog posting since it would be too much workaround considering there are other bumps I haven’t encountered.
So lazy-load your content. Ideally, using ListView.builder().
Update: This has been partially fixed.
2. Selecting text is weird
This is one of the features that seems small but is really weird without. You can use SelectableText to kinda select a text. But you can only drag and select the text within the widget, which is not what most of us would expect from a web page. You should be able to just keep selecting more text by continuing dragging.
You can follow the issue here.
I also wanted to be able to copy the selected text.
Flutter has a widget called RawKeyboardListener to listen to keyboard events.
But I cannot find a pre-built way to get the selected text from SelectableText. So the user right now can only copy the whole text when pressing Cmd + C. Also weird.
3. Hot reload is not available, yet
Hot Reload is not yet supported on the web. When you do Hot Reload on the web, Flutter will perform a Hot Restart instead.
If you use named routes, Flutter will, however, retain the URL. So depending on your app structure, using named routes will save you some development time.
You can follow the issue here.
Hot Restart sometimes will also not work and get stuck on the syncing to devices step.
4. Deploying is just 1 click away
It was a breeze to deploy my portfolio page. I chose Netlify and followed this article to set up and it took mere minutes.
Basically all Netlify needs is a custom build command to check if Flutter is installed, if not, install Flutter and then build the web in release mode.
5. Flutter is still Flutter, and it’s awesome
All the unfinished features aside, Flutter is still Flutter.
This is my first time writing a website. I couldn’t have imagined the process be any easier, using only basic components like BoxConstraints and MediaQuery to make the layout adaptive.
You can still create pixel perfect UI.
Your app architecture will still work.
You can still do all sorts of crazy animations with ease.
And in time all the native web behaviors will be supported, either by the Flutter team or our growing community.
