Getting Started With Flutter!

Do you want to build beautiful mobile or web apps having great designs, smooth animations without compromising on quality or performance?

If yes, then flutter is the one-stop solution for you! Let’s dive deep into how to get started with flutter.

Content

What is Flutter?

Why Flutter?

Yet Another Mobile development framework?

Widgets Everywhere!

Hello World! in Flutter

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase!

Why Flutter?

Flutter enables you to build —

1. Beautiful Apps — No more compromises for your designers
2. Fast Apps — Take the speed limit off your apps
3. Productive — Now you can develop while running your apps
4. Open — Everything is Free and Open Source

Apps and Interfaces made with Flutter are built from a single codebase, compiled directly to native arm code, use the GPU, and can access platform APIs and services.

Yet Another Mobile development framework?

Is Flutter yet another mobile development framework?

Absolutely Not!

Ever wondered what goes on under the hood of flutter apps? Let’s discuss the different approaches needed to run your apps on multiple platforms.

Approach 1

The first approach is to build a separate app for each platform, which often involves a separate team for each codebase. In this system, your code can directly call the built-in platform UI elements, but each codebase will be in a different native language. And your teams will need to ensure consistency between the feature sets in each codebase as the app grows.

Approach 2 :

Another approach across platform development uses only one codebase, but
it involves either WebViews, in which your app creates HTML and displays it in a web view on the platform, as you can see here, or building a bridge from
code in a common language, like JavaScript, to those native UI components

The Flutter Approach

In both, the approaches above your app code communicate through a bridge, which may have performance implications. Flutter overcomes this challenge using the following approach —

Flutter eliminates the bridge and moves your rendering into your app. Internally, Flutter consists of a framework built with Dart and a rendering engine built mostly in C++.

Framework of Flutter

Building your first App

Hold tight Flutter Developers! You are about to enter a whole new journey …

Here are some of the things you should be aware of before building your first application

1. Which development Platforms to use?
2. Which programming language to use?
3. What are widgets?
4. Where to begin?

1. Development Platforms

You can use one of the following development platforms:

a. Android Studio

b. Visual Studio Code

c. Xcode

Check this out to set up your favorite editor.

Set up an editor

2. Dart — the programming language

Dart, is the secret sauce to a great developer experience!

Dart is a special programming language which Flutter uses

It can be both just-in-time compiled, and also ahead-of-time compiled.

JITing enables a lightning-fast development experience with a feature called hot reload, which allows you to see your code changes in less than a second. When you’re ready to release your app to the world, it can be ahead-of-time compiled, which means your app will be fast and responsive for your users. You can get the best of both worlds! Learn more about dart on —

Dart programming language

3. Widgets Everywhere?

With Flutter, everything you see on the screen is called a widget. A widget can

• define a structural element, like a button or menu,
• a stylistic element, like a font or color scheme
• even an aspect of layout, like padding.

4. Time for Another ‘Hello World’ App

Start off with building your first app with this wonderful codelab:

Write your first Flutter app, part 1

Start building your apps today! We can’t wait to see what you build 😍

Need some more resources? Check out these -

Codelabs

Flutter Day - Codelabs

Happy Fluttering! ❤