publication

Flutter for Beginners: What is Flutter?

Miquel Canal

Friday 21, May 2021
  • Flutter
  • Programming Languages
  • open-source

Quick introduction to Flutter

Flutter is a multi-platform framework built by Google and used to develop native applications for web, mobile and desktop from a single code base. The key idea behind Flutter is to keep a single repository and compile code to multiple platform targets. Flutter is free and its code is released as open-sourced.

Flutter uses Dart Programming Language as its base language and facilitates the app development process with modern features such as: hot reloading, customizable widgets and ready-to-use libraries.

The framework is built around native user-experience. It quickly integrates with pre-built UI toolkits such as Material Design and Cupertino to speed up the development process. Flutter benefits from the native performance of each platform as the code is compiled individually for web, mobile and desktop.

What is Flutter SDK?

The Flutter SDK is your door into the flutter framework. It consists of packages and command-line tools that are required to develop Flutter applications. For example, the Flutter SDK will be used to compile your code into multiple platform targets.

It will also provide you a UI framework to build native components or use its API to perform unit and integration testing. Within the Flutter SDK you will be able to access the full Dart SDK. This allows you to run Dart commands from your Flutter project.

How to install Flutter?

Flutter can be installed on multiple OS: Linux, Windows, macOS and even Chrome OS (I see what you did there Google…). For this article, we are going to follow the Linux installation on an Ubuntu 20.04 release. Here are the easy steps to install Flutter:

  1. Ensure your system has all the required command line tools: bash, curl, file, git, mkdir, rm, unzip, which, xz-utils, zip
  2. The Flutter installation is made via snapd. Make sure your system has snapd installed.
  3. Run this command to install Flutter: sudo snap install flutter --classic.
  4. After the installation is completed, you need to check if there’s any missing Flutter dependencies vi running: flutter doctor.

Flutter sends analytic data to Google behind scenes. You can change this by running flutter config --no-analytics.

Flutter requires you to install the Android SDK in order to develop mobile applications. Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. To install Android SDK you can install Android Studio directly. The Java Development Kit (JDK) is also required for developing Flutter applications.

As a flutter user you should accept several licenses from Google. To do so, you need to run the command flutter doctor --android-licenses. It will preview the licenses you are required to accept.

Flutter IDE

Flutter does not force you to use any specific code editor (IDE). You are free to select your own editor and then use the Flutter SDK command-line tools for compiling the code.

However, Flutter recommends the use of their set of plugins in order to use code completion, syntax highlighting, widget editing assists, run & debug support, and more. Flutter integrates great with: Android Studio, IntelliJ, Visual Studio Code and Emacs.

Flutter Templates for Beginners

If you are new to Flutter, one of the first steps after installation is to validate that Flutter environment is ready for developing applications. There are a set of Flutter templates that can be used to easily create a Flutter application.

By default, Flutter runs the application in debug mode while developing the app. This is to expose a better development experience and to allow features such as hot reloading.

This has consequences in terms of performance, so it is expected to see slow animations and feel the overall app takes time to react. To change this, you’ll want to use Flutter’s “profile” or “release” build modes.

What are Stateful Widgets in Flutter?

Stateful widgets are immutable objects meaning all its properties are final. They have a mutable state which can change throughout the life of the widget. A Flutter State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget.

Stateful widgets are useful when a certain part of a user interface changes dynamically. The stateful widget can be used to build a tree of widgets to describe a section of the user interface (UI).

By definition, the Stateful Widget instances are immutable and you can’t modify their internal properties after declaration. They store their mutable state in separate State classes that are created via createState method.

In Dart language, prefixing an identifier with an underscore enforces privacy. It is recommended and best practice to use an underscore when defining the state class of a stateful widget.

Flutter Widgets: Material Design and Cupertino

Flutter framework allows integration with external widgets to help you create better applications reusing common libraries. A clear example of these widgets are the Material Design and Cupertino. These resources help developers to implement native components and behaviors.

Flutter widgets can be imported on your project and used to generate the User Interface. Most of these widgets allow you to pass in configurations to customize the visual appearance and the behaviour. Common Flutter widgets: Navigation bar, Banner, Buttons, Alerts, Pop-ups, Context Menus, Tables and much more.

References

Data types in Flutter (Dart)

Data types in Flutter (Dart)

Quick overview of the Dart data type available in Flutter. It is important to define data types when working on a Flutter application. This helps to write clean code and to improve code readability.

Introduction to Dart Programming Language

Introduction to Dart Programming Language

This article covers the basics of Dart, a programming language developed at Google. With a C-style syntax, Dart can be used to develop mobile apps, web application as well as desktop applications. The first step to learn Flutter is to understand its base.

Data types in Flutter (Dart)

Data types in Flutter (Dart)

Quick overview of the Dart data type available in Flutter. It is important to define data types when working on a Flutter application. This helps to write clean code and to improve code readability.

This site uses cookies to ensure a great experience. By continue navigating through the site you accept the storage of these cookies.