Flutter Introduction

What is flutter

Flutter is Google’s open-source UI toolkit, used for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

  1. Original author(s): Google.
  2. Developer(s): Google and community.
  3. Written in: C, C++, Dart.
  4. Platform: Android, iOS, Google Fuchsia, Web platform, Windows, macOS and Linux.
  5. Type: Application framework.
  6. License: New BSD License.

The following are the main features which make flutter better framework.

  1. Built-in Material Design.
  2. Widgets (android-flavor).
  3. Cupertino (ios-flavor) widgets.
  4. Hot reload.
  5. Native performance on both iOS and Android.

Hot reload

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs.

The Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes.

Flutter uses Just In Time compilation, allowing for "hot reload", with which modifications to source files can be injected into a running application

Flutter apps are compiled with ahead-of-time (AOT) compilation on both Android and iOS.

Material Design

Helps to build rich motion APIs, smooth natural scrolling.

Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Cupertino Widgets

Ios-flavor widgets supports to design app on IOS platforms.

Native performance

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android.

DartPad flutter Setup

How to run flutter code in DartPad?

  1. Go to the Dart dev site.
  2. From Toolbar menu click on the New Pad.
  3. It opens the Create New Pad Popup.
  4. Click Ok button.
  5. From new New Pad popup window, choose flutter and click CREATE button.
  6. Copy the example code using copy button and paste in flutter DartPad window.
  7. Click Run button to execute the code.

Basic Program

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Welcome to flutter app!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Here’s what this program uses that applies to all (or almost all) Flutter apps:

  1. material dart: Import material package to support material design.
  2. main() function: Top-level function where app execution starts.
  3. runApp() function: The runApp() function takes the given Widget and makes it the root of the widget tree.
  4. Widget tree: The widget tree consists of two widgets, the Center widget and its child, the Text widget.
  5. Center Widget: A widget that centers its child within itself.
  6. Text Widget: A widget displays a string of text with single style.
  7. TextDirection Widget: A direction in which text flows. ltr The text flows from left to right.

Execute Flutter Code

Use dartPad to execute the code.