Getting Started With Flutter
Tags: flutter, beginners, mobile, tutorial
Published: 2023-02-24 14:26:50


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](https://flutter.dev) for Windows, macOS, or Linux. Flutter also requires the installation of the [Android SDK](https://developer.android.com/studio?gclid=Cj0KCQiAutyfBhCMARIsAMgcRJRA2x6wcfQUPWw4hn4pE3Pe2bbCbjRfY5Ov46wmg-nVz-BDAp_m6S4aAicjEALw_wcB&gclsrc=aw.ds) and [Xcode](https://developer.apple.com/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:

```bash
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](https://flutter.dev/docs/get-started/install/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](https://code.visualstudio.com/download).
- 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 doctor`command 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:

```bash
flutter doctor
```

The output should look something like this:

```bash
[✓] 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:

```bash
flutter create myapp
```

This command creates a new Flutter project called `myapp`in 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.

```bash
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:

```bash
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:

```dart

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.


![The application running on an emulator.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkdt2k1ahknt4tch40ju.png)



## **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.