Getting Started With Flutter

With various operating systems running the world’s mobile and desktop devices, cross-platform development has long been a goal for app development. Being able to write one codebase and deploy to multiple platforms saves significant time and effort for your company and team.

One of the most recent frameworks to enter the cross-platform arena is Flutter from Google. While Flutter initially only supported the Android and iOS mobile platforms, it has since expanded to include support for the web, macOS, Windows, Linux, Fuchsia and embedded devices. This — in combination with Flutter’s fast development cycle, flexible UI design and native app performance — make it a very attractive target for new and experienced developers alike.

In this tutorial, you’ll build a Flutter app called GHFlutter that queries the GitHub API for team members in a GitHub organization and displays the information in a scrollable list:

You can develop the app using iOS Simulator, the Android emulator, a web browser, a native desktop app or all of the above!

Here are some things you’ll learn how to do with Flutter while you build the app:

• Set up a development environment.
• Create a new project.
• Use hot reload.
• Import files and packages.
• Create and use widgets.
• Make network calls.
• Show items in a list.
• Add an app theme.

You’ll also learn a little Dart along the way! :]

Getting Started

Download the starter project for this tutorial by clicking the Download Materials button at the top or bottom of this tutorial.

You can use macOS, Linux, Windows or Chrome OS for your Flutter development. While you can use any editor with the Flutter toolchain, there are IDE plugins for IntelliJ IDEA, Android Studio and Visual Studio Code that make the development cycle easier.

This tutorial uses VS Code.

Introduction to Flutter

Flutter apps use the Dart programming language. Dart shares many of the features of other modern languages, such as Kotlin and Swift. You can also transcompile Dart into JavaScript code. If you’d like to learn more about Dart before continuing with this Flutter tutorial, check out our Dart Basics tutorial.

As a cross-platform framework, Flutter most closely resembles React Native. Both allow for a reactive and declarative style of programming. Unlike React Native, however, Flutter doesn’t need to use a JavaScript bridge, which improves app startup times and overall performance. Dart achieves this by using Ahead-Of-Time (AOT) compilation.

Dart can also use Just-In-Time (JIT) compilation. JIT compilation with Flutter improves the development workflow by allowing a hot reload capability to refresh the UI during development without the need for an entirely new build.

As you’ll see in this tutorial, the Flutter framework is built around the idea of widgets. In Flutter, you don’t only use widgets for your app’s views, but also for entire screens and even for the app itself.

Setting up Your Development Environment

Find instructions for setting up your development machine with the Flutter framework on Flutter’s Get started page. The specific steps vary by platform, but they follow this basic format:

1. Download the installation bundle for your development machine’s operating system to get the latest stable release of the Flutter SDK.
2. Extract the installation bundle in the desired location.
3. Add the flutter tool to your path.
4. Run the flutter doctor command, which alerts you to any problems with the Flutter installation.
5. Install missing dependencies.
6. Set up your IDE with a Flutter plugin/extension.
7. Test drive an app.

The instructions provided on the Flutter website are very well done and allow you to easily set up a development environment on your platform of choice. The remainder of this tutorial assumes you’ve set up VS Code for Flutter development and that you’ve addressed any issues flutter doctor found. You can also use Android Studio to follow along.

To run your project as a mobile app, you’ll need to use one of the following options:

• Run either iOS Simulator or an Android emulator.
• Have an iOS or Android device set up for development.
• Run your code as a web app.
• Finally, you can run your code as a desktop app.

Even if your final target is mobile, using a web or desktop app during development gives you the advantage of being able to resize the app and observe how it would look with various screen sizes. If you have an older computer, the web or desktop version will also load faster than the Android emulator or iOS Simulator.

Creating a New Project

In VS Code with the Flutter extension installed, open the command palette by choosing View ▸ Command Palette… or pressing Command-Shift-P on macOS or Control-Shift-P on Linux or Windows. Enter Flutter: New Application Project into the palette and press Return.

Select a folder to store the project. Then, enter ghflutter for the project’s name, press Return and wait for Flutter to set up the project in VS Code. When the project is ready, you’ll see main.dart in your editor.

In VS Code, you see a panel on the left-hand side that shows your project structure. There are folders for Android, iOS and the web. These folders contain the files necessary to deploy your app on those platforms. There’s also a lib folder that contains main.dart and will have code that applies to both platforms. You’ll work mainly in the lib folder in this tutorial.

Testing is an important part of Flutter development. However, it isn’t the focus of this tutorial, so delete the test folder by right-clicking it and selecting Delete from the menu.

Editing the Code

Next, replace the code in main.dart with the following:

import 'package:flutter/material.dart';

void main() => runApp(const GHFlutterApp());

class GHFlutterApp extends StatelessWidget {
  const GHFlutterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GHFlutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GHFlutter'),
        ),
        body: const Center(
          child: Text('GHFlutter'),
        ),
      ),
    );
  }
}

If you’re using Android Studio, don’t worry about purposefully saving — it autosaves by default.

In the code above, main uses the => operator for a single line function to run the app. You have one class for the app named GHFlutterApp.

Your app itself is a stateless widget. Most entities in a Flutter app are widgets, either stateless or stateful. You override build to create your app widget. Right after the return keyword, you see the MaterialApp widget, which helps your app conform to the Material Design guidelines.