Chapters
Chapters

Chapters

Hide chapters

Flutter Apprentice

First Edition · Flutter 2.2.0 · Dart 2.13.0 · Android Studio 4.2.1

Before You Begin

Section 0: 7 chapters
Show chapters Hide chapters

Section I: Build Your First Flutter App

Section 1: 2 chapters
Show chapters Hide chapters

Section II: Everything’s a Widget

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Navigating Between Screens

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence and State

Section 4: 7 chapters
Show chapters Hide chapters

Section V: Deployment

Section 5: 4 chapters
Show chapters Hide chapters

Appendices

Section 6: 2 chapters
Show chapters Hide chapters

14. Streams
Written by Kevin D Moore

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Imagine yourself sitting by a creek, having a wonderful time. While watching the water flow, you see a piece of wood or a leaf floating down the stream and you decide to take it out of the water. You could even have someone upstream purposely float things down the creek for you to grab.

You can imagine Dart streams in a similar way: as data flowing down a creek, waiting for someone to grab it. That’s what a stream does in Dart — it sends data events for a listener to grab.

With Dart streams, you can send one data event at a time while other parts of your app listen for those events. Such events can be collections, maps or any other type of data you’ve created.

Streams can send errors in addition to data; you can also stop the stream, if you need to.

In this chapter, you’ll update your recipe project to use streams in two different locations. You’ll use one for bookmarks, to let the user mark favorite recipes and automatically update the UI to display them. You’ll use the second to update your ingredient and grocery lists.

But before you jump into the code, you’ll learn more about how streams work.

Types of streams

Streams are part of Dart, and Flutter inherits them. There are two types of streams in Flutter: single subscription streams and broadcast streams.

Single subscription streams are the default. They work well when you’re only using a particular stream on one screen.

A single subscription stream can only be listened to once. It doesn’t start generating events until it has a listener and it stops sending events when the listener stops listening, even if the source of events could still provide more data.

Single subscription streams are useful to download a file or for any single-use operation. For example, a widget can subscribe to a stream to receive updates about a value, like the progress of a download, and update its UI accordingly.

If you need multiple parts of your app to access the same stream, use a broadcast stream, instead.

A broadcast stream allows any number of listeners. It fires when its events are ready, whether there are listeners or not.

To create a broadcast stream, you simply call asBroadcastStream() on an existing single subscription stream.

final broadcastStream =  singleStream.asBroadcastStream();

You can differentiate a broadcast stream from a single subscription stream by inspecting its Boolean property isBroadcast.

In Flutter, there are some key classes built on top of Stream that simplify programming with streams.

The following diagram shows the main classes used with streams:

Next, you’ll take a deeper look at each one.

StreamController and sink

When you create a stream, you usually use StreamController, which holds both the stream and StreamSink. Here’s an example that uses StreamController:

final _recipeStreamController = StreamController<List<Recipe>>();
final _stream = _recipeStreamController.stream;

_recipeStreamController.sink.add(_recipesList);

_recipeStreamController.close();

StreamSubscription

Using listen() on a stream returns a StreamSubscription. You can use this subscription class to cancel the stream when you’re done, like this:

StreamSubscription s = stream.listen((value) {
    print('Value from controller: $value');
});
...
...
// You are done with the subscription
subscription.cancel();

StreamBuilder

StreamBuilder is handy when you want to use a stream. It takes two parameters: a stream and a builder. As you receive data from the stream, the builder takes care of building or updating the UI.

final repository = Provider.of<Repository>(context, listen: false);
  return StreamBuilder<List<Recipe>>(
    stream: repository.recipesStream(),
    builder: (context, AsyncSnapshot<List<Recipe>> snapshot) {
      // extract recipes from snapshot and build the view
    }
  )
...

Adding streams to Recipe Finder

You’re now ready to start working on your recipe project. If you’re following along with your app from the previous chapters, open it and keep using it with this chapter. If not, just locate the projects folder for this chapter and open starter in Android Studio.

Adding futures and streams to the repository

Open data/repository.dart and change all of the return types to return a Future. For example, change the existing findAllRecipes() to:

Future<List<Recipe>> findAllRecipes();

Future<List<Recipe>> findAllRecipes();

Future<Recipe> findRecipeById(int id);

Future<List<Ingredient>> findAllIngredients();

Future<List<Ingredient>> findRecipeIngredients(int recipeId);

Future<int> insertRecipe(Recipe recipe);

Future<List<int>> insertIngredients(List<Ingredient> ingredients);

Future<void> deleteRecipe(Recipe recipe);

Future<void> deleteIngredient(Ingredient ingredient);

Future<void> deleteIngredients(List<Ingredient> ingredients);

Future<void> deleteRecipeIngredients(int recipeId);

Future init();

void close();

// 1
Stream<List<Recipe>> watchAllRecipes();
// 2
Stream<List<Ingredient>> watchAllIngredients();

Cleaning up the repository code

Before updating the code to use streams and futures, there are some minor housekeeping updates.

import 'dart:async';

class MemoryRepository extends Repository {

//1
Stream<List<Recipe>> _recipeStream;
Stream<List<Ingredient>> _ingredientStream;
// 2
final StreamController _recipeStreamController =
    StreamController<List<Recipe>>();
final StreamController _ingredientStreamController =
    StreamController<List<Ingredient>>();

// 3
@override
Stream<List<Recipe>> watchAllRecipes() {
  if (_recipeStream == null) {
    _recipeStream = _recipeStreamController.stream;
  }
  return _recipeStream;
}

// 4
@override
Stream<List<Ingredient>> watchAllIngredients() {
  if (_ingredientStream == null) {
    _ingredientStream = _ingredientStreamController.stream;
  }
  return _ingredientStream;
}

Updating the existing repository

MemoryRepository is full of red squiggles. That’s because the methods all use the old signatures, and everything’s now based on Futures.

@override
// 1
Future<List<Recipe>> findAllRecipes() {
  // 2
  return Future.value(_currentRecipes);
}

@override
Future init() {
  return Future.value();
}

@override
void close() {
  _recipeStreamController.close();
  _ingredientStreamController.close();
}

Sending recipes over the stream

As you learned earlier, StreamController’s sink property adds data to streams. Since this happens in the future, you need to change the return type to Future and then update the methods to add data to the stream.

@override
// 1
Future<int> insertRecipe(Recipe recipe) {
  _currentRecipes.add(recipe);
  // 2
  _recipeStreamController.sink.add(_currentRecipes);
  insertIngredients(recipe.ingredients);
  // 3
  // 4
  return Future.value(0);
}

Exercise

Convert the remaining methods, just like you just did with insertRecipe(). You’ll need to do the following:

return Future.value();

Switching between services

In the previous chapter, you created a MockService to provide local data that never changes, but you also have access to RecipeService. It’s still a bit tedious to switch between the two, so you’ll take care of that before integrating streams.

import 'package:chopper/chopper.dart';
import 'model_response.dart';
import 'recipe_model.dart';

abstract class ServiceInterface {
  Future<Response<Result<APIRecipeQuery>>> queryRecipes(
      String query, int from, int to);
}

Implementing the new service interface

Open network/recipe_service.dart and add the service_interface import:

import 'service_interface.dart';

abstract class RecipeService extends ChopperService
    implements ServiceInterface {

import '../network/service_interface.dart';

class MockService implements ServiceInterface {

Changing the provider

You’ll now adopt the new service interface instead of the specific services you used in the current code.

import 'data/repository.dart';
import 'network/recipe_service.dart';
import 'network/service_interface.dart';

Provider<Repository>(
  lazy: false,
  create: (_) => MemoryRepository(),
),

Provider<ServiceInterface>(
  create: (_) => RecipeService.create(),
  lazy: false,
),

import '../../data/repository.dart';

final repository = Provider.of<Repository>(context);

import '../../network/service_interface.dart';

future: Provider.of<ServiceInterface>(context).queryRecipes(

Adding streams to Bookmarks

The Bookmarks page uses Consumer, but you want to change it to a stream so it can react when a user bookmarks a recipe. To do this, you need to replace the reference to MemoryRepository with Repository and use a StreamBuilder widget.

import '../../data/repository.dart';

// 1
final repository = Provider.of<Repository>(context, listen: false);
// 2
return StreamBuilder<List<Recipe>>(
  // 3
  stream: repository.watchAllRecipes(),
  // 4
  builder: (context, AsyncSnapshot<List<Recipe>> snapshot) {
    // 5
    if (snapshot.connectionState == ConnectionState.active) {
      // 6
      final recipes = snapshot.data ?? [];

} else {
  return Container();
}

void deleteRecipe(Repository repository, Recipe recipe) async {

Adding streams to Groceries

Start by opening ui/shopping/shopping_list.dart and replacing the memory_repository.dart import with:

import '../../data/repository.dart';

final repository = Provider.of<Repository>(context);
return StreamBuilder(
  stream: repository.watchAllIngredients(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.active) {
      final ingredients = snapshot.data;
      if (ingredients == null) {
        return Container();
      }

} else {
  return Container();
}

Key points

  • Streams are a way to asynchronously send data to other parts of your app.
  • You usually create streams by using StreamController.
  • Use StreamBuilder to add a stream to your UI.
  • Abstract classes, or interfaces, are a great way to abstract functionality.

Where to go from here?

In this chapter, you learned how to use streams. If you want to learn more about the topic, visit the Dart documentation at https://dart.dev/tutorials/language/streams.

13. State Management
15. Saving Data With SQLite
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now