Contents:
Introduction
Flutter is an app SDK for building high-performance apps for iOS, Android, web (beta), and desktop (technical preview). This all is done from a single codebase. This enable developers to deliver high-performance apps that feel natural on different platforms.
In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
Flutter consists of two important parts:
- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
Why use Flutter?
I believe these reasons are enough to prove it’s worth. Here are some:
- Simple to learn and use: Flutter is a modern framework, and you can feel it! It’s way simpler to create mobile applications with it. If you have used Java, Swift, or React Native, you’ll notice how Flutter is different.
- Quick compilation implies maximum productivity: You can change your code and see the results in real-time. It’s called Hot-Reload. It only takes a short amount of time after you save to update the application itself. Significant modifications force you to reload the app. But if you do work like design, for example, and change the size of an element, it’s in real-time!
- Ideal for startup MVP: If you want to show your product to investors as soon as possible, Flutter is a good choice.
Getting Started
First of all, you need to go to the official website and download the SDK. After this, you need to select an editor for the same. Meanwhile, it is advisable to download Git in your system. I would prefer using Android Studio as it offers an Emulator to test our apps. Basically, emulator is some sort of a virtual phone. It has all the features of a normal android/ iphone. After writing code in the editor, we can use the emulator to test how the app will function in the phone. Alternatively, you can use your mobile phone, but it would consume time.
Remember to download various plugins before starting with your first app. For Resources’ purpose, there is an official documentation which tells about various aspects of flutter. This will also help to debug your code.
Let us now explore how exactly apps are built in flutter. Everything in flutter is based on – WIDGET. Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI (User Interface) out of widgets. Widgets describe what their view should look like given their current configuration and state.
When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
Flutter comes with a suite of powerful basic widgets, of which the following are commonly used:
- Text
- Row/ Column
- Stack
- Container
Dart Language Overview
Dart is a client-optimized programming language for apps on multiple platforms. It is developed by Google and is used to build mobile, desktop, server, and web applications. Dart is an object-oriented, class-based, garbage-collected language with C-style syntax. Dart can compile to either native code or JavaScript.
However, like any other programming language, Dart is also an object oriented language. Here is a full official documentation on learning Dart from basics. You can refer that too.
Running the First App
First of all, you need to make a new project and then write the code therein. To test, there is a basic code written in the main. dart file from before. After opening the main.dart file in the library folder, you need to set the emulator. For that, go to Tools > AVD Manager. Open it and either make a new one or select from available options. Finally, click on Build button and after some time you will see the app running on your emulator. This is how the first app looks like in the emulator:
I hope you were able to get a basic idea about what flutter is. There is a full official documentation which teaches a lot about it. So go through it and feel free to comment.
