Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

16
Adding BLoCs to Firestore Client App Pages

WHAT YOU WILL LEARN IN THIS CHAPTER

How to pass app‐wide state management between pages
How to apply local‐state management in the widget tree
How to apply the InheritedWidget as a provider to pass state between widgets and pages
How to use dependency injection to inject service classes to the BLoC classes to achieve platform independence
How to apply the LoginBloc class to the Login page
How to apply the AuthenticationBloc class to manage user credentials for app‐wide state management
How to apply the HomeBloc class to the home page to list, add, and delete journal entries
How to apply the JournalEditBloc to the journal edit page to add or modify an existing entry
How to build reactive widgets by implementing the StreamBuilder widget
How to use the ListView.separated constructor to build a list of journal entries with a divider line by using the Divider() widget
How to use the Dismissible widget to swipe and delete an entry
How to use the Dismissible widget confirmDismiss property to prompt a delete confirmation dialog
How to use the DropdownButton() widget to present a list of moods with the title, color, and icon rotation
How to apply the MoodIcons class to retrieve the mood title, color, rotation, and icon
How to apply the Matrix4 rotateZ() method to rotate icons according to the mood in conjunction with the MoodIcons class
How to apply the FormatDates class to format dates

In this chapter, you'll continue to edit and complete the mood journaling app you've worked on in Chapters 14 and 15. For your convenience, you can use the ch15_final_journal project as your starting point and make sure you add your GoogleService‐Info.plist file to the Xcode project and the google‐services.json file to the Android project that you downloaded in Chapter 14 from your Firebase console.

You'll learn how to apply the BLoC, service, provider, model, and utility classes to the UI widget pages. The benefit of using the BLoC pattern allows for separation of the UI widgets from the business logic. You'll learn how to use dependency injection to inject service classes into the BLoC classes. By using dependency injection, the BLoCs remain platform‐agnostic.

You'll also learn how to apply app‐wide state management by implementing the AuthenticationBlocProvider class to the main page. You'll learn how to pass state between pages and the widget tree by implementing the HomeBlocProvider and JournalEditBlocProvider classes. You'll learn how to create a Login page that implements the LoginBloc class to validate emails, passwords, and user credentials. You'll modify the home page and learn how to implement the HomeBloc class to handle the journal entries list and add and delete individual entries. You'll learn how to create the journal edit page that implements the JournalEditBloc class to add, modify, and save existing entries.

ADDING THE LOGIN PAGE

The Login page contains a TextField for entering the email address and a TextField for entering the password by obscuring the characters for privacy. You'll also add a button to log in the user and a button to create a new user account. You'll learn how to implement the LoginBloc class by using the StreamBuilder widget. You'll learn how to use dependency injection to inject the AuthenticationService()class to the LoginBloc class constructor, resulting in the LoginBloc being platform‐agnostic. See Figure 16.1 for an idea of how the final Login page will look.

Screenshot of Final Login page. — **FIGURE 16.1**: Final Login page

TRY IT OUT Creating the Login Page

In this section, you'll continue to edit the journal project. You'll be adding the LoginBloc class to handle the validation of the email and password values. You'll use the LoginBloc class to log in the user or create a new user account and log in with the new authentication credentials.

Create a new Dart file in the pages folder. Right‐click the pages folder, select New ➪ Dart File, enter login.dart, and click the OK button to save.

Import the material.dart, login_bloc.dart, and authentication.dart classes. Add a new line and create the Login class that extends a StatefulWidget.

  import 'package:flutter/material.dart';
  import 'package:journal/blocs/login_bloc.dart';
  import 'package:journal/services/authentication.dart';

  class Login extends StatefulWidget {
   @override
   _LoginState createState() => _LoginState();
  }

  class _LoginState extends State<Login> {
   @override
   Widget build(BuildContext context) {
    return Container();
   }
  }

Modify the _LoginState class and add the private LoginBloc _loginBloc variable.
Override the initState() and initialize the _loginBloc variable with the LoginBloc(AuthenticationService()) class by injecting the AuthenticationService() in the constructor.
Note that the reason you initialized the _loginBloc variable from the initState() and not the didChangeDependencies() is because the LoginBloc does not need a provider (InheritedWidget).
```
  class _LoginState extends State<Login> {
   LoginBloc _loginBloc;

   @override
   void initState() {
    super.initState();
    _loginBloc = LoginBloc(AuthenticationService());
   }

   @override
   Widget build(BuildContext context) {
    return Container();
   }
  }
```
Override the dispose() method and dispose the _loginBloc variable. The LoginBloc class's dispose() method is called and closes all of the StreamControllers.
```
  @override
  void dispose() {
   _loginBloc.dispose();
   super.dispose();
  }
```
In the Widget build() method, replace the Container() with the UI widgets Scaffold and AppBar and for the body property add a SafeArea() and SingleChildScrollView() with the child property as a Column(). Set the Column crossAxisAlignment property to stretch.

For the AppBar bottom property, add a PreferredSize widget with the child property set to the Icons.account_circle and set the size property to 88.0 pixels and the color property to Colors.white.

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(     bottom: PreferredSize(
       child: Icon(
        Icons.account_circle,
        size: 88.0,
        color: Colors.white,
       ),
       preferredSize: Size.fromHeight(40.0)),
     ),
    ),
    body: SafeArea(
     child: SingleChildScrollView(
      padding: EdgeInsets.all(16.0, 32.0, 16.0, 16.0),
      child: Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: <Widget>[

       ],
      ),
     ),
    ),
   );
  }

Add to the Column children property two StreamBuilder widgets. The first StreamBuilder handles the email TextField and sets the stream property to the _loginBloc.email stream. Add to the builder property the TextField widget, and for the InputDecoration errorText property set it to the snapshot.error. The onChanged property calls the _loginBloc.emailChanged.add sink that passes the current email address.

Add the second StreamBuilder by following the previous steps to handle the password TextField. Add a SizedBox with the height property set to 48.0 pixels and add a call to the _buildLoginAndCreateButtons() method that you will create in step 9.

  Column(
   crossAxisAlignment: CrossAxisAlignment.stretch,
   children: <Widget>[
    StreamBuilder(
     stream: _loginBloc.email,
     builder: (BuildContext context, AsyncSnapshot snapshot) => TextField(
        keyboardType: TextInputType.emailAddress,
        decoration: InputDecoration(
          labelText: 'Email Address',
          icon: Icon(Icons.mail_outline),
          errorText: snapshot.error),
        onChanged: _loginBloc.emailChanged.add,
       ),
    ),
    StreamBuilder(
     stream: _loginBloc.password,
     builder: (BuildContext context, AsyncSnapshot snapshot) =>
       TextField(
        obscureText: true,
        decoration: InputDecoration(
          labelText: 'Password',          icon: Icon(Icons.security),
          errorText: snapshot.error),
        onChanged: _loginBloc.passwordChanged.add,
       ),
    ),
    SizedBox(height: 48.0),
    _buildLoginAndCreateButtons(),
   ],
  ),

Add a new line after the Widget build(BuildContext context) method and add the _buildLoginAndCreateButtons() that returns a Widget. Add the StreamBuilder to handle which set of buttons is active, for example Login button and then Create Account, or in reverse order. The StreamBuilder checks whether the snapshot.data == 'Login' and calls the _buttonsLogin() method; otherwise, it calls the _buttonsCreateAccount() method. You will create each method, respectively, in steps 10 and 11.
```
  Widget _buildLoginAndCreateButtons() {
   return StreamBuilder(
    initialData: 'Login',
    stream: _loginBloc.loginOrCreateButton,
    builder: ((BuildContext context, AsyncSnapshot snapshot) {
     if (snapshot.data == 'Login') {
      return _buttonsLogin();
     } else if (snapshot.data == 'Create Account') {
      return _buttonsCreateAccount();
     }
    }),
   );
  }
```

Add the _buttonsLogin() method that handles returning the button's combination with Login first and Create Account second. Since the Login button is the default, add the RaisedButton widget, and for the Create Account button add the FlatButton widget.

  Column _buttonsLogin() {
   return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
     StreamBuilder(
      initialData: false,
      stream: _loginBloc.enableLoginCreateButton,      builder: (BuildContext context, AsyncSnapshot snapshot) =>
        RaisedButton(
         elevation: 16.0,
         child: Text('Login'),
         color: Colors.lightGreen.shade200,
         disabledColor: Colors.grey.shade100,
         onPressed: snapshot.data
           ? () => _loginBloc.loginOrCreateChanged.add('Login')
           : null,
        ),
     ),
     FlatButton(
      child: Text('Create Account'),
      onPressed: () {
       _loginBloc.loginOrCreateButtonChanged.add('Create Account');
      },
     ),
    ],
   );
  }

Add the _buttonsCreateAccount() method that handles returning the button's combination with Create Account first and Login second. Since the Create Account button is the default, add the RaisedButton widget, and for the Login button add the FlatButton widget.

  Column _buttonsCreateAccount() {
   return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
     StreamBuilder(
      initialData: false,
      stream: _loginBloc.enableLoginCreateButton,
      builder: (BuildContext context, AsyncSnapshot snapshot) =>
        RaisedButton(
         elevation: 16.0,
         child: Text('Create Account'),
         color: Colors.lightGreen.shade200,
         disabledColor: Colors.grey.shade100,
         onPressed: snapshot.data
           ? () =>
             _loginBloc.loginOrCreateChanged.add('Create Account')
           : null,
        ),
     ),     FlatButton(
      child: Text('Login'),
      onPressed: () {
       _loginBloc.loginOrCreateButtonChanged.add('Login');
      },
     ),
    ],
   );
  }

HOW IT WORKS

The login.dart file contains the Login class that extends a StatefulWidget to handle logging in a user or creating a new user account. You instantiate the LoginBloc class by injecting the AuthenticationService() class by overriding the initState() method. Note that the reason you initialized the _loginBloc variable from the initState() and not the didChangeDependencies() is because the LoginBloc does not need a provider (InheritedWidget). You closed the LoginBloc StreamControllers listeners by overriding the dispose() method and calling the _loginBloc.dispose() method. It's good practice to close the StreamController listeners when they aren't needed.

The StreamBuilder widget is used to monitor the email and password values. You used the TextField widget's onChanged property to call the _loginBloc.emailChanged.add sink and the _loginBloc.passwordChanged.add sink to send the values to the LoginBloc Validators class to validate that the minimum formatting requirements are met. You learned in Chapter 15's “Adding the Validators Class” section how the StreamTransformer transforms a Stream that is used to validate and process values inside a Stream.

The StreamBuilder widget is used to listen to the _loginBloc.loginOrCreateButton stream to toggle showing Login or Create Account as the default button.

MODIFYING THE MAIN PAGE

The main page is the control center responsible for monitoring app‐wide state management. You'll learn how to implement the AuthenticationBlocProvider class as the main provider to the AuthenticationBloc class. You'll learn how to implement the HomeBlocProvider class as the provider to the HomeBloc class with the child property as the Home class and also to hold the state for the user uid. You'll learn how to apply the StreamBuilder widget to monitor the user's authentication status. When the user logs in, the widget directs the user to the home page, and when the user logs out, it directs the user to the Login page. See Figure 16.2 for the main page BLoC flow.

Illustration of main page BLoC flow. — **FIGURE 16.2**: Main page BLoC flow

TRY IT OUT Modifying the Main Page

In this section, you'll continue to edit the journal project. You'll be modifying the main.dart file to handle app‐wide state management by using the StreamBuilder and BLoCs.

Open the main.dart file and add the following packages and classes:

  import 'package:flutter/material.dart';
  import 'package:journal/blocs/authentication_bloc.dart';
  import 'package:journal/blocs/authentication_bloc_provider.dart';
  import 'package:journal/blocs/home_bloc.dart';
  import 'package:journal/blocs/home_bloc_provider.dart';
  import 'package:journal/services/authentication.dart';
  import 'package:journal/services/db_firestore.dart';
  import 'package:journal/pages/home.dart';
  import 'package:journal/pages/login.dart';

Inside the Widget build() method, add the final _authenticationService variable initialized by the AuthenticationService().

  @override
  Widget build(BuildContext context) {
   final AuthenticationService _authenticationService = AuthenticationService();

Add the final _authenticationBloc variable initialized by the AuthenticationBloc() and inject the _authenticationService dependency. The AuthenticationBloc class remains platform‐agnostic by using dependency injection of the AuthenticationService() class.
```
  final AuthenticationBloc _authenticationBloc = AuthenticationBloc(_authenticationService);
```
Refactor the MaterialApp() widget to a method by placing the mouse over the word MaterialApp and right‐clicking. Then select Refactor ➪ Extract ➪ Method ➪ Method.
In the Extract Method dialog, enter _buildMaterialApp for the method name and click the Refactor button.

Add to the _buildMaterialApp() constructor the Widget homePage parameter. When this method is called, the page widget is passed to the homePage parameter, for example, the Login() or Home() class page. Change the home property to the homePage widget.

  MaterialApp _buildMaterialApp(Widget homePage) {
   return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Security Inherited',
    theme: ThemeData(
     primarySwatch: Colors.lightGreen,
     canvasColor: Colors.lightGreen.shade50,
     bottomAppBarColor: Colors.lightGreen,
    ),
    home: homePage,
   );
  }

Go back to the Widget build method and replace the return _buildMaterialApp() call with the AuthenticationBlocProvider() class.
For the authenticationBloc property, pass the _authenticationBloc variable, and for the child property, pass the StreamBuilder() widget.
```
  return AuthenticationBlocProvider(
   authenticationBloc: _authenticationBloc,
   child: StreamBuilder(),
  );
```
Set the StreamBuilder() widget's initialData property to a null value, meaning no user is logged in. Set the stream property to the _authenticationBloc.user stream.
While the snapshot connection status is waiting, it's good practice to show a progress indicator. Otherwise, the user thinks the app stopped working. Inside the builder property, add an if statement checking that snapshot.connectionState == ConnectionState.waiting and return a Container widget with the color property set to Colors.lightGreen and the child property to the CircularProgressIndicator() widget.
When the user logs in with the correct credentials, you need to navigate to the Home() class page. Add an else if statement checking whether the snapshot.hasData equals true and add the return HomeBlocProvider() class.
Set the HomeBlocProvider() class's homeBloc property to the HomeBloc(DbFirestoreService(), _authenticationService) class; note that you are injecting the Flutter platform service classes.
For the child property, call the _buildMaterialApp(Home()) method to navigate to the Home() class page.

Add the last else statement and add the return _buildMaterialApp(Login()) method to navigate to the Login() class page.

  StreamBuilder(
   initialData: null,
   stream: _authenticationBloc.user,
   builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
     return Container(
      color: Colors.lightGreen,
      child: CircularProgressIndicator(),
     );
    } else if (snapshot.hasData) {
     return HomeBlocProvider(
      homeBloc: HomeBloc(DbFirestoreService(), _authenticationService),
      uid: snapshot.data,
      child: _buildMaterialApp(Home()),
     );
    } else {
     return _buildMaterialApp(Login());
    }
   },
  ),

HOW IT WORKS

You edited the main.dart file that contains the MyApp class that extends a StatelessWidget to handle app‐wide authentication state management. The root of the MyApp class is the AuthenticationBlocProvider class with the child property set to the StreamBuilder widget. This StreamBuilder widget monitors the _authenticationBloc.user stream, and the builder rebuilds every time the user's authentication status changes and navigates the user to the appropriate login or home page.

MODIFYING THE HOME PAGE

The home page is responsible for showing a list of journal entries filtered by the logged‐in user uid and the ability to add, modify, and delete individual entries. In this section, you'll learn how to implement the AuthenticationBlocProvider as the provider for the AuthenticationBloc class. You'll learn how to implement the HomeBlocProvider class as the provider for the HomeBloc class. You'll learn how to apply the StreamBuilder widget to build the journal entries list by calling the ListView.separated constructor. The Dismissible widget is used to swipe on an item to delete the entry. You'll learn how to use the Dismissible widget confirmDismiss property to prompt the user with a delete confirmation dialog. You'll learn how to call the MoodIcons class to color and rotate icons according to the selected mood. You'll learn how to call the FormatDates class to format dates.

Note that I purposely didn't inject the MoodIcons and FormatDates classes into the HomeBloc and EditJournalBLoc classes to show that you can decide not to include certain utility classes in the BLoC. If you were to include them in these BLoCs, you would duplicate the MoodIcons and FormatDates methods into two different BLoCs. In Chapter 15's “Implementing the BLoC Pattern” section, you learned in the UI design guidelines to create a BLoC for each complex enough component. Another option is to create a MoodAndDatesBloc class to handle the MoodIcons and FormatDates classes (as abstract classes) and use the MoodAndDatesBloc class in both the home and edit entry pages. See Figure 16.3 for an idea of how the final home page will look.

Screenshot of final home page. — **FIGURE 16.3**: Final home page

TRY IT OUT Modifying the Home Page

In this section, you'll continue to edit the journal project. You'll be modifying the home.dart file to handle listing the journal entries, as well as adding, modifying, and deleting them. You'll use the MoodIcons class to retrieve the correct mood title, color, rotation, and icon. You'll use the FormatDates class to format dates.

Open the home.dart file and add the following packages and classes:

  import 'package:flutter/material.dart';
  import 'package:journal/blocs/authentication_bloc.dart';
  import 'package:journal/blocs/authentication_bloc_provider.dart';
  import 'package:journal/blocs/home_bloc.dart';
  import 'package:journal/blocs/home_bloc_provider.dart';
  import 'package:journal/blocs/journal_edit_bloc.dart';
  import 'package:journal/blocs/journal_edit_bloc_provider.dart';
  import 'package:journal/classes/format_dates.dart';
  import 'package:journal/classes/mood_icons.dart';
  import 'package:journal/models/journal.dart';
  import 'package:journal/pages/edit_entry.dart';
  import 'package:journal/services/db_firestore.dart';

Modify the _HomeState class and add the private _authenticationBloc, _homeBloc, _uid, _moodIcons, and _formatDates variables. Override the initState() and initialize the _loginBloc variable with the LoginBloc(AuthenticationService()) class by injecting the AuthenticationService() in the constructor.
```
  AuthenticationBloc _authenticationBloc;
  HomeBloc _homeBloc;
  String _uid;
  MoodIcons _moodIcons = MoodIcons();
  FormatDates _formatDates = FormatDates();
```
Override the didChangeDependencies() method and initialize the variables from the provider classes. Note that the InheritedWidget classes need to be accessed from the didChangeDependencies() method and not the initState() method. Note that the _uid variable state is initialized from the HomeBlocProvider, and the value is passed to the Journal class for adding journal entries.
```
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
   _authenticationBloc = AuthenticationBlocProvider.of(context).authenticationBloc;
   _homeBloc = HomeBlocProvider.of(context).homeBloc;
   _uid = HomeBlocProvider.of(context).uid;
  }
```
Override the dispose() method and dispose the _homeBloc variable. The HomeBloc class dispose() method is called and closes all of the StreamControllers.
```
  @override
  void dispose() {
   _homeBloc.dispose();   super.dispose();
  }
```
Add the _addOrEditJournal() method receiving the add and journal named parameters.
Inside the method add the Navigator.push() method that navigates to the EditEntry() page as a child property of the JournalEditBlocProvider class.
For the journalEditBloc property, inject the JournalEditBloc class with the add, journal, and DbFirestoreService() class.

Add the fullscreenDialog property and set it to true.

Note that you input values to the BLoC through sinks, but for this case, it makes sense to avoid adding unnecessary StreamContollers and listeners since it doesn't require the user to input this data. Instead, you pass the add and journal variables through the JournalEditBloc() constructor.

  // Add or Edit Journal Entry and call the Show Entry Dialog
  void _addOrEditJournal({bool add, Journal journal}) {
   Navigator.push(
    context,
    MaterialPageRoute(
      builder: (BuildContext context) => JournalEditBlocProvider(
       journalEditBloc: JournalEditBloc(add, journal, DbFirestoreService()),
       child: EditEntry(),
      ),
      fullscreenDialog: true
    ),
   );
  }

Add the _confirmDeleteJournal() method that returns the showDialog() method. The dialog shows a delete confirmation warning giving the user a choice to delete the entry or cancel.

  // Confirm Deleting a Journal Entry
  Future<bool> _confirmDeleteJournal() async {
   return await showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
     return AlertDialog(
      title: Text("Delete Journal"),
      content: Text("Are you sure you would like to Delete?"),
      actions: <Widget>[
       FlatButton(
        child: Text('CANCEL'),
        onPressed: () {
         Navigator.pop(context, false);
        },
       ),
       FlatButton(
        child: Text('DELETE', style: TextStyle(color: Colors.red),),
        onPressed: () {         Navigator.pop(context, true);
        },
       ),
      ],
     );
    },
   );
  }

Modify the AppBar actions property and replace the TODO comment with the call to the _authenticationBloc.logoutUser.add(true) sink. The AuthenticationBloc receives the sink value to log out the user, and the main page (containing the app‐wide state management) automatically navigates the user to the Login page.
```
  actions: <Widget>[
   IconButton(
    icon: Icon(Icons.exit_to_app, color: Colors.lightGreen.shade800,),
    onPressed: () {
     _authenticationBloc.logoutUser.add(true);
    },
   ),
  ],
```
Edit the body property and replace the Container() widget with the StreamBuilder widget, and set the stream property to the _homeBloc.listJournal stream.
Inside the builder property, add an if statement to check for ConnectionState.waiting and return a Center() widget with the child property set to the CircularProgressIndicator() widget.
Add an else if statement that checks for snapshot.hasData, and return the call to the _buildListViewSeparated(snapshot) method passing the snapshot variable. You'll create the _buildListViewSeparated() method in step 17.
Add an else statement and return a Center() widget with the child property set to a Container() widget.

Add a Text widget to the Container() child property with the message 'Add Journals.'

  body: StreamBuilder(
   stream: _homeBloc.listJournal,
   builder: ((BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
     return Center(
      child: CircularProgressIndicator(),
     );
    } else if (snapshot.hasData) {
     return _buildListViewSeparated(snapshot);
    } else {
     return Center(
      child: Container(
       child: Text('Add Journals.'),
      ),
     );
    }
   }),
  ),

Modify the FloatingActionButton onPressed property and replace the TODO comment with the call to the _addOrEditJournal(add: true, journal: Journal(uid: _uid)) method.

  floatingActionButton: FloatingActionButton(
   //…
   onPressed: () async {
    _addOrEditJournal(add: true, journal: Journal(uid: _uid));
   },
  ),

After the Widget build(BuildContext context) method, add the _buildListViewSeparated(AsyncSnapshot snapshot) method.
Return and call the ListView.separated() constructor with the itemCount property set to the snapshot.data.length, meaning the journal's item count.
For the itemBuilder property, add the _titleData variable and set the value by calling the _formatDates.dateFormatShortMonthDayYear method by passing the snapshot date value.
Add the _subtitle variable and set the value by concatenating the snapshot mood and note values.

Add the separatorBuilder property and return a Divider() widget with the color property set to Colors.grey.

  Widget _buildListViewSeparated(AsyncSnapshot snapshot) {
   return ListView.separated(
    itemCount: snapshot.data.length,
    itemBuilder: (BuildContext context, int index) {
     String _titleDate = _formatDates.dateFormatShortMonthDayYear(snapshot.data[index].date);
     String _subtitle = snapshot.data[index].mood + "
" + snapshot.data[index].note;
     return Dismissible();
    },
    separatorBuilder: (BuildContext context, int index) {
     return Divider(
      color: Colors.grey,
     );
    },
   );
  }

Add to the Dismissible() widget the key property set to the snapshot documentID by using the Key() class. The Key() class creates a unique identifier for a widget to make sure the correct journal entry is deleted.
```
  return Dismissible(
   key: Key(snapshot.data[index].documentID),
```

Set the background property to a Container() widget with the icon set to Icons.delete. Follow the same steps for the secondaryBackground property. When the user swipes on a row to delete the entry, the red background is shown with the delete icons notifying the user that they are about to delete a journal entry.

   background: Container(
    color: Colors.red,
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 16.0),
    child: Icon(
     Icons.delete,
     color: Colors.white,
    ),
   ),
   secondaryBackground: Container(
    color: Colors.red,
    alignment: Alignment.centerRight,
    padding: EdgeInsets.only(right: 16.0),
    child: Icon(
     Icons.delete,
     color: Colors.white,
    ),
   ),

Set the child property to the ListTile() widget with the leading property set to the Column() widget. Add to the children property two Text widgets that call the _formatDates class. The leading property shows the day and day of the week of the journal entry.

   child: ListTile(
    leading: Column(
     children: <Widget>[
      Text(_formatDates.dateFormatDayNumber(snapshot.data[index].date),
       style: TextStyle(
         fontWeight: FontWeight.bold,
         fontSize: 32.0,
         color: Colors.lightGreen),
      ),
      Text(_formatDates.dateFormatShortDayName(snapshot.data[index].date)),
     ],
    ),

Set the trailing property to the Transform() widget with the Matrix4 rotateZ() method.

Pass the mood icon rotation to the rotateZ() method by calling the MoodIcons class's _moodIcons.getMoodRotation method. For the happiest mood, the icon is rotated toward the left, and for the saddest mood the icon is rotated toward the right.

    trailing: Transform(
     transform: Matrix4.identity()..rotateZ(_moodIcons.getMoodRotation(snapshot.data[index].mood)),
     alignment: Alignment.center,
     child: Icon(_moodIcons.getMoodIcon(snapshot.data[index].mood), color: _moodIcons.getMoodColor(snapshot.data[index].mood), size: 42.0,),
    ),

Set the title property to the Text widget showing the _titleDate variable.
Set the subtitle property to the Text widget showing the _subtitle variable.

For the onTap property, call the _addOrEditJournal method and pass a false value for the add property and the snapshot.data[index] value for the journal property. The onTap property handles the user tapping a journal entry and calls the _addOrEditJournal() method to edit the entry.

    title: Text(
     _titleDate,
     style: TextStyle(fontWeight: FontWeight.bold),
    ),
    subtitle: Text(_subtitle),
    onTap: () {
     _addOrEditJournal(
      add: false,
      journal: snapshot.data[index],
     );
    },
   ),

For the confirmDismiss property, add a call to the _confirmDeleteJournal() method showing a dialog to confirm deleting the journal entry.

Add the if statement to check that the confirmDelete variable value is true and call the _homeBloc.deleteJournal.add(snapshot.data[index]) sink to signal the HomeBloc class to delete the journal entry.

   confirmDismiss: (direction) async {
    bool confirmDelete = await _confirmDeleteJournal();
    if (confirmDelete) {
     _homeBloc.deleteJournal.add(snapshot.data[index]);
    }
   },
  );

HOW IT WORKS

You edited the home.dart file to contain the Home class that extends a StatefulWidget to handle showing a list of journal entries with the ability to add, modify, and delete individual records. You accessed the AuthenticationBlocProvider and HomeBlocProvider classes by using the provider's of() method from the didChangeDependencies method to receive the state from the main page. You implemented the AuthenticationBloc and the HomeBloc classes by using the StreamBuilder widget to monitor authentication and entry changes. You implemented the StreamBuilder widget to monitor the _homeBloc.listJournal stream, and the builder rebuilds every time a journal entry changes.

The _addOrEditJournal() method handles adding or modifying a journal entry. The constructor takes the add and journal named parameters to aid if you are adding or modifying an entry. To show the edit entry page, you call the Navigator.push() method by passing the JournalEditBlocProvider and inject the received parameters to the JournalEditBloc class.

The _buildListViewSeparated(snapshot) method uses the ListView.separated() constructor to build the list of journal entries. The itemBuilder returns a Dismissible() widget that handles deleting journal entries by swiping left or right on the entry. The Dismissible() child property uses the ListTile() to format each journal entry in the ListView. The separatorBuilder returns the Divider() widget to show a gray divider line between journal entries.

ADDING THE EDIT JOURNAL PAGE

The edit journal page is responsible for adding and editing a journal entry. In this section, you'll learn how to create the journal edit page that implements the JournalEditBlocProvider as the provider for the JournalEditBloc class. You'll learn to use the StreamBuilder widget with the date, mood, note, and Cancel and Save buttons. You'll implement the showTimePicker() function to present the user with a calendar to choose a date. You'll learn how to use the DropdownButton() widget to present the user with a list of selectable moods with the icon, color, description, and mood icon rotation. You'll use the Matrix4 rotateZ() method to implement the mood icon rotation. You'll use the TextEditingController() constructor with the note TextField() widget. You'll learn how to call the MoodIcons class to color and rotate icons in the DropdownButton DropdownMenuItem selection list. You'll learn how to call the FormatDates class to format the selected date. See Figure 16.4 for the look of the final edit journal page.

Screenshot of final edit journal page. — **FIGURE 16.4**: Final edit journal page

TRY IT OUT Creating the Edit Journal Page

In this section, you'll continue to edit the journal project. You'll be adding the JournalEditBloc class to create or modify and save an existing entry.

Create a new Dart file in the pages folder. Right‐click the pages folder, select New ➪ Dart File, enter edit_entry.dart, and click the OK button to save.

Import the material.dart, journal_edit_bloc.dart, journal_edit_bloc_provider.dart, format_dates.dart, and mood_icons.dart classes. Add a new line and create the EditEntry class that extends a StatefulWidget.

  import 'package:flutter/material.dart';
  import 'package:journal/blocs/journal_edit_bloc.dart';
  import 'package:journal/blocs/journal_edit_bloc_provider.dart';
  import 'package:journal/classes/format_dates.dart';
  import 'package:journal/classes/mood_icons.dart';

  class EditEntry extends StatefulWidget {
   @override
   _EditEntryState createState() => _EditEntryState();
  }

  class _EditEntryState extends State<EditEntry> {
   @override
   Widget build(BuildContext context) {
    return Container();
   }
  }

Modify the _EditEntryState class and add the JournalEditBloc _journalEditBloc, FormatDates _formatDates, MoodIcons _moodIcons, and TextEditingController _noteController private variables.

The note field uses the TextField widget, which requires the _noteController to access and modify the values.

  class _EditEntryState extends State<EditEntry> {
   JournalEditBloc _journalEditBloc;
   FormatDates _formatDates;
   MoodIcons _moodIcons;
   TextEditingController _noteController;

   @override
   Widget build(BuildContext context) {
    return Container();
   }
  }

Override the initState(), and let's initialize the variables _formatDates, _moodIcons, and _noteController. Make sure you add the super.initState().

  @override
  void initState() {
   super.initState();
   _formatDates = FormatDates();
   _moodIcons = MoodIcons();
   _noteController = TextEditingController();
   _noteController.text = '';
  }

Override the didChangeDependencies() method and initialize the _journalEditBloc variable from the JournalEditBlocProvider class. Note that the InheritedWidget classes need to be accessed from the didChangeDependencies() method and not the initState() method.
```
  @override
  void didChangeDependencies() {
   super.didChangeDependencies();
   _journalEditBloc = JournalEditBlocProvider.of(context).journalEditBloc;
  }
```
Override the dispose() method and dispose of the _noteController and _journalEditBloc variables. The JournalEditBloc class's dispose() method is called and closes all of the StreamControllers.
```
  @override
  dispose() {
   _noteController.dispose();
   _journalEditBloc.dispose();
   super.dispose();
  }
```
Add the _selectDate(DateTime selectedDate) async method that returns a Future<DateTime>. This method is responsible for calling the Flutter built‐in showDatePicker() that presents the user with a pop‐up dialog displaying a Material Design calendar to choose dates.
Add the DateTime _initialDate variable and initialize it with the selectedDate variable passed in the constructor.
Add a final DateTime _pickedDate (date user picks from the calendar) variable and initialize it by calling the await showDatePicker() constructor. Pass the context, initialDate, firstDate, and lastDate properties. Note that for the firstDate, you use today's date and subtract 365 days, and for the lastDate, you add 365 days, which tells the calendar selectable date ranges.
Add an if statement that checks that the _pickedDate variable (the date user picked from the calendar) does not equal null, meaning the user tapped the calendar Cancel button. If the user did pick a date, then modify the selectedDate variable by using the DateTime() constructor and pass the _pickedDate year, month, and day.
For the time, pass the _initialDate hour, minute, second, millisecond, and microsecond. Note that since you are changing only the date and not the time, you use the original's created date time.

Add a return statement to send back the selectedDate.

  // Date Picker
  Future<String> _selectDate(String selectedDate) async {
   DateTime _initialDate = DateTime.parse(selectedDate);

   final DateTime _pickedDate = await showDatePicker(
    context: context,
    initialDate: _initialDate,
    firstDate: DateTime.now().subtract(Duration(days: 365)),
    lastDate: DateTime.now().add(Duration(days: 365)),
   );
   if (_pickedDate != null) {
    selectedDate = DateTime(
      _pickedDate.year,
      _pickedDate.month,
      _pickedDate.day,
      _initialDate.hour,
      _initialDate.minute,      _initialDate.second,
      _initialDate.millisecond,
      _initialDate.microsecond).toString();
   }
   return selectedDate;
  }

Add the _addOrUpdateJournal() method that calls the _journalEditBloc.saveJournalChanged.add('Save') sink to save journal entry. The JournalEditBloc receives this request and calls the Cloud Firestore database API.
```
  void _addOrUpdateJournal() {
   _journalEditBloc.saveJournalChanged.add('Save');
   Navigator.pop(context);
  }
```
In the Widget build() method, replace the Container() with the UI widgets Scaffold and AppBar, and for the body property add a SafeArea() and SingleChildScrollView() with the child property as a Column().
Set the Column crossAxisAlignment property to start.
Modify the AppBar title property's Text widget to Entry, and set the TextStyle color property to Colors.lightGreen.shade800.
Set the automaticallyImplyLeading property to a false value to remove the default navigation icon to navigate back to the previous page. You want the user to only dismiss this page by tapping the Cancel or Save button.
To customize the AppBar background color with a gradient, remove the AppBar widget shadow by setting the elevation property to 0.0.
To increase the AppBar's height, set the bottom property to a PreferredSize widget with the child property as a Container widget and the preferredSize property to Size.fromHeight(32.0).
Set the flexibleSpace property to a Container widget with the decoration property to a BoxDecoration widget.
Set the BoxDecoration gradient property to a LinearGradient with the colors property set to a list of [Colors.lightGreen, Colors.lightGreen.shade50].

Set the begin property to Alignment.topCenter and the end property to Alignment.bottomCenter. The LinearGradient effect draws the AppBar color from a lightGreen and gradually fades to a lightGreen.shade50 color.

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
     title: Text('Entry', style: TextStyle(color: Colors.lightGreen.shade800),),
     automaticallyImplyLeading: false,
     elevation: 0.0,
     flexibleSpace: Container(
      decoration: BoxDecoration(
       gradient: LinearGradient(
        colors: [Colors.lightGreen, Colors.lightGreen.shade50],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
       ),
      ),
     ),
    ),
    body: SafeArea(
     minimum: EdgeInsets.all(16.0),
     child: SingleChildScrollView(
      child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[

       ],
      ),
     ),
    ),
   );
  }

HOW IT WORKS

You created the edit_entry.dart file that contains the EditEntry class that extends a StatefulWidget to add or edit a journal entry. You implemented the JournalEditBlocProvider to receive state from the home page by using the provider's of() method from the didChangeDependencies method. The JournalEditBloc class is responsible for adding, editing, and saving journal entries. You used dependency injection by passing add, journal, and the DbFirestoreService() service to the JournalEditBloc class. You implemented the showDatePicker() to select dates with a calendar and implemented the DropdownButton() widget to select a list of moods and used the Matrix4 rotateZ() method to rotate mood icons. You used the MoodIcons utility class with the DropdownButton DropdownMenuItem selection list. The FormatDates utility class formats the selected date. To give the AppBar a color gradient effect, you used the BoxDecoration widget to customize the gradient property with the LinearGradient class.

The following exercise continues to edit the entry page to add individual StreamBuilder widgets to handle each entry field and actions.

TRY IT OUT Adding the StreamBuilders to the Edit Journal Page

In this section, you'll continue to edit the edit_entry.dart file. You'll be adding the StreamBuilder widgets to handle the date, mood, note, and Cancel and Save buttons.

Continue editing the Column created in step 13 from the previous exercise. Add to the Column children the StreamBuilder() widget with the stream property set to _journalEditBloc.dateEdit stream. This StreamBuilder() widget is responsible for handling the date field.
Add to the builder property the if statement to check whether the snapshot does not have data by using the !snapshot.hasData expression. Inside the if statement, return a Container(), meaning an empty space since the data has not arrived yet.
```
  if (!snapshot.hasData) {
   return Container();
  }
```
Add a new line and return the FlatButton widget that is used to show the formatted selected date, and when the user taps the button, it presents the calendar.
Set the FlatButton padding property to EdgeInsets.all(0.0) to remove padding for better aesthetics and add to the child property a Row() widget.
Add to the Row children property the Icons.calendar_day Icon with a size of 22.0 and color property to Colors.black54.
Add a SizedBox with the width property set to 16.0 to add a spacer.
Add a Text widget and format the _selectedDate with the DateFormat.yMMMEd() constructor. Add the Icons.arrow_drop_down Icon with the color property set to Colors.black54.
Add the onPressed() callback and mark it async since calling the calendar is a Future event.
Add to the onPressed() the FocusScope.of().requestFocus() method call to dismiss the keyboard if any of the TextField widgets have focus. This step is optional, but I wanted to show you how it's accomplished.
```
  FocusScope.of(context).requestFocus(FocusNode());
```
Add a DateTime _pickerDate variable initialized by calling the await _selectDate(_selectedDate) Future method, which is why you add the await keyword. You added this method in step 7 in the “Creating the Edit Journal Page” exercise.

Add the call to the _journalEditBloc.dateEditChanged.add(_pickerDate) sink that passes to the JournalEditBloc the selected _pickerDate variable.

    String _pickerDate = await _selectDate(snapshot.data);
    _journalEditBloc.dateEditChanged.add(_pickerDate);

The following is the full FlatButton widget code:

  StreamBuilder(
   stream: _journalEditBloc.dateEdit,
   builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
     return Container();
    }
    return FlatButton(
     padding: EdgeInsets.all(0.0),
     child: Row(
      children: <Widget>[
       Icon(
        Icons.calendar_today,
        size: 22.0,
        color: Colors.black54,
       ),
       SizedBox(width: 16.0,),
       Text(_formatDates.dateFormatShortMonthDayYear(snapshot.data),
        style: TextStyle(
          color: Colors.black54,
          fontWeight: FontWeight.bold),
       ),
       Icon(
        Icons.arrow_drop_down,
        color: Colors.black54,
       ),
      ],
     ),     onPressed: () async {
      FocusScope.of(context).requestFocus(FocusNode());
      String _pickerDate = await _selectDate(snapshot.data);
      _journalEditBloc.dateEditChanged.add(_pickerDate);
     },
    );
   },
  ),

Add a new line and add the StreamBuilder() widget with the stream property set to _journalEditBloc.moodEdit stream. This StreamBuilder() widget is responsible for handling the mood field.
```
  StreamBuilder(
   stream: _journalEditBloc.moodEdit,
```
Add to the builder property the if statement to check whether the snapshot does not have data by using the !snapshot.hasData expression. Inside the if statement return a Container().
```
   builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
     return Container();
    }
```
Add a new line and return the DropdownButtonHideUnderline widget with the child property set to the DropdownButton<MoodIcons> widget declaring the type as the MoodIcons class.
```
    return DropdownButtonHideUnderline(
     child: DropdownButton<MoodIcons>(
```
Add the value property and call the _moodIcons.getMoodIconsList() method by using the indexWhere method to search by the icon.title value. The value returned is the mood icon's index position in the list.
```
      value: _moodIcons.getMoodIconsList()[
       _moodIcons
       .getMoodIconsList()
       .indexWhere((icon) => icon.title == snapshot.data)
      ],
```
Add the onChanged property and call the _journalEditBloc.moodEditChanged.add(selected.title) sink by passing the selected.title value. This event occurs when the user selects a mood from the DropdownButton widget.
```
      onChanged: (selected) {
       _journalEditBloc.moodEditChanged.add(selected.title);
      },
```
This section creates the pop‐up list to choose a mood. Add the items property by calling the _moodIcons.getMoodIconsList(), and by using the dot operator, call the map() method that receives the selected mood icon.
Add a new line, return the DropdownMenuItem<MoodIcons> widget, and set the value property to the selected variable.
For the child property, add a Row with the children property set to the Transform() widget, SizedBox, and the Text widget.
Follow the steps from the home page's step 22 to set up the Matrix4 rotateZ() method.

At the end of this method, make sure you add the call to the toList() by using the dot operator.

      items: _moodIcons.getMoodIconsList().map((MoodIcons selected) {
       return DropdownMenuItem<MoodIcons>(
        value: selected,
        child: Row(
         children: <Widget>[
          Transform(
           transform: Matrix4.identity()..rotateZ(
             _moodIcons.getMoodRotation(selected.title)),
           alignment: Alignment.center,
           child: Icon(
            _moodIcons.getMoodIcon(selected.title),
            color: _moodIcons.getMoodColor(selected.title)),
          ),
          SizedBox(width: 16.0,),
          Text(selected.title)
         ],
        ),
       );
      }).toList(),
     ),
    );
   }
  ),

The following is the full DropdownButton widget code:

  StreamBuilder(
   stream: _journalEditBloc.moodEdit,
   builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
     return Container();
    }
    return DropdownButtonHideUnderline(
     child: DropdownButton<MoodIcons>(
      value: _moodIcons.getMoodIconsList()[
       _moodIcons
       .getMoodIconsList()       .indexWhere((icon) => icon.title == snapshot.data)
      ],
      onChanged: (selected) {
       _journalEditBloc.moodEditChanged.add(selected.title);
      },
      items: _moodIcons.getMoodIconsList().map((MoodIcons selected) {
       return DropdownMenuItem<MoodIcons>(
        value: selected,
        child: Row(
         children: <Widget>[
          Transform(
           transform: Matrix4.identity()..rotateZ(
             _moodIcons.getMoodRotation(selected.title)),
           alignment: Alignment.center,
           child: Icon(
            _moodIcons.getMoodIcon(selected.title),
            color: _moodIcons.getMoodColor(selected.title)),
          ),
          SizedBox(width: 16.0,),
          Text(selected.title)
         ],
        ),
       );
      }).toList(),
     ),
    );
   }
  ),

Add a new line and add the StreamBuilder() widget with the stream property set to _journalEditBloc.noteEdit stream. This StreamBuilder() widget is responsible for handling the note field.
Add to the builder property the if statement to check whether the snapshot does not have data by using the !snapshot.hasData expression.

Inside the if statement, return a Container().

  if (!snapshot.hasData) {
   return Container();
  }

When you use a TextField and the StreamBuilder as the user types their note, the cursor keeps bouncing to the beginning of the TextField. To fix this, add the _noteController.value to be equal to the _noteController.value.copyWith(text: snapshot.data) method. The bouncing cursor happens because every time a character is typed the sink updates the stream and the StreamBuilder retrieves the new value and repopulates the TextField.
Add a new line, return the TextField widget, and set the controller property to the _noteController.
Add the maxLines property and set it to the null value, making the TextField auto‐expand to multiple lines as needed, making it a great UX feature.

Add the onChanged property and call the _journalEditBloc.noteEditChanged.add(note) sink by passing the note value. This event occurs when the user types in the TextField widget.

  StreamBuilder(
   stream: _journalEditBloc.noteEdit,
   builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
     return Container();
    }
    // Use the copyWith to make sure when you edit TextField the cursor does not bounce to the first character
    _noteController.value = _noteController.value.copyWith(text: snapshot.data);
    return TextField(
     controller: _noteController,
     textInputAction: TextInputAction.newline,
     textCapitalization: TextCapitalization.sentences,
     decoration: InputDecoration(
      labelText: 'Note',
      icon: Icon(Icons.subject),
     ),
     maxLines: null,
     onChanged: (note) => _journalEditBloc.noteEditChanged.add(note),
    );
   },
  ),

Add a new line, add a Row() widget, and set the mainAxisAlignment property to MainAxisAlignment.end. This Row() is responsible for right‐aligning the Cancel and Save buttons on the form.
Add to the children property the FlatButton widget and set the child to the Text widget with the 'Cancel' value. For the onPressed property, call the Navigator.pop(context) method to close the page without saving.
Add a SizedBox(width: 8.0) to separate the next FlatButton widget.
Add a second FlatButton widget and set the child to the Text widget with the 'Save' value.

For the onPressed property, call the _addOrUpdateJournal() method to save the journal entry.

  Row(
   mainAxisAlignment: MainAxisAlignment.end,
   children: <Widget>[
    FlatButton(
     child: Text('Cancel'),
     color: Colors.grey.shade100,
     onPressed: () {
      Navigator.pop(context);
     },
    ),
    SizedBox(width: 8.0),
    FlatButton(
     child: Text('Save'),
     color: Colors.lightGreen.shade100,     onPressed: () {
      _addOrUpdateJournal();
     },
    ),
   ],
  ),

HOW IT WORKS

You created the edit_entry.dart file that contains the EditEntry class that extends a StatefulWidget to handle adding and editing journal entries. The JournalEditBlocProvider is used to receive state from the home page. You implemented the JournalEditBloc class without using a provider to add or edit and save journal entries. The StreamBuilder widget monitors the _journalEditBloc.dateEdit stream, _journalEditBloc.moodEdit stream, _journalEditBloc.noteEdit stream, and each builder rebuild every time a value changes.

The showTimePicker() function presents the user with a calendar, and the DropdownButton() widget presents the user with a list of selectable moods. The Matrix4 rotateZ() method is used to implement the mood icon rotation. The TextEditingController() constructor handles the note TextField() widget. The MoodIcons class is responsible for coloring and rotating icons in the DropdownButton DropdownMenuItem selection list. The FormatDates class formats the selected date. You created a custom color gradient effect for the AppBar widget by using the LinearGradient class.

SUMMARY

In this chapter, you completed the journal app that you started in Chapter 14. You applied the BLoC pattern to separate the UI widgets from the business logic. You implemented BLoC classes, BLoC providers, service classes, utility classes, model classes, and app‐wide and local‐state management. You passed app‐wide state management between pages and local‐state management in the widget tree by using providers (InheritedWidget) and BLoCs. You used dependency injection to inject service classes into the BLoC classes. You learned that the benefit of using dependency injection keeps the BLoC classes platform‐agnostic, giving the ability to share BLoC classes between different platforms like Flutter, AngularDart, or others.

You applied app‐wide state management by implementing the AuthenticationBlocProvider and AuthenticationBloc classes to the app's main page. You used the StreamBuilder widget to monitor the _authenticationBloc.user stream for user credential changes. When the user credential changes, the StreamBuilder builder rebuilds and appropriately navigates the user to the login or home page.

You applied the LoginBloc class to validate the user's credentials and email and password requirements. You overrided the initState() method to initialize the _loginBloc variable with the LoginBloc class by injecting the AuthenticationService() class without using a provider. Note that the reason you initialized the _loginBloc variable from the initState() and not the didChangeDependencies() is because the LoginBloc does not need a provider (InheritedWidget).

You used the StreamBuilder widget with the TextField widget to validate email and password values. The TextField widget's onChanged property calls the _loginBloc.emailChanged.add sink and the _loginBloc.passwordChanged.add sink to send the values to the LoginBloc Validators class. You used the StreamBuilder widget to listen to the _loginBloc.loginOrCreateButton stream to toggle Login or Create Account as the default button.

You applied the HomeBloc class to build a list of journal entries filtered by the user uid with the ability to add, modify, and delete entries. You accessed the AuthenticationBlocProvider and HomeBlocProvider classes by using the provider's of() method from the didChangeDependencies method. You used the StreamBuilder widget by calling the ListView.separated constructor to build the journal entries list. You used the Dismissible widget's confirmDismiss property to prompt the user with the delete confirmation dialog. You called the MoodIcons utility class to format mood icons and the FormatDates class to format dates.

You accessed the JournalEditBlocProvider class by using the provider's of() method from the didChangeDependencies method. You applied the JournalEditBloc class to add, edit, and save journal entries. You used the StreamBuilder widget to handle the date, mood, note, and Cancel and Save buttons. You implemented the showTimePicker() function to show a calendar and to use the DropdownButton() widget to present the user with a list of selectable moods. You used the Matrix4 rotateZ() method to rotate the mood icon according to mood. You used the MoodIcons class with the DropdownButton DropdownMenuItem to present the mood selection list. You used the FormatDates class to format the selected date.

WHAT YOU LEARNED IN THIS CHAPTER

TOPIC	KEY CONCEPTS
`LoginBloc` class	You learned how to implement the `LoginBloc` class without a provider to handle the authentication credentials and to validate email and password requirements.
`AuthenticationBloc` class	You learned how to implement the `AuthenticationBloc` class with the `AuthenticationBlocProvider` class to handle app‐wide state management in the main page.
`HomeBloc` class	You learned how to implement the `HomeBloc` class with the `HomeBlocProvider` class to populate the `ListView` with journal entries by using the `separated()` constructor. You learned to use the `HomeBloc` class to add, modify, or delete existing journal entries.
`JournalEditBloc` class	You learned how to implement the `JournalEditBloc` class without a provider to add or edit and save journal entries.
`InheritedWidget` class	The `AuthenticationBlocProvider`, `HomeBlocProvider`, and `JournalEditBlocProvider` classes extend from the `InheritedWidget` class, and you learned how to access them from the `didChangeDependencies()` method and not the `initState()` method.
`AuthenticationBlocProvider` class	You learned how to implement the `AuthenticationBlocProvider` as the provider for the `AuthenticationBloc` class for app‐wide authentication state management.
`HomeBlocProvider` class	You learned how to implement the `HomeBlocProvider` class as the provider for the `HomeBloc` class.
Dependency injection	You learned how to use dependency injection by injecting service classes to the BLoC classes. You learned that by injecting services, the BLoC classes remain platform‐agnostic.
`StreamBuilder` widget	You learned how to implement the `StreamBuilder` widget to monitor a `stream`, and when a change occurs, the `builder` rebuilds the widget with the latest data.
`ListView.separated` constructor and `Divider()` widget	You learned how to implement the `ListView.separated` constructor to build a list of journal entries separated by a `Divider()` widget.
`Dismissible` widget and `confirmDismiss` property	You learned how to implement the `Dismissible` widget to swipe and delete a journal entry. You learned how to implement the `Dismissible` widget's `confirmDismiss` property to prompt a dialog to confirm deleting a journal entry.
`DropdownButton()` widget	You learned how to implement the `DropdownButton()` widget to present a list of moods with the title, color, and icon rotation.
`MoodIcons` class	You learned how to implement the `MoodIcons` class to retrieve the mood's properties like the `title`, `color`, `rotation`, and `icon`.
`showTimePicker()` function	You learned how to implement the `showTimePicker()` function to present a calendar to choose a date.
`Matrix4 rotateZ()` method	You learned how to implement the `Matrix4 rotateZ()` method to rotate an icon according to the selected mood.
`FormatDates` class	You learned how to implement the `FormatDates` class to format dates.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 16 Adding BLoCs to Firestore Client App Pages

Create new playlist

Sign In

Sign Up

WHAT YOU WILL LEARN IN THIS CHAPTER

ADDING THE LOGIN PAGE

MODIFYING THE MAIN PAGE

MODIFYING THE HOME PAGE

ADDING THE EDIT JOURNAL PAGE

SUMMARY

WHAT YOU LEARNED IN THIS CHAPTER

Table of Contents for
16 Adding BLoCs to Firestore Client App Pages