In this article, you will learn flutter and dart from scratch and you don’t have to have any prior knowledge. We will start with the important basics and work out all the cool features up to fully advanced topics like working with native features, state management, and much more. You will not only learn theory but also an example-driven approach to building cool applications. And the end of the course you shall have multiple cool applications and be prepared to work on your projects solely. And I am fully convinced that at the end of this course, you will turn into really a good Flutter Developer.
Flutter is an amazing technology that allows you to build amazing mobile apps. And I am very much excited to dive with you in the Flutter.

What is Flutter?

Flutter is a framework or tool that allows us to build native cross-platform apps for both Android and IOS with one programming language and a single code base.

Native cross-platform

Here let’s have a detailed look at this. The first important thing about Flutter is the native cross-platform. We are not building web apps that could run on browsers. We build real apps, Android and IOS which can be distributed single-handedly on the Google Play store for Android apps and the App Store for iOS apps.

One programming language

Flutter is dependent on only one language i.e. Dart.

Single code base

It means you can just write a code once and you can have two different apps with it. And that’s the cool thing about Flutter.

You can just learn only one programming language and you can get two apps. It’s Cool, right?

Other than Flutter, when you want to build an IOS app you need to write code or build an app using Swift using the IOS development environment, and for Android, you would be using Kotlin or Java with the Android development environment. And you need to learn these two different languages and work on two different projects to build applications.

But in Flutter that’s not the case, you can learn just one programming language, and boom you are ready to build apps for both Android and iOS.

Major things

Flutter consists of two major things.

Software Development Kit(SDK)

We can say a collection of tools and environments that allows writing applications using a single code base or programming language. SDK consists of tools and then compile the code that normally would not run on IOS and Android into the native code that runs on those Android and Ios devices. As it contains only one programming language, it needs to compile the code into native machine codes for IOS and native machine code for Android. So it makes sure the code runs the code on both devices.
Also, it is not only a collection of tools but also provides everything you need to create cool applications.

Framework/widget library

It gives you a framework, and widget library for that one programming language called Dart which you can use to build beautiful Flutter apps and that’s where we would spend the majority of time with this course.
It provides you with a large collection of reusable UI building blocks called widgets. So the things like buttons, tabs, text fields, and drop downs you shall get that from it. You can style and customize them as per your need to build the UI with these widgets or tools.
In addition, you get utility functions and packages that help you to build what your users see and what your users interact with and then that code which you built with the help of this Flutter framework, is then compiled into native machine code with the help of SDK.
So that is what Flutter is.

Dart

As I have earlier mentioned, Flutter uses a programming language called Dart. Dart is a programming language that is focused on building front-end user interfaces, front end apps. It is not limited to building mobile apps, that is just what Flutter uses it for. Dart is independent of Flutter and you can build web apps with Dart but we are not going to focus on this course, we just focus on Flutter and how Flutter uses Dart to build awesome mobile apps. So it is a programming language that is built to make it easier to build front-end UI.
It is a programming language which is developed by Google. Dart is an object-oriented and strongly typed language and its syntax is a bit like a mixture of Javascript, Java, and C# but don’t be scared you don’t need to know anything about programming to follow along. In this course, I will teach you Dart from scratch along with Flutter, so we shall build Flutter apps and you’ll learn Dart. And the features you are using there along the way as I think that’s the most fun way of learning that programming language and already see nice results, the apps you are building.

Flutter Vs Dart

Flutter and Dart are not competitors but collaborators.
They are not alternatives, instead, they are working together. Flutter builds upon Dart. Flutter is a framework for Dart just like Laravel, CI for PHP or React, and Vue Js for Javascript. Dart actually is the programming language that we’re using Flutter, then just a collection of tools, a set of features, utility functions, and these widgets that are implemented using Dart, so you don’t have to invent the wheel there but you can simply write your own Dart code and use these existing widgets in your code so that you don’t have to again reinvent how a text field or button should look like and work but the pre-built button or text field instead and then customize it your requirements. So that’s how it works. In addition, as mentioned, Flutter also gives you that SDK, so all these tools for compiling your code in the end.

Flutter Architecture

Now after knowing or at least having a rough idea about Flutter and Dart, let’s discuss the Architecture of Flutter.

UI as code:

The most important thing that we are going to see over and over throughout the app-building process is the idea of building user interfaces as code, i.e. UI as Code. The idea about UI as Code is that you are no visual drag-and-drop editor to build the interface or design the user sees. But instead, you shall have to work only in code, we need to write everything in code. It may sound intimidating at first glance but you will see that Flutter has a very cool approach to that, which makes creating interfaces with this UI as code approach just a piece of cake.

You don’t build it by dragging and dropping the elements into a visual editor, you have no visual editor indeed, and instead, you only work in code. The code looks like that here and you get a brief preview of how these widgets work and how you structure your entire app with the help of these widgets. And also how you configure your app with these widgets and even without understanding that code, it probably does not look too difficult.

Embrace Platform differences

After the core idea of how you build your applications in Flutter, this UI as Code approach, it’s also important to understand that Flutter apps do actually embrace platform differences while being based on one code base.
So we just have to work on a single project but we will still have the ability to create different user interfaces at some points or in some parts of our applications if we need it for the different platforms as Android and iOS are not exactly the same. They do have some small differences and sometimes, that does not matter to you but if it does, Flutter gives you the tools to find out on which platform you’re running, so that if you are in Android you can run code A and code B If you are on iOS. Here Flutter provides you with full flexibility.

Everything is a Widget

Now again let’s discuss UI as Code or widget tree again. In Flutter, Everything is a widget and it’s very important to understand.

All these are the widgets. For example here the Image, TextField, Icons, Buttons, Text, etc. Along with it, the whole page is a widget and even the whole app is wrapped with one main widget. It is as simple as that and your entire app is therefore built as a widget tree. When building the applications, the buttons, text, containers, tabs, dropdowns, and switches are widgets. Just keep in mind that Everything is a Widget.

How does Flutter SDK work?

Now let’s discuss how actually Flutter and Dart work internally. How is your Flutter app actually converted to a native app that can be published to Play Stores and App stores?
Well, you have your Dart code and the Flutter framework. Flutter gives you a collection of functions and widgets that you can use in your code to build the interface you want to build. So you have your own widgets, functions, and your own code that is composed of the set of built-in widgets or your own widgets which you can build if you want to build for Android and iOS.

Now as I mentioned, Flutter simply complies that Dart code to native code for these different platforms, and that is possible with the help of the Flutter SDK as a result, you get real apps split out with highly optimized high-performance code that is based on your code but that is actually not your code itself. Instead, it is the compiled version of the code you wrote. Therefore you really ship code that runs on different platforms and that’s optimized and highly performant too. The performance is actually a big advantage of Flutter applications.

Flutter does not use platform primitives

And also it is important to know and understand that Flutter does not use platform primitives. Now what the heck does that mean?

With Flutter apps, we are targeting iOS and Android. Now if we want to add a button, and in UI as code approach, we can do so by adding ElevatedButton. Now as you may think what could happen? When the code gets compiled to that native code, the ElevatedButton is translated to the default UI button element in the iOS development and widget. button for Android which is of course part of the native development environments. And that’s not what happens.

Instead, Flutter has its own way of implementation. You need to keep in mind that, Flutter directly controls every pixel on the screen. So Flutter does not compile your code to some native equivalence or native alternatives. Instead, Flutter ships with its own engine which controls the entire screen, everything the user sees, and renders every pixel on its own. And that gives Flutter a lot of control and a lot of flexibility. Hence you don’t have to care too much about that as Flutter does it for you. Also, it is important to be aware of that because that gives Flutter more control and fewer limitations, and therefore, you implicitly, and indirectly benefit from that. You have a good performance, a lot of power, and lots of things to configure. You have full control over how you want to build your user interface.

Conclusion

In this article, you learned about Flutter and Dart. Along with it you got covered about the Flutter architecture, Flutter SDK working mechanism, and terms like embrace platform differences, UI as code, and much more

I hope this blog post provides you with enough important information about Flutter.

Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us