Getting Started with Flutter for Web

Using Dart and Flutter to build great web experiences

Introduction

Flutter has been gaining popularity as a mobile development SDK since its debut in late 2018, and with the addition of web as a target, this excellent SDK is now is now available for web developers to create stunning high-quality web experiences that take full advantage of the latest web APIs.

In this article we‘ll look at how to create a simple web page with Flutter for Web that consists of a basic layout, some text and images, and a few scroll animations for added effect. As a quick example it won’t likely win any UX design challenges, but it gets the job done for demonstration purposes.

Environment

To get a working environment up and running for building web applications with Flutter, you’ll need the following tools installed:

• Flutter: installation page here
• Stagehand: $ pub global activate stagehand (to create new apps)
• IDE: An IDE or code editor such as VS Code with the Dart extension

To verify that you have a working Flutter installation, run $ flutter doctor and make sure to download any missing extensions or other dependencies.

The source code for this project is available here on GitHub. Make sure to run $ flutter pub get in the project directory (unless you have an environment that support automatic resolving of dependencies).

Project Structure

This project was created with the command $ stagehand web-simple which sets up an empty web project that doesn’t yet have the flutter_web package as a dependency, so we’ll add these to the project’s pubspec.yaml file:

This pubspec.yaml is pretty typical of a Flutter project, with a few additions for building web applications, along with dependency overrides with git repo url and path, since the flutter_web package is not yet published to the pub.dartlang.org repository and pub will fail without these overrides.

App Entry Point

Let’s take a look at the main source file, lib/main.dart:

This is a fairly standard main application file for any Flutter app, with an implementation of StatelessWidget that builds a MaterialApp which wraps the HomePage widget, which we’ll take a look at next.

The Home Page

Next we’ll check out the home page in lib/home.dart:

Here is where we get into some real code. The HomePage class extends a StatefulWidget, to allows it to maintain it’s own internal state with non-final properties that are mutable. There is a _cards property that takes the imported section definitions and returns a List of Section objects to be displayed. The _controller property holds a reference to a ScrollController which will be used to drive the animations in the rest of the app.

The build method for this widget returns a Scaffold that contains a Stack (for stacking widgets on the z-axis) with a Background that takes in the ScrollController to drive a parallax animation, and a ListView to display the list of page sections to scroll through, which in this case is using the provided controller to drive the list (instead of creating one internally by default). This is a fairly standard configuration for managing scroll effects in Flutter, since it allows a controller with custom behavior to be created and then used to drive both a scrolling element directly, and any number of animation effects via AnimatedWidget (or by using a related concept such as AnimatedBuilder).

The Background

Next up is the website background in lib/background.dart:

The Background widget is an implementation of AnimatedWidget that takes an Image and a Listenable object (or in this case a ScrollController which is one of many classes that implement Listenable). The value of listenable is passed up to the super class to allow the app to refresh the animated widget when a scroll event occurs. In the build method, calculations are performed to determine how far the user has scrolled on the ListView (which is utilizing the same ScrollController) and this value is provided to the alignment property on the image as a y-offset, which results in a slow scrolling motion that produces a nice parallax effect when combined with the scrolling content in the foreground. Also, various null checks are performed since the controller may not be fully initialized and ready when this widget first renders.

Page Section Definitions

Now let’s check out the page definitions in lib/section-def.dart:

The SectionDef class is for defining a page section along with it’s name, description, and image. Also in this file is the list of section definitions which is used by the HomePage to create a list of Section objects to be rendered.

Page Section Class

Finally we’ll take a look at the code for a page section in lib/section.dart:

There are two classes in this file, the Content class which is basically a small utility widget that was used here to prevent over-nesting of code blocks which can get out of hand quickly on a Flutter project, and the actual Section class itself, which draws the page sections and applies an opacity derived in a similar way to the parallax scroll effect calculation in the Background.

The Section class constructor takes the current item’s index (position in the list of sections), total (number of sections), item (the section definition), and listenable (drives the animation). This class calculates it’s own opacity based on it’s position in the section definition list along with the current scroll position. The objective here is to scale the opacity between 0.2 (for an item that isn’t currently in view) and 1.0 (for an item that is scrolled into view). This is effectively derived from the number 1.0 (max opacity) minus absolute value of the distance between the item and the current scroll position. This way, as the items scroll out of view in either direction, their opacity increases.

Conclusion

Flutter for Web is still currently in development at the time of this writing, however the good folks over at Google are working hard to merge it into the main Flutter branch as just another build target along with iOS and Android.

Feel free to clone the template repo for this project and experiment with it to learn more, and check out the official Flutter for Web page for more information and the latest development efforts on the project.

Thanks for reading!

Kenneth Reilly (8_bit_hacker) is CTO of LevelUP