What is Flutter?
Today we’re gonna take a look at the topic, you may have already noticed above, what Flutter is. (Thanks to Captain Obvious for this introduction)
I’m trying to explain it even to people who don’t have the slightest clue of programming, so please excuse generalizations at some point.
General Overview
Flutter is an open-source mobile SDK developed by Google. Developers can use it to build native-looking apps for Android, iOS, macOS, Desktop, ChromeOS and Web from one single code base.
(Maybe I missed something, feel free to react for addition)
Google officially launched it in December 2018 after Flutter was in beta stage for around three years since 2015.
Flutter compiles AOT into native ARM and x86 libraries, which allows its fast performance.
But wait, what is AOT?
AOT stands for “Ahead-of-time” which means that Flutter compiles your written code before it’s actually “used” in the app.
Mainly we distinguish between JIT (Just-in-time) and AOT (Ahead-of-time) compiling.
If your application is compiled JIT the program will basically compile your code right at the moment you need it.
AOT, for example, compiles the whole code before you need it, which has the advantage that your application is much faster than applications compiled JIT.
Flutter uses Dart as its programming language. Dart allows Flutter to target the web with fast compilers for JavaScript, run backend code written in one single programming language and, as already mentioned, AOT-compiling.
Dart also enables hot reload, which is one of the greatest features of Flutter, in my opinion, and allows the developer to instantly see the effect of code changes in the running app.
Development speed is very fast and easy because Dart is optimized for building user interfaces with a bunch of features such as collection if for customizing UI or spread operator for expanding collections.
In addition to the fast development speed because of Dart, the development of an application for multiple platforms is even faster because you only need to code this app one time!
Hot reload
Let’s focus on this hot reload thing for a few seconds. Why am I so hyped because of this?
If you are a programmer you may know why. If you’re totally new to programming let me explain my joy about hot reloading in development to you.
Close your eyes and think about the following situation…
(I know reading with closed eyes is hard, but keep pushing guys! I know you can do it! :D)
So let’s say you are developing an application in a programming language that doesn’t support hot reload.
You are working on this stunning UI and you now want to know what a different style for this text input field looks like. In order to see what it looks like you start changing your code, save the changes and then you need to rebuild the application to see what the change looks like.
Let’s say your machine takes about 20 seconds for this progress.
That’s only 20 seconds? What do you want from us?!
What if I told you, that in Flutter you don’t need to rebuild your app, neither you have to wait just a single second to see your changes?
Exactly that is what hot reload does! You save your changes and Flutter automatically hot reload your running app within milliseconds.
Now think about how much time you save using hot reload. If you need to rebuild your app five times, you already spent one minute waiting. Now do this 55 more times and you spent an hour waiting for rebuilding.
In comparison, Flutter takes for the same amount of hot reloads not even a second!
But even in Flutter, you will have some dark times once in a while and you need to actually rebuild the app. But I guess that’s alright in view of the time we save hot reloading.
Error messages
Yeah, you noticed it already, you fucked it up again.
Just kidding.
As you code your way through the worlds of ideas you may get one or another error.
A really rare situation, I know! ;-)
But when it comes to this akward situation you will spend a lot, and I really mean A LOT, of time debugging this disgusting mess you’ve produced.
And here comes another quite useful feature of Flutter. The error messages.
The Flutter team giving their best to make error messages as useful as possible.
As you can see the error message itself is quite self-explanatory. In this case, the list that you want to pass to the first page is null.
Possible solution? Exactly, pass a list that isn’t null. (HAHA funny!)
Always when something went wrong in your development process and you’ll get an error it is quite helpful to read the whole error message including the parts with line indications. Most times you know pretty exactly what went wrong and sometimes already with a possible instruction so solve it.
How does a basic app look like?
Everything in Flutter is a widget. With these widgets, it’s actually pretty easy to style your app pages.
I will show you a quick insight into the basic code for an example application.
We will cover developing your first app more detailed in another article.
Packages
You can always expand your projects with a huge amount of packages available at https://pub.dev/
You can find literally everything you need for expanding the functionality of your apps without crazy amounts of effort developing all features on your own.
How to implement these Packages into your apps will be covered in another article.
Conclusion and why you should consider using Flutter for your next project
If you want to increase your whole development progress and build native-looking apps for multiple platforms in your next project, you should definitely give Flutter a try!
With Flutter, you can also assure that the app looks exactly the same on all different devices and platforms.
Flutter is definitely a tool with huge potential and I guess that Flutter will become a major, if not the major, tool for cross-platform development.
The community is constantly growing, new packages to expand your projects are uploaded every day and more and more companies are looking for Flutter developers.
The Flutter Documentation can be found here: https://flutter.dev/docs
The Dart Documentation can be found here: https://dart.dev/guides
In the next article, we will focus on how to setup Flutter on your machine and create the first project! Keep hyped guys!
I hope you enjoyed the article and I was able to bring you Flutter a little bit closer and made it understandable.
If you have any questions, or if I get anything wrong here, please react below or hit me up on Instagram ( https://www.instagram.com/qubeta_apps/).
You can also send me an email to info@qubeta.de
