Introduction to the Flutter Framework

Understand the fundamentals of the Flutter framework, including its file structure, packages, and widgets.

We'll cover the following

Flutter framework

Flutter is an open-source mobile development framework created by Google, allowing developers to create native apps for Android, web, and iOS from a single codebase. It supports a wide range of features and tools such as a rich set of widgets, hot reload, and a powerful rendering engine.

Press + to interact

Getting started

Setting up Flutter is a relatively straightforward process. Flutter is already set up on the Educative platform. For a detailed installation guide, please view the documentation on the official website.

After creating the project, click “Run” to get the default counter app.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.dockertest">
    <!-- The INTERNET permission is required for development. Specifically,
         the Flutter tool needs it to communicate with the running application
         to allow setting breakpoints, to provide hot reload, etc.
    -->
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>
A default counter app

The Flutter app is run in a Docker container on the Educative platform when the single-page application (SPA) widget is in use. The default Flutter counter app is a straightforward counter application. By interacting with the app’s user interface (UI), which is shown within the SPA widget, users can increase or decrease the counter. On the screen, the counter value is dynamically updated without refreshing the website.

Running the SPA widget alongside the default Flutter counter app serves the dual purpose of showcasing the Flutter framework’s capabilities and the ability of SPAs to develop responsive and interactive UIs. Developers can take advantage of the capability of Flutter to create cross-platform apps that provide a seamless user experience by embedding the SPA widget in a web page or application.

The Docker container provides an isolated environment for running the Flutter app, ensuring consistent behavior across different systems. This setup allows developers to focus on building the app’s logic and UI while the SPA widget handles the execution and display of the app.

We’ll first go through the basics of the Flutter framework to better the development experience.

Flutter file structure

The Flutter file structure is made up of project files, directories, and packages. Familiarity with the file layout of the Flutter framework can be very useful for quick understanding and easy app configuration during development.

There are three main folders and files that we’ll learn about and use throughout the course. The SPA widget above shows these, along with the contents they hold in a Flutter project. Following are the files and folders:

The lib folder

Our dart code and the main.dart file are both located in the lib directory. This directory also hosts files for our widget and code for accessing our backend.

The pubspec.yaml file

This file holds the specifications of the app design and core elements, along with the project metadata, which is declared or installed in the project using the pub get Flutter command.

The assets folder

To achieve a visually appealing UI, images, data files, and fonts need to be kept in their folders located in the assets directory. Any folder file or object must be mentioned in the pubspec.yaml file for easier referencing in the code. This can be seen on lines 63–64 in the pubspec.yaml file.

Flutter widgets

In the Flutter framework, a widget is the basic building block for creating a UI. Widgets create the layout and structure of an app, as well as handle user interactions. They include built-in components like text, buttons, images, and custom components to create complex layouts.

There are two main types of widgets in Flutter:

  • Stateless widgets: These widgets are immutable and will not change over time. Examples of stateless widgets include images.

  • Stateful widgets: These widgets can change over time and hold a mutable state. For example, a TextField widget could be stateful, as the text it displays can change.

Flutter’s widgets use a modern reactive framework, meaning that changes to the widgets are automatically propagated throughout the app so that the UI always reflects the app’s current state.

Widget tree

In Flutter, the widgets that make up the UI of an app form a tree-like structure known as the widget tree. The top-most widget in the tree is the root widget, and all other widgets are connected to it as its children, grandchildren, and so on. Here’s an example of a simple widget tree:

Press + to interact
Visual representation of the widget tree
Visual representation of the widget tree
Press + to interact
    Container(

      child:Column(

      children: [

        Text("Title"),

        Image.network(

          "https://example.com/image.png",

        ),

        Text("Description"),

        Button(

          child: Text("Click me"),

        ),

      ],

    ),

    )

In the example above, the root widget is the Container widget with the Column widget as a child, which is used to display its children in a vertical list.

The children of the Column widget are as follows:

  • Line 4: A Text widget that displays the text “Title”

  • Lines 5–6: An Image widget that displays an image from a URL

  • Line 8: Another Text widget that displays the text “Description”

  • Lines 9–10: A Button widget that displays a button with the label “Click me”

It goes without saying that the tree becomes more complex as we build complex apps, but this hierarchical structure is a fundamental concept in Flutter, and it’s very important to understand it for building and maintaining the apps.