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

title: Responsive layouts, part 1
description: Sizing, clipping, explicit constraints, Images, and Containers
privateVideoUrl:
isPublicLesson: true
code: 

https://gitlab.com/fullstackio/books/newline-course-apps/isaac-lyman-line-of-business-apps-with-flutter-3/-/tree/main/App/revenue_explorer_complete_app

 widget will be a vertical layout with the following items, from top to bottom:

At some point (depending on the size of your app window), this widget will start overflowing its bounds vertically, which Flutter will warn you about. You'll handle that later on in the 

class _ProfileContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.network(imageUrl),
      ],
    );
  }
}

 has named constructors to let you display image files from various sources, like the target device's file system or a byte stream. It can handle any of the most common image formats (PNG, JPG, GIF, WebP, BMP) as well as any formats the underlying OS knows how to read. 

 accepts a web URI, which is perfect for this situation.

 also has a default constructor, which you could use like this:

class _ProfileContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image(image: NetworkImage(imageUrl)),
      ],
    );
  }
}

Flutter doesn't have the ability to display SVG files. SVG isn't just an image format; it's a document format that supports interactivity, animation, inline JavaScript, CSS styles, embedded fonts, and foreign objects (including HTML fragments and non-vector images). Full coverage of the SVG spec would require Flutter to be a web browser, which isn't what it's for.

If you have an SVG file you want to include in your app, your options are (from best to worst):

 will be underlined in red, of course. Make 

class _ProfileContent extends StatelessWidget {
  final RevExUser? user;

  const _ProfileContent({required this.user});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.network(user.profilePictureUrl),
      ],
    );
  }
}

 is a required, named constructor parameter. 

 is underlined in red—you'll get to that in a moment. First, pass 

// RevExProfilePage widget build method
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: _ProfileContent(user: user),   // <= argument added here
    ),
    _ProfileFixedFooter(),
  ],
);

Okay, now let's deal with the lint error. 

We can handle both those cases with a ternary statement, falling back to a simple icon.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      user?.profilePictureUrl != null
          ? Image.network(user!.profilePictureUrl!)
          : const Icon(Icons.account_circle),
    ],
  );
}

 bang operators are useful here because while the null check doesn't 

 guarantee the object and field aren't null—for all Dart knows, one of them could be a getter with unforeseeable side effects—we know enough about our own code to be certain that if it passes, the object and field are safe to use.

If you wanted to display nothing at all in the null case instead of an icon, you could do this:

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      if (user?.profilePictureUrl != null)
        Image.network(user!.profilePictureUrl!),
    ],
  );
}

 statement in a list literal. Here, it results in an empty list if 

If you're running the app on MacOS right now, you might be getting an "Operation not permitted" error. See 

Right now, the picture of esteemed historical figure Edward Jenner doesn't really look like a profile picture. It takes up too much space and isn't round, like in my mockup.

There are several ways you can limit its size. Start by wrapping it in a 

 widgets to make sure it takes up at most one-third of the width of the screen:

// _ProfileContent build method
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(   // <= Expanded added here
            child: SizedBox.shrink(),
          ),
          Expanded(         // <= and here
            child: user?.profilePictureUrl != null
                ? Image.network(user!.profilePictureUrl!)
                : const Icon(Icons.account_circle),
          ),
          const Expanded(   // <= and here
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}

 is a widget that shrinks down to its minimum possible size. It's a useful widget for cases where you have to provide 

 (Expanded requires a child) but don't actually want to show anything. If you visit the Widget Inspector, you'll see that the Expanded is forcing it to have a non-zero width, but it has zero height.

If you think the profile picture is a little too small now, there's an easy fix for that. 

 field that lets you indicate what share of the parent it should take up. By default, this is set to 

, the picture will take up half of the Row's width instead of a third.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(
            child: SizedBox.shrink(),
          ),
          Expanded(
            flex: 2,    // <= flex field
            child: user?.profilePictureUrl != null
                ? Image.network(user!.profilePictureUrl!)
                : const Icon(Icons.account_circle),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}

That looks about right for portrait mode on a phone. On a larger screen (think landscape mode on a tablet), it's still too big. You can set a maximum size in logical pixels using the 

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(
            child: SizedBox.shrink(),
          ),
          Expanded(
            flex: 2,
            child: ConstrainedBox(     // <= ConstrainedBox added here
              constraints: const BoxConstraints(maxHeight: 200),
              child: user?.profilePictureUrl != null
                  ? Image.network(user!.profilePictureUrl!)
                  : const Icon(Icons.account_circle),
            ),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}

 constructor lets you specify a minimum and maximum height and width. A maximum height of 200 logical pixels (about 2 real-world inches or 5 real-world centimeters) looks reasonable to me on large screens—it will, of course, still shrink as needed on smaller screens.

* * *

title: Responsive layouts, part 1
description: Sizing, clipping, explicit constraints, Images, and Containers
privateVideoUrl:
isPublicLesson: true
code: <https://gitlab.com/fullstackio/books/newline-course-apps/isaac-lyman-line-of-business-apps-with-flutter-3/-/tree/main/App/revenue_explorer_complete_app>

The `_ProfileContent` widget will be a vertical layout with the following items, from top to bottom:

-   The user's profile image with their name superimposed at the bottom
-   Job title
-   Username, email, and phone number
-   Expandable client list

:::warning
At some point (depending on the size of your app window), this widget will start overflowing its bounds vertically, which Flutter will warn you about. You'll handle that later on in the _Scrolling layouts_ lesson.
:::

## Image

Start by adding a Column to `_ProfileContent`, with an [`Image`](https://api.flutter.dev/flutter/widgets/Image-class.html) widget to show the profile picture.

```dart
class _ProfileContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.network(imageUrl),
      ],
    );
  }
}
```

`Image` has named constructors to let you display image files from various sources, like the target device's file system or a byte stream. It can handle any of the most common image formats (PNG, JPG, GIF, WebP, BMP) as well as any formats the underlying OS knows how to read. `Image.network` accepts a web URI, which is perfect for this situation.

`Image` also has a default constructor, which you could use like this:

```dart
class _ProfileContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image(image: NetworkImage(imageUrl)),
      ],
    );
  }
}
```

`Image.network` is just a little shorter.

:::warning

Flutter doesn't have the ability to display SVG files. SVG isn't just an image format; it's a document format that supports interactivity, animation, inline JavaScript, CSS styles, embedded fonts, and foreign objects (including HTML fragments and non-vector images). Full coverage of the SVG spec would require Flutter to be a web browser, which isn't what it's for.

If you have an SVG file you want to include in your app, your options are (from best to worst):

1.  Rasterize it (convert to a supported image format at a specific resolution).
2.  Create a [`CustomPainter`](https://api.flutter.dev/flutter/rendering/CustomPainter-class.html) and rewrite your SVG as a series of Canvas method calls.
3.  Convert the SVG to a custom font glyph and include the font in your [asset bundle](https://api.flutter.dev/flutter/services/AssetBundle-class.html), then display it with a `Text` widget.
4.  Use a [Pub package](https://pub.dev/packages?q=sdk%3Aflutter+svg) that supports a limited subset of SVG.
5.  Use a [WebView](https://pub.dev/packages/webview_flutter) and let it handle the SVG.

:::

`imageUrl` will be underlined in red, of course. Make `_ProfileContent` accept a `RevExUser` object so you can provide a real value:

```dart
class _ProfileContent extends StatelessWidget {
  final RevExUser? user;

  const _ProfileContent({required this.user});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.network(user.profilePictureUrl),
      ],
    );
  }
}
```

Now `user` is a required, named constructor parameter. `user.profilePictureUrl` is underlined in red—you'll get to that in a moment. First, pass `user` into the widget from `RevExProfilePage`, like so:

```dart
// RevExProfilePage widget build method
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: _ProfileContent(user: user),   // <= argument added here
    ),
    _ProfileFixedFooter(),
  ],
);
```

## Conditional rendering

Okay, now let's deal with the lint error. `user.profilePictureUrl` is underlined in red for two reasons:

1.  `user` might be null.
2.  Even if `user` isn't null, `profilePictureUrl` is a nullable field, so it might be null.

We can handle both those cases with a ternary statement, falling back to a simple icon.

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      user?.profilePictureUrl != null
          ? Image.network(user!.profilePictureUrl!)
          : const Icon(Icons.account_circle),
    ],
  );
}
```

The `!` bang operators are useful here because while the null check doesn't _technically_ guarantee the object and field aren't null—for all Dart knows, one of them could be a getter with unforeseeable side effects—we know enough about our own code to be certain that if it passes, the object and field are safe to use.

If you wanted to display nothing at all in the null case instead of an icon, you could do this:

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      if (user?.profilePictureUrl != null)
        Image.network(user!.profilePictureUrl!),
    ],
  );
}
```

Dart knows how to handle an inline `if` statement in a list literal. Here, it results in an empty list if `user` or `profilePictureUrl` is null.

## Operation not permitted

If you're running the app on MacOS right now, you might be getting an "Operation not permitted" error. See [this Stack Overflow answer](https://stackoverflow.com/a/65866640/4347245) for a quick fix.

## Sizing and clipping

Right now, the picture of esteemed historical figure Edward Jenner doesn't really look like a profile picture. It takes up too much space and isn't round, like in my mockup.

![Screenshot of the Profile page so far. The oil painting of Edward Jenner takes up most of the screen and is rectangular.](https://d2uusema5elisf.cloudfront.net/courses/line-of-business-mobile-apps-with-flutter-and-dart/module_04/lesson_04.06/public/assets/picture-too-big.png)

There are several ways you can limit its size. Start by wrapping it in a `Row` and using `Expanded` widgets to make sure it takes up at most one-third of the width of the screen:

```dart
// _ProfileContent build method
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(   // <= Expanded added here
            child: SizedBox.shrink(),
          ),
          Expanded(         // <= and here
            child: user?.profilePictureUrl != null
                ? Image.network(user!.profilePictureUrl!)
                : const Icon(Icons.account_circle),
          ),
          const Expanded(   // <= and here
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}
```

`SizedBox.shrink()` is a widget that shrinks down to its minimum possible size. It's a useful widget for cases where you have to provide _something_ (Expanded requires a child) but don't actually want to show anything. If you visit the Widget Inspector, you'll see that the Expanded is forcing it to have a non-zero width, but it has zero height.

If you think the profile picture is a little too small now, there's an easy fix for that. `Expanded` has a `flex` field that lets you indicate what share of the parent it should take up. By default, this is set to `1`, but if you change it to `2`, the picture will take up half of the Row's width instead of a third.

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(
            child: SizedBox.shrink(),
          ),
          Expanded(
            flex: 2,    // <= flex field
            child: user?.profilePictureUrl != null
                ? Image.network(user!.profilePictureUrl!)
                : const Icon(Icons.account_circle),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}
```

## ConstrainedBox and BoxConstraints

That looks about right for portrait mode on a phone. On a larger screen (think landscape mode on a tablet), it's still too big. You can set a maximum size in logical pixels using the [`ConstrainedBox`](https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html) widget.

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(
            child: SizedBox.shrink(),
          ),
          Expanded(
            flex: 2,
            child: ConstrainedBox(     // <= ConstrainedBox added here
              constraints: const BoxConstraints(maxHeight: 200),
              child: user?.profilePictureUrl != null
                  ? Image.network(user!.profilePictureUrl!)
                  : const Icon(Icons.account_circle),
            ),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}
```

`ConstrainedBox` has a `constraints` field of type [`BoxConstraints`](https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html), and the `BoxConstraints` constructor lets you specify a minimum and maximum height and width. A maximum height of 200 logical pixels (about 2 real-world inches or 5 real-world centimeters) looks reasonable to me on large screens—it will, of course, still shrink as needed on smaller screens.

## Container

The [`Container`](https://api.flutter.dev/flutter/widgets/Container-class.html) widget combines the powers of several other layout widgets such as Padding, Align, and ConstrainedBox (which we've already covered) as well as DecoratedBox and Transform (which we haven't). If you need to do two or more of these layout operations at once, a Container will save you some depth in your build tree.

You want the profile picture to be a cropped circle, which is something Container knows how to do. Let's swap out the ConstrainedBox widget for a Container (you won't need to change any of the fields, just the widget name). Then you can add the `clipBehavior` and `decoration` fields to get a circular frame:

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Row(
        children: [
          const Expanded(
            child: SizedBox.shrink(),
          ),
          Expanded(
            flex: 2,
            child: Container(
              clipBehavior: Clip.antiAlias,
              constraints: const BoxConstraints(maxHeight: 200),
              decoration: const ShapeDecoration(shape: CircleBorder()),
              child: user?.profilePictureUrl != null
                  ? Image.network(
                      user!.profilePictureUrl!,
                      fit: BoxFit.cover,
                    )
                  : const Icon(Icons.account_circle),
            ),
          ),
          const Expanded(
            child: SizedBox.shrink(),
          ),
        ],
      ),
    ],
  );
}
```

The `clipBehavior` field determines how to crop the child. By default, it's set to `Clip.none`, which doesn't crop at all. When you change it, you'll usually use `Clip.antiAlias`, or in performance-sensitive situations, you can use `Clip.hardEdge`, which is uglier but faster.

The `decoration` field can be used to apply a background gradient or a shape. To use a circular shape, a [`ShapeDecoration`](https://api.flutter.dev/flutter/painting/ShapeDecoration-class.html) with a [`CircleBorder`](https://api.flutter.dev/flutter/painting/CircleBorder-class.html) will do the trick.

Finally, you can use the `fit` field on the `Image` constructor to determine how the image is painted inside its parent. Usually, it defaults to `BoxFit.scaleDown`, which shrinks the image if it's too big to fit inside the parent. In this case, you want `BoxFit.cover`, which expands the image (while preserving its aspect ratio) to fill the parent.