Getting Started with Flutter Instantly

Photo by Chris Ried on Unsplash

There is no better time to deep dive into Flutter than now. Google Pay just announced that its picking up Flutter to drive its global product development.

Introduction

We all know that a massive amount of development effort goes to maintain our app on two major avenues i.e Google Play & Apple Store. The programming language is different and both platforms have their own idiosyncrasies.

Here comes Flutter as a savior and a better alternative with some real upsides:

1. A Flutter app is way more cheaper compared to developing two native apps.
2. The development team is relatively smaller with linear processes.
3. You get more time for working on the app’s main features.
4. Maintenance is also pruned down because of single code base.

No wonder that Flutter is more popular as a framework than React Native on both GitHub and Stack Overflow. Look at the survey below!

Most loved tools

Start with Dart

Start using Dart to develop web-only apps. If you want to write a multi-platform app, then use Flutter.

The dart programming shares several same features as other programming languages, such as Kotlin and Swift, and can be trans-compiled into JavaScript code.

Also if you look at the list of most loved languages, Dart is just behind JavaScript

Most loved languages

Flutter is different from other frameworks because it neither uses WebView nor the OEM widgets that shipped with the device. Instead, it uses its own high-performance rendering engine to draw widgets. It also implements most of its systems such as animation, gesture, and widgets in Dart programing language that allows developers to read, change, replace, or remove things easily. It gives excellent control to the developers over the system.

Flutter is a UI toolkit for building fast, beautiful, natively compiled applications for mobile, web, and desktop with one programing language and single codebase. It is free and open-source. Initially, it was developed from Google and now manages by an ECMA standard. Flutter apps use Dart programming language for creating an app.

The first version of Flutter was announced in the year 2015 at the Dart Developer Summit. It was initially known as codename Sky and can run on the Android OS. On December 4, 2018, the first stable version of the Flutter framework was released, denoting Flutter 1.0.

The Flutter apps do not support the browser. It only supports Android and iOS platforms.

Open-Source: Flutter is a free and open-source framework for developing mobile applications.

Cross-platform: This feature allows Flutter to write the code once, maintain, and can run on different platforms.

Hot Reload: It means the changes immediately visible in the app itself.

Accessible Native Features and SDKs: We can easily access the SDKs on both platforms.

Minimal code: Flutter app is developed by Dart, which uses JIT and AOT compilation to improve the overall start-up time, functioning and accelerates the performance.

Widgets: Flutter has two sets of widgets: Material Design and Cupertino widgets that help to provide a glitch-free experience on all platforms.

Where to Start

Start using Dart to develop web-only apps. If you want to write a multi-platform app, then use Flutter. With Flutter 1.21, the Flutter SDK includes the Dart SDK. So you may not need to explicitly download the Dart SDK.

If you are a beginner, it is highly recommended to start with Dart only. It requires less disk space and easy way to get started. Once you build your competency on dart as a programming language, you can start with flutter.
Also if you just want to have continuous integration (CI) setup that requires only Dart.

Installing Dart

The installation steps differs bases on OS platforms. Use the one which suits your need.

For Mac

brew tap dart-lang/dart
brew install dart
brew info dart //check info

dart — version //check version

For Windows

You can install the Dart SDK using Chocolatey.

C:\> choco install dart-sdk

C:\> choco upgrade dart-sdk

You might need to add path in environment variable.

C:\tools\dart-sdk\bin
C:\Users\%USERPROFILE%\AppData\Local\Pub\Cache\bin

The Dart SDK has a number of very useful command-line tools:

1. dart — The Dart Virtual Machine (VM)
2. dartdoc — An API documentation generator
3. dart2js — A Dart to JS compiler, which target the web with Dart
4. dartfmt — A code formatter for Dart
5. dartanalyzer — A static code analyzer for Dart
6. pub — The Dart package manager
7. dartdevc — A quick Dart compiler
8. dart2native — A tool that AOT compiles Dart code to native x64 machine code
9. dartaotruntime — A Dart runtime for AOT-compiled snapshots

Building a Web App with Dart

The Dart package manager — pub, is useful to add and manage Dart packages.
We’ll use pub to install the command-line interface tools.

pub global activate webdev
pub global activate stagehand
mkdir demo
cd demo
stagehand web-simple

Stagehand is a Dart scaffolding tool. It helps to set up a new project in Dart with some predetermined folders very easy.

The project scaffold will be created and you can run pub get to update project dependencies. To gets all the dependencies listed in the pubspec.yaml file in the current working directory and their transitive dependencies run:

pub get

On restarting system will flush the system cache and you have to run the above command again because it download dependencies in system cache and map to .package file.

Run the following command to launch a development server, which serves your app and watches for source code changes:

webdev serve

And point your browser to http://localhost:8080

But if you want to run your application in debug mode then run the following command:

webdev serve — debug

You might need to set path locally :

export PATH=”$PATH”:”$HOME/.pub-cache/bin”

Congratulations! You have just completed your first web app in Dart.

Gradually move to building Flutter App

If you know object-oriented programming, and concepts such as variables, loops, and conditionals, then you don’t need any previous experience with Dart, mobile, or web programming.

Software Requirements

1. Flutter SDK
2. Chrome browser
3. Text editor or IDE

For web-only development, you can either use IntelliJ IDEA or VS Code. Android Studio and Xcode are not required. While developing, run your web app in Chrome so you can debug with Dart DevTools.

Enable web development

At the command line, run the following commands to make sure that you have the latest web support enabled. You only need to run flutter config once to enable Flutter support for the web. If it throws “flutter: command not found”, then ensure that you have installed Flutter SDK and that it’s in your path.

flutter channel beta
flutter upgrade
flutter config — enable-web

Run flutter doctor — The flutter doctor command reports the status of the installation

flutter doctor

List the devices — To ensure that web is installed, list the devices available.

flutter devices

The Chrome device automatically starts Chrome. The Web Server also starts a server that hosts the app so that you can load it from any browser. Do use the Chrome device during development so that you can use DevTools, and the web server to test on other browsers.

The app will be displayed in similar DartPad.

Dart Pad

Below is a short code skeleton:

import ‘package:flutter/material.dart’;

void main() => runApp(SignUpApp());

class SignUpApp extends StatelessWidget {}

class SignUpScreen extends StatelessWidget {}

class SignUpForm extends StatefulWidget {
@override
_SignUpFormState createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
}

Run the example

Click the Run button in the Dart pad to run the example.

Create a new Flutter project

From your IDE, editor, or at the command line, create a new Flutter project and name it anything .

Replace the contents of the lib/main.dart. The entire code for this example lives in the file — lib/main.dart
All of the app’s UI is created with Dart code.

The app’s UI adheres Material Design. Flutter also has the Cupertino widget library which implements the current iOS design language. You can also create your own custom widget library. In Flutter, almost everything is a Widget including the app itself. The app’s UI could be described as a widget tree.

Dart DevTools

Do not confuse it with Chrome DevTools. The following instructions for launching DevTools applies to any workflow

1. Run the app.
   Select the Chrome device from the pull down and launch it from the IDE or, from the command line, use flutter run -d chrome,
2. Get the web socket info for DevTools.
   At the command line, or in the IDE, you should see a message like the following:
   Debug service listening on **ws://127.0.0.1:54998/pJqWWxNv92s=**
   Now launch the DevTools.
3. Ensure that the DevTools is installed
   Make sure you have the Flutter and Dart plugins set up. If you are working at the command line, launch the DevTools server.
4. Connect to DevTools.
   When DevTools launches, you should see the following: Serving DevTools at http://127.0.0.1:9100
   Now go to this URL in a Chrome browser and you should see the DevTools launch screen.
5. Connect to running app.
   Under Connect to a running site, paste the ws location showed in step 2, and click Connect. Now you should see Dart DevTools running successfully in your Chrome browser.

Now debug on the dart dev tool using the following steps :

• Set a breakpoint.
• Set a breakpoint.
• Trigger the breakpoint.
• Resume the app.
• Delete the breakpoint.

Finally

If everything goes smoothly, you should be able to see a nice UI on the pad. Awesome! You have just created your first web app using Flutter!

Flutter — The Next Big Thing!