Introduction to the course, prerequisites, and goals

About this course

Introduction

About Module 2

Overview of the technology used in this course

About Flutter and Dart

Everything you need to start building Flutter apps

Hardware & software setup

\`flutter create\` and the Flutter project structure

Creating a Flutter app

How to build your app for emulators and physical devices

Running your app

Integrating external packages and libraries

Pub packages

Setting the app name, icon, and bundle ID

Packaging for the App Store and Google Play

Setting up your environment and packaging apps

Getting Started

About Module 3

A 5-minute introduction to the Dart language

Dart cheat sheet

Flutter in a nutshell

Setup: State

Setup: Theming

Setup: Navigation

Setup: Scaffold

Learn the basics you need to build any kind of app

Creating A Seed App

About Module 4

Text, app bar actions, and widgets that wrap every page

Creating the widget and route

Stubbing data

Widgets that wait for data

Column, Row, Padding, spacing, and alignment

Layout basics

Image

Table layouts, expansion panels, and rich text

Responsive layouts, part 2

ListView, SingleChildScrollView, and Scrollbar

Scrolling layouts

How to think about layout, infinite constraints, and unbounded size

Layout problems

TextButton, OutlinedButton, FilledButton, ElevatedButton, and button styles

Buttons

The Profile Page

About Module 5

VoiceOver on iOS

Testing accessibility on an Android emulator

TalkBack on Android

Accessibility Widgets

Making sure your app works with a screen reader

Accessibility

About Module 6

Shared preferences

HTTP requests

Login and authentication

State management with Provider and Consumer

Managing user state

Storage and HTTP

About Module 7

Building and sorting a DataTable with DataTableSource

Data tables

Using fl_chart for responsive visualizations

Charts and graphs

Building data visualizations that impress

Tables and Charts

About Module 8

Simple animations

Custom paint

Custom animations

Off-the-shelf transitions, custom drawings, and fine-tuned animations

Animations

About Module 9

flutter_test and the Flutter unit testing API

Unit tests

Testing UI interactions on individual widgets

Widget tests

Testing your entire app with automated interactions

End-to-end tests

Unit tests, widget tests, and end-to-end tests

Testing

Congratulations

Wrapping up

Flutter is a popular cross-platform development framework. It's packed with off-the-shelf features and focused
on developer ergonomics, which means you can build faster and deploy to more platforms with fewer dependencies.
Some parts of the framework will catch you by surprise, though, especially if you're used to developing for the
web or writing native apps. This course will walk you through the creation of a Flutter app from setup to
final package and help you develop a mental model that will carry you through the most common problems Flutter
devs encounter.

By the end of these 10 modules you'll have built:
- A Flutter seed project that can manage state, swap out color palettes, and handle deep links
- An accessible, error-resistant profile page that fetches data from a web API
- A responsive data table and data-driven visualizations
- A complete app ready to deploy to iPhone and Android

This course includes sample code, explained step-by-step, that you can reuse for any Flutter app you build.

It's taught by Isaac Lyman, author of _Your First Year in Code_ and Top 10 Author on The DEV Community.

After completing Line-of-Business Apps with Flutter 3, developers have the skills to build mobile apps backed by their
choice of server technologies, taking advantage of the incomparable performance, speed-to-value, and developer
experience of Flutter and Dart.

What developers are saying

Flutter

Dart

Bring your mobile app ideas to life on every device

### Build Better Mobile Apps with Flutter

Smartphones are the most popular computing devices in the world, and mobile apps are the best way to reach
technology consumers. But building fully native apps means learning two or more completely different sets of
programming languages, UI frameworks, layout systems, and developer toolkits. Other cross-platform frameworks
have tried to make this process easier, but none of them have achieved the popularity, performance, or resilience
of Flutter.

With Flutter, you'll avoid several problems you may have had with other app frameworks:

- Publish native app packages for iOS, Android, Windows, macOS, and Linux, all from a **single codebase**, without
writing a single line of native code.
- Write **faster, safer code** with the familiar syntax, type safety, and null safety of the Dart programming language.
- Flutter is an **all-in-one component library and toolkit**: spend your time building components and writing application logic
instead of fiddling with toolchain configuration and searching for 3rd-party packages.
- Never worry about the way your app looks on different devices; with Flutter's **built-in rendering engine**
and **logical pixel scaling**, your app will look the same on every screen, everywhere.

### Be Prepared for Any Challenge

Flutter is an easy-to-learn, top-rated technology for developers, but it doesn't come without gotchas. In this course, you'll
learn to breeze right through some of the hardest parts of Flutter development:

- Responsive design, complex layouts, and breakpoints
- Layout errors and infinite constraints
- Hand-drawn components
- Custom animations, tickers, and tweens
- State management and data persistence

### Start Building Real Apps Faster

This course won't waste any time teaching you what an `if` statement is. You'll be able to use the
programming experience you already have and jump straight into building mobile apps with Dart and Flutter.

Along the way, you'll build skills you can use immediately for any app you dream up:

- By the end of Module 2, you'll have already packaged a Flutter app for distribution on the iOS and Android
app stores.
- By the end of Module 3, you'll have a seed app you can use for any project.
- By the end of Module 4, you'll know how to build responsive layouts and use the most common types of widgets.
- By the end of the course, you'll have built an **accessible**, **interactive**, **server-backed** app with **custom animations**
and **three types of automated tests**.

Along the way, you'll discover Flutter's secret: it's not only the easiest way to build cross-platform mobile
and desktop apps, it's the easiest way to deliver **any* kind of technological experience, **period**. Not even the web, with
its variety of frameworks and tools, can match the development speed and polished UI of a Flutter app.

Build cross-platform iOS and Android apps faster than you thought possible

In this course you'll build a corporate app and package it for iPhone and Android from a single codebase.

Flutter is a popular and feature-rich multi-platform development toolkit, but it's got some surprises for
traditional web and desktop developers. You'll learn how to think in the Flutter way and build fast, maintainable,
visually appealing apps.

Line-of-Business Mobile Apps with Flutter and Dart

Build a secure login modal with HTTP authentication and persistent cookies

Build responsive, nested layouts and intuitive user interactions

Build fast, informative data visualizations

How to build and package apps for iOS and Android from a single codebase

Why Flutter and Dart are a perfect match for multi-platform apps

The Flutter paradigm for layout and components

How to keep your Flutter app fast and responsive

State management, server requests, accessibility, and more

The Dart server included with this course includes login functionality. It's not completely secure, but you won't be using it in production anyway—it's just here to help you practice connecting to a remote server for authentication. It uses cookies to authorize the user for up to 3 days after they log in.

To turn on security in the Dart server, open up 

Then, start (or restart) the server. Remember, you can run the server by executing 

If you try to visit the Profile page in the app now, you'll get an error. This is because the server is returning a 401 Unauthorized status code from all 

 endpoints. You'll need to log in to access those.

The server has two authorization endpoints: 

, which accepts an email and password in the POST body, and 

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'http.dart';

Future<bool> revExLogIn(String email, String password) async {
  final response = await http.post(
    Uri.http(revexApiUrl, '/auth/login'),
    headers: revexDefaultHeaders,
    body: jsonEncode(<String, String>{
      email: email,
      password: password,
    }),
  );

  return response.statusCode == 200;
}

Future revExLogOut() async {
  await http.get(
    Uri.http(revexApiUrl, '/auth/logout'),
    headers: revexDefaultHeaders,
  );
}

You may have to use an OAuth flow to authenticate in a corporate context. Pub.dev has a first-party package called 

Now you'll build some UI. Your first instinct may be to build a new page, e.g., 

. There are a couple of reasons why that isn't ideal.

The best option here is an overlay, which will cover the entire screen without losing context.

. There are no surprises here: an overlay is a widget, like everything else in Flutter.

The Login overlay will need a StatefulWidget with its own Scaffold (since it doesn't live inside the one in RevExScaffold). It will also need a widget you haven't used yet: 

Interactive buttons were covered in a previous lesson, but 

 has a whole new level of interactivity. A text field widget should be able to handle different types of input (phone numbers, email addresses, passwords, etc.), maintain its current state when the widget re-renders, and be able to validate input as the user types.

TextField can do all of the above and integrates nicely with StatefulWidget. For each TextField you create, you'll need a 

, which is an object that lets you access the current value of the field (whatever the user has typed).

class RevExLoginOverlay extends StatefulWidget {
  @override
  State<RevExLoginOverlay> createState() => _RevExLoginOverlayState();
}

class _RevExLoginOverlayState extends State<RevExLoginOverlay> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
}

Once you have a TextEditingController, you can create a TextField like this:

TextField(
  controller: _emailController,
  decoration: InputDecoration(
    labelText: "My text field",
  ),
  keyboardType: TextInputType.text,
  onChanged: (value) {
    // Anything you want to do when the user types something
  },
),

The TextField constructor has a shocking number of parameters you can use, but this is all you need to get started—and if you're feeling especially un-picky, you can even get away without the 

You'll use two of these: one for the user's login email and one for their password. You'll also need a "Log In" button, which will be disabled if either input is invalid. Once all the widgets you need are added, the file will look like this:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:revenue_explorer/http/auth.http.dart';
import 'package:revenue_explorer/theme.dart';

final _emailRegex = RegExp(r"[^\s]+\@[^\s]+\.[^\s]+");

class RevExLoginOverlay extends StatefulWidget {
  @override
  State<RevExLoginOverlay> createState() => _RevExLoginOverlayState();
}

class _RevExLoginOverlayState extends State<RevExLoginOverlay> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool isValid = false;

  bool isEmailValid() {
    final email = _emailController.text;
    return email.trim().isNotEmpty && _emailRegex.hasMatch(email);
  }

  bool isPasswordValid() {
    final password = _passwordController.text;
    return password.isNotEmpty;
  }

  void checkFormValidity() {
    setState(() {
      isValid = isEmailValid() && isPasswordValid();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.transparent),
            borderRadius: BorderRadius.circular(20),
            color: context.theme.appTheme.data.dialogBackgroundColor,
          ),
          margin: const EdgeInsets.symmetric(horizontal: 16),
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Padding(
                padding: EdgeInsets.only(bottom: 16),
                child: Text(
                  "Please log in to continue",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: TextField(
                  autocorrect: false,
                  controller: _emailController,
                  decoration: InputDecoration(
                    errorText: isEmailValid() || _emailController.text.isEmpty
                        ? null
                        : "Please enter a valid email address.",
                    isDense: true,
                    labelText: "Email",
                  ),
                  keyboardType: TextInputType.emailAddress,
                  onChanged: (_) {
                    checkFormValidity();
                  },
                  textInputAction: TextInputAction.done,
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: TextField(
                  autocorrect: false,
                  controller: _passwordController,
                  decoration: const InputDecoration(
                    isDense: true,
                    labelText: "Password",
                  ),
                  enableSuggestions: false,
                  keyboardType: TextInputType.visiblePassword,
                  obscureText: true,
                  onChanged: (_) {
                    checkFormValidity();
                  },
                  textInputAction: TextInputAction.done,
                ),
              ),
              ElevatedButton(
                onPressed: isValid
                    ? () async {
                        final messenger = ScaffoldMessenger.of(context);
                        final success = await revExLogIn(
                            _emailController.text, _passwordController.text);

                        if (!success && messenger.mounted) {
                          messenger.showSnackBar(const SnackBar(
                            content: Text(
                              "Login failed. Please check your login details and try again.",
                            ),
                          ));
                        }

                        if (success && context.mounted) {
                          context.pop();
                        }
                      }
                    : null,
                child: const Text("Log In"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

You should recognize the rest of these widgets from previous lessons. Though you haven't added any code to show it yet, the overlay looks like this:

---
title: Login and authentication
description: Security, cookies, and overlay modals
privateVideoUrl: 
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/isaac-lyman-line-of-business-apps-with-flutter-3/-/tree/main/App
---

The Dart server included with this course includes login functionality. It's not completely secure, but you won't be using it in production anyway—it's just here to help you practice connecting to a remote server for authentication. It uses cookies to authorize the user for up to 3 days after they log in.

## Securing the server

To turn on security in the Dart server, open up `server/bin/dart_server.dart` and change the `useSecurity` constant to `true`:

```dart
const useSecurity = true;
```

Then, start (or restart) the server. Remember, you can run the server by executing `dart run` from the `server/` folder.

If you try to visit the Profile page in the app now, you'll get an error. This is because the server is returning a 401 Unauthorized status code from all `/user` and `/client` endpoints. You'll need to log in to access those.

## Login HTTP methods

The server has two authorization endpoints: `/auth/login`, which accepts an email and password in the POST body, and `/auth/logout`. Let's create a new file at `lib/http/auth.http.dart` to use them.

```dart { actualFilename=./protected/src/auth.http.dart endChar=530 endLine=24 startChar=0 startLine=1 statedFilename=lib/http/auth.http.dart url=https&#x3A;//gitlab.com/fullstackio/books/line-of-business-mobile-apps-with-flutter-and-dart/module_06/lesson_06.04/protected/src/auth.http.dart }
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'http.dart';

Future<bool> revExLogIn(String email, String password) async {
  final response = await http.post(
    Uri.http(revexApiUrl, '/auth/login'),
    headers: revexDefaultHeaders,
    body: jsonEncode(<String, String>{
      email: email,
      password: password,
    }),
  );

  return response.statusCode == 200;
}

Future revExLogOut() async {
  await http.get(
    Uri.http(revexApiUrl, '/auth/logout'),
    headers: revexDefaultHeaders,
  );
}
```

:::tip

You may have to use an OAuth flow to authenticate in a corporate context. Pub.dev has a first-party package called [oauth2](https://pub.dev/packages/oauth2) for that.

:::

## The login overlay

Now you'll build some UI. Your first instinct may be to build a new page, e.g., `RevExLoginPage`. There are a couple of reasons why that isn't ideal.

1.  All pages in your router are wrapped with a RevExScaffold, which has an app bar. The app bar has a link to the Profile page, which won't work unless the user is logged in. Ideally, you shouldn't let the user do _anything_ until they log in.
2.  Routing the user to a different page when they need to log in means they'll lose their current context. It would be better if they could log in and immediately return to what they were doing.

The best option here is an overlay, which will cover the entire screen without losing context.

Create a new folder `lib/overlays/` and add a file called `login.overlay.dart`. There are no surprises here: an overlay is a widget, like everything else in Flutter.

The Login overlay will need a StatefulWidget with its own Scaffold (since it doesn't live inside the one in RevExScaffold). It will also need a widget you haven't used yet: `TextField`.

## TextField and TextEditingController

Interactive buttons were covered in a previous lesson, but [`TextField`](https://api.flutter.dev/flutter/material/TextField-class.html) has a whole new level of interactivity. A text field widget should be able to handle different types of input (phone numbers, email addresses, passwords, etc.), maintain its current state when the widget re-renders, and be able to validate input as the user types.

TextField can do all of the above and integrates nicely with StatefulWidget. For each TextField you create, you'll need a [`TextEditingController`](https://api.flutter.dev/flutter/widgets/TextEditingController-class.html), which is an object that lets you access the current value of the field (whatever the user has typed).

```dart
class RevExLoginOverlay extends StatefulWidget {
  @override
  State<RevExLoginOverlay> createState() => _RevExLoginOverlayState();
}

class _RevExLoginOverlayState extends State<RevExLoginOverlay> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
}
```

Once you have a TextEditingController, you can create a TextField like this:

```dart
TextField(
  controller: _emailController,
  decoration: InputDecoration(
    labelText: "My text field",
  ),
  keyboardType: TextInputType.text,
  onChanged: (value) {
    // Anything you want to do when the user types something
  },
),
```

The TextField constructor has a shocking number of parameters you can use, but this is all you need to get started—and if you're feeling especially un-picky, you can even get away without the `decoration`, `keyboardType`, and `onChanged` parameters. All you _really_ need is a `controller`.

You'll use two of these: one for the user's login email and one for their password. You'll also need a "Log In" button, which will be disabled if either input is invalid. Once all the widgets you need are added, the file will look like this:

```dart { actualFilename=./protected/src/login.overlay.dart endChar=4296 endLine=126 startChar=0 startLine=1 statedFilename=lib/overlays/login.overlay.dart url=https&#x3A;//gitlab.com/fullstackio/books/line-of-business-mobile-apps-with-flutter-and-dart/module_06/lesson_06.04/protected/src/login.overlay.dart }
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:revenue_explorer/http/auth.http.dart';
import 'package:revenue_explorer/theme.dart';

final _emailRegex = RegExp(r"[^\s]+\@[^\s]+\.[^\s]+");

class RevExLoginOverlay extends StatefulWidget {
  @override
  State<RevExLoginOverlay> createState() => _RevExLoginOverlayState();
}

class _RevExLoginOverlayState extends State<RevExLoginOverlay> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool isValid = false;

  bool isEmailValid() {
    final email = _emailController.text;
    return email.trim().isNotEmpty && _emailRegex.hasMatch(email);
  }

  bool isPasswordValid() {
    final password = _passwordController.text;
    return password.isNotEmpty;
  }

  void checkFormValidity() {
    setState(() {
      isValid = isEmailValid() && isPasswordValid();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.transparent),
            borderRadius: BorderRadius.circular(20),
            color: context.theme.appTheme.data.dialogBackgroundColor,
          ),
          margin: const EdgeInsets.symmetric(horizontal: 16),
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Padding(
                padding: EdgeInsets.only(bottom: 16),
                child: Text(
                  "Please log in to continue",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: TextField(
                  autocorrect: false,
                  controller: _emailController,
                  decoration: InputDecoration(
                    errorText: isEmailValid() || _emailController.text.isEmpty
                        ? null
                        : "Please enter a valid email address.",
                    isDense: true,
                    labelText: "Email",
                  ),
                  keyboardType: TextInputType.emailAddress,
                  onChanged: (_) {
                    checkFormValidity();
                  },
                  textInputAction: TextInputAction.done,
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: TextField(
                  autocorrect: false,
                  controller: _passwordController,
                  decoration: const InputDecoration(
                    isDense: true,
                    labelText: "Password",
                  ),
                  enableSuggestions: false,
                  keyboardType: TextInputType.visiblePassword,
                  obscureText: true,
                  onChanged: (_) {
                    checkFormValidity();
                  },
                  textInputAction: TextInputAction.done,
                ),
              ),
              ElevatedButton(
                onPressed: isValid
                    ? () async {
                        final messenger = ScaffoldMessenger.of(context);
                        final success = await revExLogIn(
                            _emailController.text, _passwordController.text);