Learn Flutter & Dart like a pro — The Basics
Want to learn Flutter & Dart to build great apps? Then you’ve come to the right place!
In my brand new series, I will take you from a beginner to a pro!
I’ll explain the concepts of Flutter & Dart, do tutorials on how to build apps and much more! The whole thing is 100% free of course!
If you don’t want to miss this, you should follow me now as I will try to post an article every week!
Today we’ll start with the basics. What is Flutter and Dart anyway? How can I install both of them? And how can I be 100% productive?
We’ll clear all that up today. And with that, I say: Happy reading!
What is Flutter?
Okay, first of all, let’s put ourselves in the shoes of an app developer. Our developer’s name is now Dominic. He is an Android developer and loves to work with Kotlin. But now he wants to publish his apps on iOS as well. To do that, he would still need to learn the Swift programming language. That in itself is not a problem.
Now he has a great app idea. First he develops it in Swift for iOS. Now he has to write the exact same app again in Kotlin for Android. After the app works very well, he wants to develop a website for it. For this he needs HTML, CSS and JavaScript. Now Dominic already had to write his app 3x. Now imagine he wants to publish it for Windows. For this C# would be the best.
Okay okay, I think you get the point. It’s extremely time consuming to develop the same app for multiple platforms. And once you’ve done that, you have to change every single code again for updates. This can be very problematic for larger apps. In this case, Flutter can help you. Flutter is based on the Dart programming language and can build Android, iOS, Windows, macOS, Linux and web apps with one codebase. That’s great! Then when you’re done with your app in Dart, you very quickly get a file for Android, iOS, etc. that you can then publish to the individual stores.
Another problem that Flutter solves is the different screen sizes. Dominic now has to make his app look good on every screen. But this can be very hard, as there are thousands of different Android models, thousands of different Windows screens, etc. Flutter has managed to develop a system that makes it possible to make the UI look good on any screen.
You can probably already tell, Flutter is great. Flutter is technically a UI kit. It was created by Google and is free and open source.
That’s all you need to know about Flutter for now. But now let’s take a look at what Dart actually is, because Dart is the heart of Flutter.
What is Dart?
Dart is a programming language designed to create fast apps on almost any platform. It is meant to be a modern alternative to JavaScript, especially in web browsers. It is, like Flutter, open source and 100% free. It also has special features like Hot Reload that make it extremely easy to be productive with Dart.
Installing Dart & Flutter
Now of course you want to know how to install Flutter & Dart. I’ll link you to the installation for various operating systems below, choose the one you have and follow the steps there. If you downloaded Flutter through these websites, you automatically downloaded Dart as well.
Windows Install: https://flutter.dev/docs/get-started/install/windows
MacOS Install: https://flutter.dev/docs/get-started/install/macos
Linux Install: https://flutter.dev/docs/get-started/install/linux
Chrome OS Install: https://flutter.dev/docs/get-started/install/chromeos
To be able to program in Flutter & Dart, I definitely recommend you VSCode, as it is most used by Flutter developers and is very handy.
You can download the Visual Studio Code here:
Caution: In this course I will not explain how to use VSCode. You should already have experience in other IDEs and learn VSCode on your own. There will be a tutorial series for VSCode from me soon, but at the moment it is not known when.
But now we want to install some more things that make it even easier to use Flutter. Robert Brunhage made a video about this, which you should check out:
Robert Brunhage — The Ultimate Flutter Setup: https://www.youtube.com/watch?v=HhumfOSYFNc
Since not everything is really direct for Flutter, here are all the timestamps you should definitely check out:
Extensions: 0:26–3:41
2:26 Pubspec Assist — Since version Flutter 2.5, the standard Flutter extension has exactly the same features built in as Pubspec Assist, so you don’t need to install that package anymore.
Snippets: 3:41–4:40
CI/CD: 8:37–9:59
FVM: 9:59–10:53
In this video is not properly explained how to set up FVM, that’s why he made a seperate video about FVM, where he explains what FVM is, how to set it up and use it in his projects.
Robert Brunhage — Flutter Productivity Beast — FVM: https://www.youtube.com/watch?v=l5HsXg5KlYE
There are many more extensions that are very useful. Browse around in VSCode and try different extensions.
Conclusion
That’s it for today. The next articles will be a bit more practical as we will learn a lot about Dart & Flutter. You will get a detailed introduction to Dart and learn a lot.
Thanks for reading! If you have any questions or suggestions for improvement, feel free to write them in the comments.
I would be very happy if you could give some claps to this article. This supports me a lot and motivates me to write more articles.
Oh… I almost forgot: If you want to follow when another article on this series will be published, you should definitely follow me!
Have a great day!
