Mastering Flutter

Understand how to create a Bloc Provider.

   •  Create a bloc provider class

   •  Go over the abstract class BlocBase

   •  Go over the BlocProvider class

Setting up the first building blocks for our CategoriesBloc class with Streams and Sinks.

   •  Make a CategoriesBloc class that inherits from BlocBase

   •  Define our list of categories

   •  Go over streams and sinks

This step is necessary for the completion of the bloc. So, when we create an instance of this object, we need it fetch the data.

   •  Create a constructor

   •  Create the instance of DbApi

   •  Fetch categories and push them out with sink

Here we will look at using the BlocProvider class we created earlier to make it possible for the home page to get the CategoriesBloc.

   •  Make text more readable

   •  Use the BlocProvider

   •  Create a reference to our bloc

In this video we will tie it all together by learning how we can display data from streams in our UI of home page.

   •  Create a StreamBuilder widget

   •  Provide the StreamBuilder with our bloc stream

   •  Use the builder to display the data in our ListView.builder

Here we will be setting up a selected category page which will be used when we tap on a category which will navigate to this page.

   •  Resolve a bug from StreamBuilder returning null

   •  Create a ListTile and a new page

   •  Navigate to our new page with the ListTile

Here we will be creating a new data model for the product that will be used when to fetch our data.

   •  Create the data model for products

   •  Generate a dummy list of products for the category page

   •  Display those products in a ListView

Here we will be setting up a Products BloC to seperate logic from the UI of the category page.

   •  Create a products BLoC class

   •  Let the BLoC take a category paramater

   •  Create a dummy method which returns a list of products

Here we will create a grid of products that will be displayed in the selected category page.

   •  Set up BloC provider for the page

   •  Create a StreamBuilder that will listen to the stream

   •  Create a GridView.builder to display our StreamBuilder data

Here we will go over what we have done so we get a better overall understanding of the code.

   •  Go over the API methods

   •  Go over how our BLoC works

   •  Look back at our data models and pages

The core part for this section to work is that we need a page where the cart will be and also a model to describe what the cart actually will be.

   •  Setting up our Cart model

   •  Defining the variables used in the Cart model

   •  Creating our cart pageSetting up our Cart BloC which will contain the state of the items we add to the cart.

   •  Setting up our Cart BloC and initializing the Cart model

   •  Setting up our StreamController

   •  Using getters to restrict ourselves

Setting up our Cart BloC which will contain the state of the items we add to the cart.

• Setting up our Cart BloC and initializing the Cart model

• Setting up our StreamController

• Using getters to restrict ourselves

Taking a quick look at RxDart and implementing some of its features.

   •  Going over to the Flutter packages site for RxDart

   •  Taking a look at BehaviourSubject

   •  Replacing our StreamController

Finishing touches to the Cart BloC so we can start using it in the view.

   •  Defining a StreamController for the number of products

   •  Making sure that we close any connection in dispose

   •  Using getters to restrict ourselves

As we want to use this Cart BLoC in different pages of our application we need to supply the whole application with it.

   •  Learning to provide the whole application with a BLoC

   •  Wrapping MyApp with a BlocProvider

   •  Supplying our BlocProvider with the Cart BLoC

In this video, we will add a cart button to display the number of items in the cart.

   •  Create a stateless widget for the cart button

   •  Get the cart bloc with the bloc provider

   •  Design the cart icon

We will be fetching our products to display in a cart page.

   •  Get the cart bloc with the bloc provider

   •  Use a Stream builder with the products

   •  Design the page

Add products to the cart with the help of our cart bloc.

   •  Get the cart bloc with the bloc provider

   •  Override the compare function

   •  Create our addProduct method

Adding a checkout button to our cart page.

   •  Clean up the code

   •  Refactor navigation method

   •  Add a checkout button to the cart page

The initial setup for Firestore.

   •  Navigate to www.pub.dartlang.org

   •  Find the Firestore plugin

   •  Install the plugin

Setting up a Firebase project.

   •  Navigate to www.console.firebase.google.com

   •  Add a new project

   •  Go through the setup process for Android and iOS

Setting up Firestore and adding data.

   •  Set up a Firestore database

   •  Add Collections

   •  Add Documents

Updating the product so we can fetch data from Firestore and store that in the product object.

   •  Create a named constructor

   •  Set the parameters

   •  Set up a static field for the constructor

Display categories from Firestore in our categories page.

   •  Create our db function to fetch categories

   •  Listen to the stream in our category’s bloc

   •  Add the correct items to our list

Display products from a specific category in our products page.

   •  Create our db function to fetch products

   •  Listen to the stream in our products bloc

   •  Add the correct items to our list

We need to store our images for each product. In this case we are going to store this in Firebase Storage.

   •  Set up Storage rules in Firebase Storage

   •  Upload an image

   •  Get the Download url and storage that in Firestore

We need to display that image we stored in Firebase Storage on the grid of that specific product.

   •  Add an image variable in the product

   •  Using the Stack widget

   •  Display our image on the GridItem

Setting the theme can be a bit complicated so we will look at this to switch our app over to a dark theme.

   •  Set our brightness to dark

   •  Learn how to change the text style in the ThemeData

   •  Learn how to use the copyWith() to override a specific style

When data takes time we often want some kind of indications that it is loading. To do that with BLoC is a bit different as it is Reactive.

   •  Check if we have an error

   •  Check the connection state in a switch

   •  Set loading indication if the connection state is waiting

We are going over what we have done and what I recommend you look at.

   •  Look at firebase authentication and how you can add that flow in to your applications

   •  Packages can be found in pub.dartlang.org for example SQLite

   •  Firebase has packages for their features

We are going to look at why we should be avoiding var and untyped arguments.

   •  Look at var

   •  Look at untyped arguments and functions

   •  Learn about preferred types

Learning about Flutter analyzer, assert, and how it can help finding problems in our code.

   •  Look at Flutter analyzer and how to use it

   •  Learn what assert is

   •  Implement an example of assert usage

Here we will learn how we can use different UI tools to find problems in our layout.

   •  Select a specific widget with “Toggle select widget mode”

   •  Learn about debug paint

   •  Toggle platform mode which lets us view the app as an iOS device

Learning about profiling and how we can use it to find causes of junky animations and UI.

   •  Look at the Performance tab

   •  Learn about Flutter run --profile

   •  Display performance overlay on the device

We will look at additional resources to further improve on this topic.

   •  Find more resources on www.flutter.dev/docs

   •  Check the debugging section

   •  Check the performance section