Getting Started With Flutter

Mobile app development can be a challenging task, especially when targeting multiple platforms with different programming languages and tools. Flutter aims to simplify this process by offering a single codebase that can be compiled into both Android and iOS apps, reducing the time and effort required to develop and maintain your app.

In this article, we will cover the basics of Flutter, including how to set up your development environment, create a simple app, and use some of the pre-built widgets and libraries. By the end of this article, you will have a good understanding of how Flutter works and be ready to start building your own mobile apps.

What is Flutter?

Flutter is an open-source UI software development kit (SDK) created by Google. It is used to build high-performance, visually attractive, and native applications for mobile, web, and desktop platforms. Flutter uses the Dart programming language, which is designed for both client-side and server-side applications.

Advantages of Flutter

Flutter has gained popularity in recent years due to its numerous advantages. The framework offers hot reloading, allowing developers to see changes immediately. It also uses a single codebase for multiple platforms, reducing development time and costs. Additionally, Flutter's widgets, animations, and user interface (UI) components can be customized to match any design and brand.

Use cases for Flutter

Flutter is used in a variety of applications, from simple mobile apps to complex desktop applications. It is popular in industries such as finance, healthcare, education, and e-commerce. Some well-known apps built using Flutter include Alibaba, Reflectly, and Hamilton Musical.

Setting up the Development Environment

Before you can start building Flutter apps, you'll need to set up your development environment. This involves installing the Flutter SDK, an Integrated Development Environment (IDE), and configuring your environment variables.

Installation of Flutter SDK

To start developing with Flutter, the Flutter SDK needs to be installed. This can be downloaded from the Flutter website for Windows, macOS, or Linux. Flutter also requires the installation of the Android SDK and Xcode (for iOS development).

Here's an example of how to download and install Flutter on a macOS system:

Download the Flutter SDK from the Flutter website.
Extract the downloaded file to a folder, e.g. /Users/yourusername/flutter.
Add the Flutter bin directory to your PATH environment variable by running this command in your terminal:

export PATH="$PATH:/Users/yourusername/flutter/bin"

Here’s an example of how to download and install Flutter on a Windows System

First, download the latest version of the Flutter SDK for Windows from the official Flutter website.
Extract the downloaded file to a directory of your choice. For example, you could extract it to C:\src\flutter.
Add the Flutter SDK to your system path by adding the following line to your Path environment variable: **C:\src\flutter\bin**

This allows you to run the flutter command from anywhere on your system.

Installation of an IDE (e.g. VSCode)

Any Integrated Development Environment (IDE) can be used to build Flutter apps, but VSCode is the most popular. VSCode provides support for Dart and Flutter extensions, making it easier to code, debug, and test apps.

Here's an example of how to install VSCode and the Dart and Flutter extensions:

Download and install VSCode from the VSCode website.
Open VSCode and go to the Extensions panel on the left-hand side.
Search for the "Dart" and "Flutter" extensions and install them.

Configuration of Flutter environment

After installing the Flutter SDK and an IDE, the configuration of their environment variables comes next. This allows the IDE to access the Flutter SDK and related tools.

Here's an example of how to configure your Flutter environment on a macOS system:

Open your terminal and run this command:

code ~/.bash_profile

Add the following lines to the end of the file:

export PATH="$PATH:/Users/yourusername/flutter/bin"
export ANDROID_HOME=/Users/yourusername/Library/Android/sdk

Save the file and close it.

Here's an example of how to configure the Flutter environment on a Windows system:

Open the Environment Variables dialog by right-clicking on This PC and selecting Properties. Then, click on Advanced system settings on the left-hand side of the screen. Click on the Environment Variables button in the Advanced tab. Under the User variables section, click on New to add a new environment variable.
Enter FLUTTER_HOME as the variable name and the path to the Flutter SDK directory as the variable value. For example, if you extracted the Flutter SDK to C:\src\flutter, you would enter C:\src\flutter as the value.
Under the "System variables" section, scroll down and find the "Path" variable. Click on "Edit" to modify the variable.
Click on New and enter %FLUTTER_HOME%\bin as the new path.
Click OK to save the changes.

Verifying the installation

Verification of the Flutter installation can be done by running the flutter doctorcommand in the terminal. This command checks for any missing dependencies or configuration issues.

Here's an example of how to run the flutter doctor command:

Open your terminal and run this command:

flutter doctor

The output should look something like this:

[✓] Flutter (Channel stable, 2.10.0, on macOS 11.1 20C69 darwin-arm, locale en-US)
    • Flutter version 2.10.0 at /Users/username/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f2d227 (10 days ago), 2022-02-11 13:12:15 -0800
    • Engine revision 3f8bd2f (10 days ago), 2022-02-11 11:10:57 -0800
    • Dart version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/username/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7387471)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.2.1, Build version 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7387471)

[✓] VS Code (version 1.64.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.30.1

[✓] Connected device (2 available)
    • iPhone 13 (mobile) • 192.168.1.10 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • Chrome (web)        • chrome        • web-javascript • Google Chrome 98.0.4758.102

• No issues found!

This output shows that Flutter is installed and working correctly on a macOS system, along with the necessary Android and iOS development tools. It also shows that the developer has Android Studio, Visual Studio Code, and a simulator/emulator connected to their system.

Creating a Simple Flutter App

Now that the development environment is set up, we can create a simple Flutter app.

Creating a new Flutter project

To create a new Flutter project, run the following command in your terminal:

flutter create myapp

This command creates a new Flutter project called myappin your current directory. The project contains all the necessary files and folders to start building your app.

Understanding the file structure

Let's take a look at the file structure of a Flutter project.

myapp/
  android/
  ios/
  lib/
    main.dart
  test/
  pubspec.yaml

android/ and ios/: These folders contain platform-specific code for Android and iOS, respectively. These files rarely need modification.
lib/: This folder contains the Dart code for your app. The main.dart file is the entry point for your app.
test/: This folder contains test files for your app.
pubspec.yaml: This file defines the dependencies for your app.

Running the app on an emulator or physical device

To run the app on an emulator or physical device, you need to connect your device to your computer and ensure that USB debugging is enabled. Now, run the following command in your terminal:

flutter run

This command compiles the Flutter code and deploys it to your device. You can see the app running on your device.

Here's the myapp example displaying the text "Hello, World!" on the screen:


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

The above code snippet sets up a simple Flutter app that displays a centered text message that says Hello, World!.

Here's what the code does in more detail:

The first line imports the material package, which provides UI components for our app such as buttons, text fields, and icons.
The main() function is the entry point of the app. It calls the runApp() function with an instance of the MyApp class as an argument. This starts the app and displays the UI on the screen.
The MyApp class extends the StatelessWidget class, which means that the UI of the app will not change over time. The build() method of MyApp returns a MaterialApp widget, which is the root of our app.
The MaterialApp widget has several properties, including the title property, which sets the title of the app. In this case, we set the title to "MyApp".
The home property of MaterialApp specifies the home page of our app, which is a Scaffold widget. The Scaffold widget provides a basic structure for our app and has several properties, including the appBar property, which specifies the app bar at the top of the screen.
The appBar property of Scaffold specifies the app bar, which is the bar at the top of the screen that displays the app title. In this case, we set the title of the app bar to MyApp.
The body property of Scaffold specifies the main content of our app. In this case, we use a Center widget to center a Text widget that displays the text "Hello, World!".

This code sets up the basic structure of a Flutter app and shows how to use some of the basic UI components. Below is an Image of how the app should look on your device/emulator.

Conclusion

Flutter is an excellent choice for building high-performance, visually attractive, and native applications for mobile, web, and desktop platforms. With its numerous advantages, including hot reloading, a single codebase for multiple platforms, and customizable widgets and UI components, Flutter is rapidly gaining popularity among developers. By following the steps outlined in this article, you can set up your development environment and start building your Flutter app today.

Blog