Top 8 Pro Tips for Flutter Web Apps using Firebase

Показать описание

Written tutorial here: 👇👇

If your already have a Flutter mobile app, you can port it to web with minimal effort and nearly 100% code reuse.

But there are a few things that you need to be aware of. In this tutorial I'm sharing 8 top tips to save time in your Flutter web projects.

HIGHLIGHTS

00:00 - Intro
01:32 - Tip #1: Use --web-enable-expression-evaluation
02:15 - Tip #2: Develop on the iPad simulator
02:44 - Tip #3: Enable Firebase Hosting for the project
04:45 - Tip #5: Handle Cross-Origin Resource Sharing (CORS)
06:33 - Tip #6: Enable copy-paste in your Flutter web app
07:20 - Tip #7: Conditionally import files at compile time
08:46 - Tip #8: Check if we're running on web at runtime

USEFUL LINKS

Want more? Check out all my Flutter courses: 👇👇

Рекомендации по теме

Комментарии

Crazy, very nice & helpful information

abdouseck

I just bought your course, and excited to learn more flutter.

hw

nice, I had some of these issues. Really helped me. I had also the same issue with cors and I found a quick and dirty solution until flutter teams fix this. My backend is in PHP.

nagas_dev

Thank for the tips Andrea, some known and some excellent ones I just learned about ! :)
Regarding the last tip, I saw you already amended the written tutorial with the kIsWeb constant tip. To any other passing by video viewer and comment reader:
TLDR: The global constant kIsWeb is defined in constants.dart and exposed by foundation.dart. It is true if the "platform" is web and false otherwise.
The constants.dart also contain other for useful constants that are also helpful/useful, well during development at least. For more info on kIsWeb check the written version of the tutorial to this video (that apparently was updated after this video release) where it is properly explained.

rydmike

Perfect, just what I was looking for, thank you!

jrheisler

Thank you. This tips are really great!

mix-coder

Great suggestions! One question - you mentioned @2:22 (*1) that HotReload is still a bit flaky. But the flutter docs say it's not supported at all (#2)
. And constantly pressing "R" in the console to force a restart is a pain.

Is there a way to get Flutter Web to HotReload or HotRestart _automatically on save_ - or is that why you suggested targeting iPad or Android Tablet?

jedson

Thanks. The Flutter-team has still a lot of work to do...

leonvanrijswijk

thank you, is perfect :) more examples please.

thesaulo

Thanks a lot for the valuable tips. What is the best way to store api keys or tokens in my Web App project? I guess storing them as String in a regular Dart file is not secure. I am using Android Studio Thanks

aliakkawi