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

You could offer insights about transactions in the database in any number of ways. First, you'll allow the user to slice and dice their data by selecting one of the cells in the table:

You could create a separate page for each of these, but you can fairly easily combine them into one using route parameters.

import 'package:flutter/material.dart';
import 'package:revenue_explorer/main.dart';

class RevExDetailPage extends StatefulWidget {
  const RevExDetailPage({super.key});

  @override
  State<RevExDetailPage> createState() => _RevExDetailPageState();
}

class _RevExDetailPageState extends State<RevExDetailPage> {
  @override
  Widget build(BuildContext context) {
    return RevExScaffold(
      title: "Transaction Detail",
      body: const Text("Details"),
    );
  }
}

The detail page needs to know two things: which database column (or class field) to filter on, and which value to filter by. Accept those as String parameters to the widget:

import 'package:flutter/material.dart';
import 'package:revenue_explorer/main.dart';

class RevExDetailPage extends StatefulWidget {
  final String filterColumnName;   // <= new fields on the class
  final String filterColumnValue;

  const RevExDetailPage({
    super.key,
    required this.filterColumnName,   // <= provide them through the constructor
    required this.filterColumnValue,
  });

  @override
  State<RevExDetailPage> createState() => _RevExDetailPageState();
}

class _RevExDetailPageState extends State<RevExDetailPage> {
  @override
  Widget build(BuildContext context) {
    return RevExScaffold(
      title: widget.filterColumnValue,
      body: Text(
          "Filtering ${widget.filterColumnName} with value ${widget.filterColumnValue}"),
    );
  }
}

 only accept String values, you can pass objects and other kinds of values to a route 

. However, this makes the route inaccessible by deep-link, so if you want the page to be shareable you should avoid it.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:revenue_explorer/pages/detail.page.dart';
import 'package:revenue_explorer/pages/overview.page.dart';
import 'package:revenue_explorer/pages/profile.page.dart';

final revexRouter = GoRouter(routes: <GoRoute>[
  GoRoute(
    path: '/',
    redirect: (_, __) => '/overview',
  ),
  GoRoute(
    path: '/overview',
    pageBuilder: (context, state) => const MaterialPage(
      child: RevExOverviewPage(),
    ),
  ),
  GoRoute(     // <= new route defined here
    path: '/detail/:columnName/:columnValue',
    name: 'detail',
    pageBuilder: (context, state) => MaterialPage(
      child: RevExDetailPage(
        filterColumnName: state.params['columnName']!,
        filterColumnValue: state.params['columnValue']!,
      ),
    ),
  ),
  GoRoute(
    path: '/profile',
    pageBuilder: (context, state) => const MaterialPage(
      child: RevExProfilePage(),
    ),
  ),
]);

 start with a colon and are accessed via 

. The null assertion on those parameters could result in an error if you try to visit the route without defining them properly, so you'll need to watch out for that.

 field on a GoRoute is optional, but it allows you to use the 

 method to provide a more structured approach to changing routes, which is nice when you have path parameters like this.

Now, with some updates to RevExOverviewPage, you can provide a way to navigate to the Detail page whenever a Purchaser, Date, or Product Code cell is tapped. It may be nice to show an icon on cells that are tappable to clue the user in, so create a widget for that:

// overview.page.dart

class _TappableCell extends StatelessWidget {
  final String contents;

  const _TappableCell(this.contents);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 8),
          child: Text(contents),
        ),
        const Icon(Icons.bar_chart),
      ],
    );
  }
}

// overview.page.dart
class _TransactionDataSource extends DataTableSource {
// ...

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(_TappableCell(tx.purchaserName)),
      DataCell(Text(tx.amount.toString())),
      DataCell(_TappableCell(formattedDate)),
      DataCell(_TappableCell(tx.productCode)),
    ]);
  }

// ...
}

You may wonder why you went to the trouble of creating a whole new StatelessWidget instead of simply writing a method that returns the widget tree you need, like so:

// DON'T DO THIS:

// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  _tappableCell(String contents) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 8),
            child: Text(contents),
          ),
          const Icon(Icons.bar_chart),
        ],
      );

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(_tappableCell(tx.purchaserName)),
      DataCell(Text(tx.amount.toString())),
      DataCell(_tappableCell(formattedDate)),
      DataCell(_tappableCell(tx.productCode)),
    ]);
  }

  // ...
}

The answer is you could. A widget is just a class instance, so it can be returned from a method. And in this case, there wouldn't be much of a penalty for doing so. In fact, you 

 write your whole app using methods that return widget trees, much like a React app built with functional components, instead of writing StatelessWidget and StatefulWidget classes with 

Flutter is packed with optimizations based on the assumption that your app is a tree of StatelessWidget and StatefulWidget instances. It can re-render things quickly and cheaply because it tracks the parameters and state of each of these and knows which ones to ignore (i.e., there's no reason they would have changed since the last render).

If you sidestep this by writing your own methods—effectively writing massive 

 trees instead of breaking down your UI into smaller Stateless/StatefulWidget classes—you're missing out on a ton of zero-effort performance gains.

 tappable now. Make them actually respond to taps:

// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  void _viewDetail(String columnName, String value) {
    context.goNamed('detail', params: <String, String>{
      'columnName': columnName,
      'columnValue': value
    });
  }

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(
        _TappableCell(tx.purchaserName),
        onTap: () => _viewDetail('purchaserName', tx.purchaserName),
      ),
      DataCell(Text(tx.amount.toString())),
      DataCell(
        _TappableCell(formattedDate),
        onTap: () => _viewDetail('purchaseDate', tx.purchaseDate),
      ),
      DataCell(
        _TappableCell(tx.productCode),
        onTap: () => _viewDetail('productCode', tx.productCode),
      ),
    ]);
  }

  // ...
}

It would be better if you didn't have to use magic strings (e.g., 

) in this code. Dart doesn't have string-valued enums, but you can define a class with static String fields for the same ergonomics:

// detail.page.dart
class RevExDetailColumn {
  static const String purchaserName = 'purchaserName';
  static const String purchaseDate = 'purchaseDate';
  static const String productCode = 'productCode';
}

// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(
        _TappableCell(tx.purchaserName),
        onTap: () => _viewDetail(
          RevExDetailColumn.purchaserName,
          tx.purchaserName,
        ),
      ),
      DataCell(Text(tx.amount.toString())),
      DataCell(
        _TappableCell(formattedDate),
        onTap: () => _viewDetail(
          RevExDetailColumn.purchaseDate,
          tx.purchaseDate,
        ),
      ),
      DataCell(
        _TappableCell(tx.productCode),
        onTap: () => _viewDetail(
          RevExDetailColumn.productCode,
          tx.productCode,
        ),
      ),
    ]);
  }

  // ...
}

Now when you tap on a cell, you'll navigate to the Transaction Detail page and see a message indicating which column and value you're filtering on.

There's one quick issue you should solve: once you've navigated to the Detail page, there's no easy way to go back to the Overview. You can fix that by using 

class _TransactionDataSource extends DataTableSource {
  // ...

  void _viewDetail(String columnName, String value) {
    context.pushNamed('detail', params: <String, String>{
      'columnName': columnName,
      'columnValue': value
    });
  }

  // ...
}

 replace the current Navigator history, whereas 

 add a new entry to it. By default, Flutter's AppBar widget recognizes when you're above the first layer of the Navigator's history stack and automatically provides a Back button.

---
title: Charts and graphs
description: Using fl_chart for responsive visualizations
privateVideoUrl: 
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/isaac-lyman-line-of-business-apps-with-flutter-3/-/tree/main/App
---

You could offer insights about transactions in the database in any number of ways. First, you'll allow the user to slice and dice their data by selecting one of the cells in the table:

-   If they tap a **Purchaser name**, you'll show:

    -   A line chart tracking what purchasers spend over time
    -   A pie chart showing the proportion of spend for each product code by that purchaser
-   If they tap a **Purchase date**, you'll show:

    -   A pie chart showing the proportion of spend by each purchaser on that date
    -   A pie chart showing the proportion of spend for each product code on that date
-   If they tap a **Product code**, you'll show:

    -   A line chart tracking the purchase of that product over time
    -   A pie chart showing the proportion of spend on this product by each purchaser

You could create a separate page for each of these, but you can fairly easily combine them into one using route parameters.

## The page and route

In your `lib/pages/` folder, create a new file `detail.page.dart` that contains a `RevExDetailPage` widget with a `RevExScaffold` in it:

```dart
import 'package:flutter/material.dart';
import 'package:revenue_explorer/main.dart';

class RevExDetailPage extends StatefulWidget {
  const RevExDetailPage({super.key});

  @override
  State<RevExDetailPage> createState() => _RevExDetailPageState();
}

class _RevExDetailPageState extends State<RevExDetailPage> {
  @override
  Widget build(BuildContext context) {
    return RevExScaffold(
      title: "Transaction Detail",
      body: const Text("Details"),
    );
  }
}
```

The detail page needs to know two things: which database column (or class field) to filter on, and which value to filter by. Accept those as String parameters to the widget:

```dart
import 'package:flutter/material.dart';
import 'package:revenue_explorer/main.dart';

class RevExDetailPage extends StatefulWidget {
  final String filterColumnName;   // <= new fields on the class
  final String filterColumnValue;

  const RevExDetailPage({
    super.key,
    required this.filterColumnName,   // <= provide them through the constructor
    required this.filterColumnValue,
  });

  @override
  State<RevExDetailPage> createState() => _RevExDetailPageState();
}

class _RevExDetailPageState extends State<RevExDetailPage> {
  @override
  Widget build(BuildContext context) {
    return RevExScaffold(
      title: widget.filterColumnValue,
      body: Text(
          "Filtering ${widget.filterColumnName} with value ${widget.filterColumnValue}"),
    );
  }
}
```

:::tip

Although path and query parameters in `go_router` only accept String values, you can pass objects and other kinds of values to a route [using the `extra` field](https://stackoverflow.com/questions/74741283/go-router-pass-object-to-new-route/74813017#74813017). However, this makes the route inaccessible by deep-link, so if you want the page to be shareable you should avoid it.

:::

Now define the route in `lib/router.dart`.

```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:revenue_explorer/pages/detail.page.dart';
import 'package:revenue_explorer/pages/overview.page.dart';
import 'package:revenue_explorer/pages/profile.page.dart';

final revexRouter = GoRouter(routes: <GoRoute>[
  GoRoute(
    path: '/',
    redirect: (_, __) => '/overview',
  ),
  GoRoute(
    path: '/overview',
    pageBuilder: (context, state) => const MaterialPage(
      child: RevExOverviewPage(),
    ),
  ),
  GoRoute(     // <= new route defined here
    path: '/detail/:columnName/:columnValue',
    name: 'detail',
    pageBuilder: (context, state) => MaterialPage(
      child: RevExDetailPage(
        filterColumnName: state.params['columnName']!,
        filterColumnValue: state.params['columnValue']!,
      ),
    ),
  ),
  GoRoute(
    path: '/profile',
    pageBuilder: (context, state) => const MaterialPage(
      child: RevExProfilePage(),
    ),
  ),
]);
```

Path parameters in `go_router` start with a colon and are accessed via `state.params` in the `pageBuilder`. The null assertion on those parameters could result in an error if you try to visit the route without defining them properly, so you'll need to watch out for that.

The `name` field on a GoRoute is optional, but it allows you to use the `context.goNamed` method to provide a more structured approach to changing routes, which is nice when you have path parameters like this.

Now, with some updates to RevExOverviewPage, you can provide a way to navigate to the Detail page whenever a Purchaser, Date, or Product Code cell is tapped. It may be nice to show an icon on cells that are tappable to clue the user in, so create a widget for that:

```dart
// overview.page.dart

class _TappableCell extends StatelessWidget {
  final String contents;

  const _TappableCell(this.contents);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 8),
          child: Text(contents),
        ),
        const Icon(Icons.bar_chart),
      ],
    );
  }
}
```

Now in `_TransactionDataSource.getRow`, use this in each tappable cell:

```dart
// overview.page.dart
class _TransactionDataSource extends DataTableSource {
// ...

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(_TappableCell(tx.purchaserName)),
      DataCell(Text(tx.amount.toString())),
      DataCell(_TappableCell(formattedDate)),
      DataCell(_TappableCell(tx.productCode)),
    ]);
  }

// ...
}
```

:::info

You may wonder why you went to the trouble of creating a whole new StatelessWidget instead of simply writing a method that returns the widget tree you need, like so:

```dart
// DON'T DO THIS:

// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  _tappableCell(String contents) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 8),
            child: Text(contents),
          ),
          const Icon(Icons.bar_chart),
        ],
      );

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(_tappableCell(tx.purchaserName)),
      DataCell(Text(tx.amount.toString())),
      DataCell(_tappableCell(formattedDate)),
      DataCell(_tappableCell(tx.productCode)),
    ]);
  }

  // ...
}
```

The answer is you could. A widget is just a class instance, so it can be returned from a method. And in this case, there wouldn't be much of a penalty for doing so. In fact, you _could_ write your whole app using methods that return widget trees, much like a React app built with functional components, instead of writing StatelessWidget and StatefulWidget classes with `build` methods. But this would be a **very bad habit** to get into.

Flutter is packed with optimizations based on the assumption that your app is a tree of StatelessWidget and StatefulWidget instances. It can re-render things quickly and cheaply because it tracks the parameters and state of each of these and knows which ones to ignore (i.e., there's no reason they would have changed since the last render).

If you sidestep this by writing your own methods—effectively writing massive `build` trees instead of breaking down your UI into smaller Stateless/StatefulWidget classes—you're missing out on a ton of zero-effort performance gains.

:::

Your table cells _look_ tappable now. Make them actually respond to taps:

```dart
// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  void _viewDetail(String columnName, String value) {
    context.goNamed('detail', params: <String, String>{
      'columnName': columnName,
      'columnValue': value
    });
  }

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(
        _TappableCell(tx.purchaserName),
        onTap: () => _viewDetail('purchaserName', tx.purchaserName),
      ),
      DataCell(Text(tx.amount.toString())),
      DataCell(
        _TappableCell(formattedDate),
        onTap: () => _viewDetail('purchaseDate', tx.purchaseDate),
      ),
      DataCell(
        _TappableCell(tx.productCode),
        onTap: () => _viewDetail('productCode', tx.productCode),
      ),
    ]);
  }

  // ...
}
```

It would be better if you didn't have to use magic strings (e.g., `'purchaserName'`) in this code. Dart doesn't have string-valued enums, but you can define a class with static String fields for the same ergonomics:

```dart
// detail.page.dart
class RevExDetailColumn {
  static const String purchaserName = 'purchaserName';
  static const String purchaseDate = 'purchaseDate';
  static const String productCode = 'productCode';
}
```

Now swap out the strings in `_TransactionDataSource.getRow`.

```dart
// overview.page.dart
class _TransactionDataSource extends TableDataSource {
  // ...

  @override
  DataRow? getRow(int index) {
    final tx = transactions[index];
    final formattedDate =
        DateFormat.yMd().format(DateTime.parse(tx.purchaseDate));
    return DataRow(cells: [
      DataCell(
        _TappableCell(tx.purchaserName),
        onTap: () => _viewDetail(
          RevExDetailColumn.purchaserName,
          tx.purchaserName,
        ),
      ),
      DataCell(Text(tx.amount.toString())),
      DataCell(
        _TappableCell(formattedDate),
        onTap: () => _viewDetail(
          RevExDetailColumn.purchaseDate,
          tx.purchaseDate,
        ),
      ),
      DataCell(
        _TappableCell(tx.productCode),
        onTap: () => _viewDetail(
          RevExDetailColumn.productCode,
          tx.productCode,
        ),
      ),
    ]);
  }

  // ...
}
```

Now when you tap on a cell, you'll navigate to the Transaction Detail page and see a message indicating which column and value you're filtering on.

There's one quick issue you should solve: once you've navigated to the Detail page, there's no easy way to go back to the Overview. You can fix that by using `context.pushNamed` instead of `context.goNamed` in the `_viewDetail` method:

```dart
class _TransactionDataSource extends DataTableSource {
  // ...

  void _viewDetail(String columnName, String value) {
    context.pushNamed('detail', params: <String, String>{
      'columnName': columnName,
      'columnValue': value
    });
  }

  // ...
}
```

`context.go` and `context.goNamed` replace the current Navigator history, whereas `context.push` and `context.pushNamed` add a new entry to it. By default, Flutter's AppBar widget recognizes when you're above the first layer of the Navigator's history stack and automatically provides a Back button.

## Lifting transactions into state

You've got a method for fetching transactions from the API, but if you use it again here, you'll need to call it every time the user goes back and forth between the overview and one of the detail pages. That's a lot of unnecessary API traffic and waiting on the user's part. Instead, put it in some Provider state, like you did with the RevExUser object.

Create a file `lib/transactions.state.dart`. You can borrow most of the code from `user.state.dart`.

```dart
import 'package:flutter/material.dart';
import 'package:revenue_explorer/http/http.dart';
import 'package:revenue_explorer/http/transaction.http.dart';

class RevExTransactionsState extends ChangeNotifier {
  Future<List<RevExTransaction>>? transactions;

  Future<void> loadTransactions(
    BuildContext context, {
    bool forceRefresh = false,
  }) async {
    if (transactions == null || forceRefresh) {
      transactions = revExGetTransactions.authorize(context);
      Future(() => notifyListeners());
    }
  }
}
```

Now make it available to your app at the root widget in `main.dart`:

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => RevExUserState(),
      child: ChangeNotifierProvider(        // <= new provider
        create: (context) => RevExTransactionsState(),
        child: ThemeProvider(
          defaultThemeId: revexLightTheme.appTheme.id,
          themes: [
            revexLightTheme.appTheme,
            AppTheme.dark(),
          ],
          child: ThemeConsumer(
            child: Builder(
              builder: (themeContext) => MaterialApp.router(
                scrollBehavior:
                    const MaterialScrollBehavior().copyWith(scrollbars: false),
                debugShowCheckedModeBanner: false,
                title: 'Revenue Explorer',
                theme: ThemeProvider.themeOf(themeContext).data,
                routeInformationParser: revexRouter.routeInformationParser,
                routeInformationProvider: revexRouter.routeInformationProvider,
                routerDelegate: revexRouter.routerDelegate,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```