Build 5 Apps in 5 Minutes with Flutter… But should you?
Vložit
- čas přidán 9. 07. 2024
- Flutter makes it possible to deploy your code to iOS, Android, MacOS, Windows, and the Web. But what are the pros and cons of cross-platform development? fireship.io/tags/flutter/
#flutter #code #dev
🔗 Resources
Flutter Web flutter.dev/web
Flutter Desktop flutter.dev/desktop
📚 Chapters
00:00 Cross-Platform Development
01:08 Build 5 Apps
05:48 Flutter Pros & Cons
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font - Věda a technologie
For the newbies, never forget that the best language/framework/whatever is the one you actually make something with. Completed projects are better than over optimised unfinished ones.
!Save
:wq
The "Why you shouldn't learn..." attitude on CZcams bothers me a bit. It seems especially prevalent for CS videos. I get that time is limited, but why discourage people from learning and exploring?
@@Wander4P bruh 💀 lmao same
@@Wander4P I don't understand what is the relation between your comment and the main comment, what is it?
it’s not all rainbows and Flutterflies
Bruh
Too much humor
hurts my soul to be the 421st like, but alas this is too good
One thing they have in common: they all have blue logos 😂
6:00 😀
It’s a basis in Ux colour psychology for a reason
🤣🤣
i guess it has something to do with *blue perfumes* since blue perfumes' scent _mostly_ are *accepted by anyone*
😂
There are actually two ways of rendering flutter web apps. One as you have shown with canvas, it weights more, but have better performance. (Skia engine is downloaded to the broswer) and there is the second one (new) that translate to HTML CSS and JS.
you forgot one: the auto mode. i have tried all three of them, and I like the html more in terms of compatibility and loading speed. the canvaskit mode is better though in terms of consistency, but since I found a bug when opening my flutter web app in mobile using desktop mode, I still prefer the html mode.
@@ulbsualbrykya7141 that's right, text and some other elements disappear when using canvaskit on mobile, html seems to be stable though but I still have noticed some weird behavior every now and then like the color of svg images don't change when using the svg library, I'm sure this is a bug in the package itself but still, using html reduced download size of the website by 2MB which can be a lot on mobile data speeds
what about accessibility on canvas?
@@archmadthere are accessibility widgets you can use
1:27 "delete_me" *proceeds to keep the folder around for the next couple of years*
LOL, that wasn't supposed to make it into the final cut.
@@Fireship it never is buddy, it never is...
It's his working folder. Every developer has one. You clone repos and delete it out of frustration
@@rakeshchowdhury202 I use /tmp/ for that purpose, I don't even have to wipe it myself
@@TheJobCompany Lmao
We don't deploy to Mac/Windows (that's why we have web apps!) but we are quite happily building an IoS/Web/Android app for 100K+ users, while using native styled widgets. Takes a bit of scaffolding to set up that way so it's intuitive for devs (eg. setting the widget themes in the build context rather than within a widget) but it works pretty well for us! We also use automated testing to compare the appearance of different widgets during pull requests, helping us diagnose layout issues.
can i have any of ur social media account?
Which app are you guys making?
@merthyr1831
Great video as always! 100% spot on with everything. We're building a desktop Mac / Windows app. Also multiple mobile apps and only 1 mobile and Web application. As you know I'm a bit biased but it's been such a great experience.
This video is what I will recommend if asked about flutter going forward :D
Where I work, we mostly create apps for internal business uses. The greatest thing we ever did was to ditch native apps all together and just use PWA's.
Do you build them with React or vanilla js, how do you implement push notifications, a service or roll your own??
@@lardosian We use React, however I'm not quite sure about push notifications. The apps we make tend to be around data collecting or electronic forms, so we don't really need push notifications, but that is probably a question I would need to ask the devs where I work about. I can find that out for you, and I'll reply to this comment 👍
@@tikeyike Thanks dude, I have tried one signal which is quite good and a cheap alternative called webpushr, hooking up and properly understanding PWA service workers is quite tricky.
Yes PWAs are great and I am in love with them, but I am a back-end developer 😄
@@anshulpandey1 bhaiya is it possible to be a react/next developer without any degree? i am hoping to boost my portfolio through freelance but i dont have any degree ..
Well, it is easier to create a plugin in all platforms to support a feature than to recreate an app for each. Flutter is on the right track to be the best framework for building UI. Using it for mobile is an awesome experience. You still need to know how to develop for the native platforms because there are configurations that will need to be done at some point. Great video btw!
But it still lacks a visual editor like native Android
@@talkysassis It doesn't need one. Doing everything programmatically makes everything simpler.
@@thelittlesagg2 In my opinion the raw ui code is a mess
@@talkysassis i don't know anyone who uses the Android visual editor to create the layout, everyone I know writes the XML and observes the preview
@@talkysassis thankfully it is your opinion
Looking forward to your new Flutter course!
There is a Flutter course ? Where ??where ?please tell me
@@ranjmahmood2429 fireship.io
btw, he said it will be available in a few weeks
@@puriwatw.1323 thank you very much
Could you recommend any good and free Flutter and Dart courses? I am struggling to find a good one
6:33 if I understood their blog post about it, Spotify uses React throughout their platforms, with different wrappers around the clients to interact with the hardware and the platform
Yeah web and desktop are unified, but I think they have native mobile and TV clients.
can you link the article please?
We do a similar thing where I work. We use React to develop web apps, however if a client wants their app to be in the app/play store, we put a wrapper around it, so we can lodge those apps into app/play store. We've noticed that most clients or customers can just use PWA's over native or wrapped web apps because most of the web apps we develop are for internal business uses rather than public facing apps.
@@tikeyike Wrapped web apps are perfectly fine for a lot of use cases. Most apps are just data portals with limited functionality and need to be connected online to work anyway. It might not look Appley or Androidy, but it'll be functional enough.
As far as I know Spotify’s dekstop app is built with Electron JS framework on MacOS and Windows.
The flutter vs react native is so much like console wars, everyone throws crap about the other one.
And PC players look at them laughing because they don't need 80% of what the console players call arguments (game catalogs, controllers, system, online services): PC players are native devs.
And console players don't bring any actual arguments, just like flutter vs react native :)
@@androov2797 pretty much, it all boils down to preferences.
@@charlesm.2604 yeah
@@charlesm.2604 but console bois got exclusive
I agree with the drawback, I tried React Native Web and its definitely not easy trying to make the UI looks good and functions well in Web and Mobile. At the point, where it’s easier to wrote two codebases
Your biggest fan from Zimbabwe - We're all millionaires over here
That part killed me😂😂
For a moment I thought to myself: wait that looks familiar, and then it hit me 😂 🤣
hey now, we got that cash..lol
Cheers from Romania, where your currency means more to us than you would expect
@@netics2 cred ca faci confuzie cu botswana
Man, your Flutter videos are always insane ⚡ Thanks Jeff 🙌
Quality content. 700k well deserved. Hoping for 1M by end of this summer.
Aah yes!, The blue logo...
What? Xamarin right?
You just made me realize something super awesome about Flutter! No XSS injection (Not totally, but it's harder)
"One Hundred Trillion Dollars" is how much you should be paid for making these videos 🔥
Your valuation system is broken
@Yes Yes who tf asked
@Yes Yes stfu
He already gets paid that much. (After accounting for future inflation)
As someone from Zimbabwe, I approve this message
To answer your question: Skype is built using React Native (Skype is running on web, Android, iOS, Mac, Linux, Windows). Thanks for the amazing video! I love your way of editing. Thanks!
Nice info, thx
Your videos are SOLID, man! You make the tedious stuff engaging, you speak hyper-clearly and concisely, you know your sh%!*! THANK YOU!
I think Flutter for desktop or web is nothing more than a nice bonus for your mobile app.
Desktop and web are both missing a lot of widgets that are fundamental to these platforms and desktop is even missing basic functionality such as multi window or video playback.
The subtle jokes here are hilarious 😂
البرويطة
@@imadbouteraa4144 دين الزفت واش جابك هنا
Discord is actually supported on Android, IOS, Windows, Linux and in Browser, and I think they did a great Job at having a great experience on all. I'm not sure but I think Desktop & Web are built with react/electron and mobile with another framework like flutter.
Discord on linux is not a good experince. To this day it doesn't support wayland full screen sharing nor screensharing with audio
Not many people use linux discord more like spotify works great on every platform i would say netflix but there isn’t a netflix destop linux version
6:32 Im not sure if you meant that as "any apps with a single, shared codebase", but there are heaps of applications with mobile, native and web clients, I would say notion is the one which has the most unified experience
thanks I was obsessed with React and now with Flutter
I am currently learning flutter. Goddamn I love your short introductions: simple enough to understand.
Great video! Thanks for the cool ideas!
thnx for pros & cons. this section alone felt much better than most other bulk produced fireship vids.
Yeah, but let's keep in mind that Flutter is a complete new framework, it needs time to become the standard with awesome performances and 100% crossplatform compatibility, anyways nice video as always!
This was amazing! Thank You!
Brilliant video. Thanks Fireship
Always awesome video as usual, thanks
very enlightening, thanks!
Awesome video! More cross platform videos please!
What would be interesting is if you could use Flutter as an Angular Control so that you could embed Canvas elements written in flutter into your Angular App. Like Flutter Islands if you will.
Yesterday I was searching how Telegram's whole ecosystem of apps is so fast, like what stuff do they use to make it blow everything else in the water. Answers on Reddit most people gave were mostly that they have different teams working on different apps, they have a separate codebase with all native technologies for that platform. Also, they have built custom protocols for their APIs to be fast. Love it.
Just in time Jeff 🔥
I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi).
Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool.
Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.
Seems like a thin line between a CMS and any statically typed languages (Dart on this case). This approach will get closer and closer in the next years throughout frameworks.
That "everything is rendered in a canvas" thing for web sounds like hell on earth regarding accessibility issues :O
Nowadays you can choose to translate to html and css, and it works pretty well in my experience
So glad there is Flutter again :D
As a beginner, my solution has been PWA's and let the user just install it that way.
@@jack.clayton Yeah I guess that can sometimes be true, new minds and new ideas. So far it's working beautifully across every device I've tested it on, and it feels very native on Android and PC so I don't see the point of splitting my codebase.
PWA ftw!!!
@@dethcx22 how are you building it?
React ?
If yes do you have any recommended Tutorials ?
@@ko-Daegu I'm using Vue 3 with the Composition API, using Localbase for local storage, Tailwind for UI and Workbox for caching the required files.
@@ko-Daegu Blazor supports it out of the box without extra configurations if you do a wasm project
Angular + Firebase for web.
Flutter + Firebase for mobile.
That's how it is at my workplace.
awesome work as usual
The good thing about this library is that for simple enough apps, it really does just work. But then as soon as you need to do anything even remotely advanced, it falls apart the same way as React Native does, because it has seriously limited access to certain features of your device. For now writing native is still the power move
Hey Pal
I'm making my final year proj and i'm a bit condused between react native and flutter
I've tried react native earlier in my internship and I agree to your comment that it's quite tough to find packages that work well on all three and most of them are depracted
But learning flutter means learning an entire new language and my app itself is a bit complex for me
should i consider learning flutter or will react work ?
Awesome inshorts 😌
Your main critique was that it rarely makes sense to target all five platforms with a single codebase. I disagree strongly. It might not make sense to use literally the same code - but that doesn't diminish Flutter's advantage. For instance, you might have a desktop gui and a movile gui. The two will be completely different, due to different input methods, aspect ratios, etc. But it is still highly likely that you will use a lot of code for both platforms. You might even share graphical widgets between them. How you stitch them together might be somewhat different, but sharing code between platforms is invaluable. The same holds for the web - I'm sure it's pretty simple to expose your code as an API, which you might use to build a webapp using a different framework. Think of how luch code actually defines your GUI, versus how much is simply logic.
Solid video, thanks!
Will your new Flutter course be targeted entirely at beginners or will there be more advanced topics for us intermediates? :)
Love your video style and will 100% be buying your course if it's not just all about basics... or well honestly I'll probably buy it no matter what.
This was insightful.
Hello :) Nice vid, but how did you get the color preview box before row number? Is that some extension?
6:00 OH MY! that cracked me up WAY to heavy 😅 LOL
Flutter! Need to learn complete from low to all corners. Maybe one day or today!
Build 5 Apps in 5 Minutes
Also, let me just paste a few hundred lines here and there XD
and lemme pause and come back after it launched
Not really, it seems he pasted a few snippets in between the scaffolded example code
Pasted nothing
It’s all ctr+z
Also 5 min for explanation not actually writing
Waiting for the flutter course 😍
I frikin lost it when you said one thing they have in common is they all have a blue logo. That was hilarious bro. 🙏😍🙌🔥🚀
That thumbnail just made me realize the Flutter logo is an F. I thought it was some sort of left chevron
I'm falling in love with Flutter
Wow amazing brother ❤️
Discord is pretty solid across all systems/devices.
I recognized that money picture you used here...I'm proud being a Zimbabwean and I'm watching code report🙂...
kivy is also there for cross-platform development 😉
Thanks for informational video, Jeff.
How about "Dart in 100 secs" soon?
Please make more videos about yourself, I know it is hard to make videos as it takes a lot of time to editing and overall to make them. But we will be happy if you make videos on your other channel without any editing as it would be good for us to know more about our favorite developer and Try to make a Q/A video
Please Let me know if you will try
+1 for a Q&A video
on windows it could save it into an sqlite db or when it runs with chromium with index db or local storage
Interested to see how MAUI will do against existing multiplatform frameworks
Love the joke towards the end 8:39 Savage!
What extension was used to have the color preview in the margin of the code? It looks really nice!
Awesome!
Awesome 😀
nice video 🔥🔥
The reason at 4:05 the initial colour is black is I think because the app queries shared preferences without any checks, so the very first time an app launches, shared preferences can’t find any colour.
Somehow CZcams decided that this is Korean. The automatic subtitles are locked on Korean xD
Wow Flutter looks cool. Like a Javascripty Java.
The world needed this video
Flutter is lob♥
Discord is an app that runs very well and works basically the same on all platforms
Yes! and the minute we start conecting it with WEB API.. hell breaks loose!
C/cpp/JavaScript interop is also great, as well as using kotlin as a replacement for Java- awesome video as always! 🔥🔥🔥
5:57 ohh .. what an observation - blue logo
You are a beast ❤️❤️
Hi Bro! I would like to know what backend language do you recommend to use with flutter? Do you think there is one that is worth more than the others?
Nice! Witch VS Code theme do you use It?
At 06:30 you mentioned that you don't know any app that targets windows, macos, ios, android and web. Discord is such an app right? I don't know if they use Flutter (thought they used Electron).
6:21 proud of my country and our Zim Dollar 😂
6:01 😭 omg this joke had me rollingggg
I started flutter after this video 😆🤩
I would add that you can in fact with one code-base create apps that look different on mobile, tablet and desktop because Flutter does not only have media queries but also OS queries, so the sky is more or less the limit. When it comes to plugin hell, in my experience Flutter has a ton of very high quality plugins. Also, plugin hell if you ask me is worse in web apps where dependency-trees at this point are nigh impossible to follow. Quality is relative. As with everything, use the right tool for the right job.
Android/iOS : flutter / react
Pc : electron.js with node.js
Web : are you kidding me ?
Every developer dream multi platform app with one codebase
Is flutter\dart only for simply apps, or can you also build complex user interfaces, with dynamic layouts, resizable grids, grids within grids, etc? Thanks
+1..
Someone answer please :)
@@paulojamero9670 Sorry for late answer but Flutter or Dart can be used to build complex user interfaces with dynamic layouts, resizable grids, grids within grids, and more.
Discord targets web, mobile and desktop
Best guess Mac and Windows could be using dot files to save the state of the application. Awesome video, love your content
I'm excited for Flutter 2 Desktop to get out of Beta. From my understanding, it would be a good alternative to Electron and Qt.
why is electron bad
@20PercentRendered It's the same for JVM-based applications or .NET who require the user to install the framework version on its machine to run it.
If you're looking for performances then build native. C/++, Rust, etc... should be what you're looking for, not Flutter. If you can't afford native, accept the sacrifices of performances.
@20PercentRendered .NET has the same issue. You need a runtime to run a .NET app for a reason. ^^
@@charlesm.2604 well flutter desktop is still full of bugs in 2024
Omg I've been waiting for this!
Reminds me of this one game engine I worked with once, it aloud you to port your game to legit any platform, it was super neat. Great content!
unity3d?
@@DWBBQ_9394 nah RenPy
Please do a video on multiprocessing,multithreading and asynchronous
Great Video. So what if we only used Flutter for mobile apps?
would be cool and great if you can do a React Native vs Flutter 2021 (with their latest version)
Ionic is also good for Cross-Platform and JS lovers