Dart & Flutter: The Complete Mobile Apps Development Course

This video provides an overview of the entire course.

This video deals with installing the Flutter framework on a Mac computer. When we install the flutter framework we also install the framework as well because the Flutter uses Dart

• Download the flutter framework and extract it.

• Add flutter to the path.

• Run flutter doctor to detect issues.

This video deals with installing Android Studio which gives us access to the Android SDK. Once that is installed we must set up an Android emulator which we will use when running Android apps. We next install Xcode so that we can develop for IOS as well.

• Download android studio and create an emulator.

• Download Xcode from app store

• Run flutter doctor to detect issues

This video shows us how to install IntelliJ as well as the Dart and Flutter plugins. We then flutter doctor to detect any issues that we may have and then we are ready to start coding.

• Download IntelliJ and install the flutter and dart packages

• Run flutter doctor to detect issues.

• Build your first app.

This video deals with installing the Flutter framework on a Windows computer. When we install the flutter framework we also install the framework as well because the Flutter uses Dart

• Download the flutter framework and extract it.

• Add flutter to the path

• Run flutter doctor to detect issues.

This video deals with installing Android Studio which gives us access to the Android SDK. Once that is installed we must set up an Android emulator which we will use when running Android apps.

• Download and install android studio and create an emulator.

• Download Genymotion for users with AMD CPUs

• Create an app an run it on the emulator

This video shows us how to install IntelliJ as well as the Dart and Flutter plugins. We then flutter doctor to detect any issues that we may have and then we are ready to start coding.

• Download IntelliJ and install the flutter and dart packages

• Run flutter doctor to detect issues.

• Run flutter doctor to detect issues.

In this video, you’ll see the code challenge of day-1

This video explains what a variable is from an object-oriented programming perspective. The viewer will learn how to create variables and the different types of variables.

• Explain what a variable is and what it is used for.

• Explain when to use different types of variables

• Use code examples to demonstrate different variable types.

This video shows you how to concatenate(join) two strings; it shows you how to use interpolation; and it shows you how to convert strings to uppercase or lower case.

• Demonstrate String Concatenation using examples

• Demonstrate String Interpolation using examples

• Convert strings to uppercase and lowercase

This video looks at Arithmetic Operators such as +, -, *, /; Equality operators such as ==, !=; and Relational Operators such as<, >, >= and <=.

• Perform arithmetic operations involving integers.

• Compare values using the Equality Operators

• Compare values using the Relational Operators

This video looks at if, if else, else if clause and logical operators such as and, or and not.

• Create a simple if statement with one condition

• Create more complex if statements using else

• Create even more complex if statements using logical operators

This video looks at for loops, while do while and it attempts to illustrate the importance of the break statement.

• Use a for loop to print a times table.

• Create infinite loops with while and do while

• Illustrate the importance of break to while and do while

This video shows you how to create switch statements and compares switch statements to if else and states when to use each.

• Create switch statements using strings.

• Create switch statements using integers.

• Compare switch statements to if else.

In this video, you’ll see the code challenge of day-2

This video explains what object-oriented programming is and shows how classes are used as a blueprint to create objects.

• Explain what object-oriented programming is.

• Create a class and show how to import it to another file.

• Use this class to create objects.

This video shows you how to create a function with and without parameters; and a function with and without a return type. Functions are also compared to methods.

• Define functions and show the different parts of a function.

• Add methods to the computer class.

• Call these methods on objects that were created.

This video demonstrates the importance of constructors and how to generate one with IntelliJ. It also shows how subclasses can inherit properties and methods of the main class. We then look at how we can change the default behavior of classes.

• Create constructors for the classes that were created

• Create subclasses and use extends keyword to inherit class attributes.

• Change the default behavior of a class by overriding the method.

This video attempts to explain what an interface is as well as an abstract class. It also demonstrates how to use interfaces when we want to inherit from multiple classes.

• Create an abstract class and show how it is used.

• Create interfaces and show how they are used.

• Inherit attributes from multiple classes using interfaces.

This video defines a list and a map and demonstrates how to create each. It also shows some of the methods that are available to lists and maps.

• Create list using different data types e.g integers, strings, doubles, Booleans and objects.

• Use .length and .add methods on lists. Access items at specific indices in a list.

• Create maps and use .length, .add .keys and .values methods on map

This video shows you how to perform functions on each item in a list using for and for each loops. It first uses the slow way of moving through a list and then the fast way using loops.

• Iterate through a list with a for loop.

• Iterate through a map with a for each loop.

• Iterate through a collection and add items to an empty collection.

In this video, you’ll see the code challenge of day-3

This video explains what material design is and how to apply it to app design. It focusses on some of the most common flutter widgets.

• Define material design and illustrate its importance.

• Examine widgets that follow material guidelines.

• Examine widgets that do not follow material guidelines.

This video shows you how flutter projects are structured. It talks about importing libraries and it demonstrates how widgets can be made up of other widgets.

• Place classes in separate files and import them.

• Build a layout with a scaffold container and button.

• Use a diagram to show how a flutter project is structured.

This video shows you how to build a login page using stateless widgets. It also shows you how to import images and add custom fonts to the pubspec file.

• Demonstrate how to add custom fonts to the project.

• Demonstrate how to add custom images to the project.

• Use the custom fonts and images in our project.

This video shows you how to add padding and row widgets. It also shows you how place two evenly spaced outlined buttons in a row widget and print information to the console when they are pressed. It introduces you to the inkwell widget which is an alternative for a button widget.

• Show how to add outlined buttons to a row widget.

• Assign a function to each button widget and call it.

• Assign a function to an inkwell and call it

This video attempts to define stateful widgets. It shows you how to use navigator.push to go to another screen and add a listview to a form to hold textFormField widgets.

• Define stateful widgets and create a class that extends stateful widget.

• Use navigator.push to go to a next screen.

• Build a form using ListView and TextFormField widgets.

In this video we will complete our login form. We will call setState and use it to reset all the fields in our form.

• Connect a controller to the textFormField widgets.

• Use setstate() to reset the textFormFields.

• Use google search to solve issues with our app.

In this video, you’ll see the code challenge of day-4

This video attempts to define JSON, HTTP and APIS. It gives examples of JSON data.

• Define JSON and show examples.

• Define HTTP

• Define APIS and use diagrams to illustrate them

This video shows us the libraries that we need to use in order to work with JSON data. These include dart async, dart convert and the http package.

• Explain how these libraries work

• Import these libraries into our project

• Get an api key to use with our app.

This video talks about the future class and shows how we can use this class to get a list of data from the API

• Create a future function that returns a list of data.

• Place this JSON data in a variable

• Use a for loop to loop through the data and print it to console

In this video we use list view builder to paint cards on the screen that will display the data for our app. We also need to import the cached image library so that we can display images from a network source

• Create a list view builder widget and add a card widget.

• Add images and text to the card widget.

• Add a drawer widget to switch between news providers.

In this video we are going to add the second news provider to the app drawer and replace the hard-coded string in the appbar’s title text. An alert dialog is also created that when tapped displays a message to the screen.

• Add the second news provider to the app drawer.

• Use the setState function to change the state of the app.

• Create an alert to display messages when a card is tapped.

There is code that is no longer being used that needs to be removed and the API key is only valid for one day. The current date must be appended to the API Key.

• Import the international package to generate a date string

• Append the date string to the apiURL.

• Remove code that is not being used in the app.

In this video, you’ll see the code challenge of day-5

In this video we attempt to define data persistence and persist data using text files. We also use the flutter toast library to add a toast message.

• Define what data persistence and state methods used to persist data.

• Persist data using text files

• Use flutter toast library to display a toast on the screen.

In this video we attempt to focus on saving data with shared preferences and state when it should be used

• Define shared preferences

• Identify when to use shared preferences to store data.

• Persist data using shared preferences.

In this video we attempt to define databases, add the necessary plugins to allow us to create a database and create the model class for our database model.

• Define databases and explain how they work.

• Import the necessary plugins for the project and create necessary folders.

• Create the database model.

In this video we attempt to explain what a singleton approach is and use this approach to create our database. The database helper class is also created. This class is used to perform operations on the database.

• Define the singleton approach

• Create the database helper class and create the database table

• Create methods to read items from the database.

In this video we continue working on the database class, methods are created that allow us to update, delete and close the database. A database instance is then created and this is then used to store an item in the database.

• Create a method to update items in the database.

• Create a method to delete items from the database

• Add an item to the database

In this video we build a records screen to display all the items from the database and a fab button which when clicked will take us to a new screen which will allow us to enter data into the database.

• Create a screen to display all the items from the database.

• Create a method to collect user input and add it to the database

• Create a method to read data stored in the database.

In this video we build an edit screen which allows us to update the items in the database. We need to push data from one screen to the next about a specific student record and use this data to populate the textFormFields.

• Create an edit screen that allows you to update individual student records

• Push data to the next screen using routes

• Create a method to update the data stored in the database

In this video, you’ll see the code challenge of day-6

In this video we prepare our app for deployment to the Google Play Store. We discuss changes that were made to the app before it was deployed. Then we create a developer account using our Google credentials. A privacy policy is generated using terms feed and we use a free app icon generator to create icons for the app.

• Create a Google Developer Account

• Generate a privacy policy using Termsfeed.com

• Generate an icon using https://appicon.co/

In this video we configure Proguard, generate an APK and upload the app to Google Play.

• Configure Proguard

• Generate an APK file

• Upload the app to google play

In this video we are going to join the Apple Developer Program, create an IOS certificate for the app, add a privacy policy and set the pricing for the app.

• Join the Apple Developer Program and add a Privacy Policy

• Create an IOS Certificate.

• Add pricing for the app.

In this video we build the project and push it to app store connect. The app is installed on multiple simulators and these are used generate screenshots.

• Build the project and push it to app store connect

• Install the app on multiple simulators.

• Add screenshots for multiple devices

In this video we discuss how long it takes for your app to be published on the app store. Then we discuss reasons why your app could be rejected and look at apps that have been created with the flutter framework.

• Discuss how long it takes for your app to be published on the app store.

• Discuss reasons why your app could be rejected.

• Look at apps created with flutter.

In this app we discuss ways how you app can be promoted and look at moving forward. We discuss creating a blog, a Youtube page, create a Github page to share code, create a Facebook page and create a LinkedIn page.

• Discuss creating a blog and a Youtube page.

• Discuss Github and code sharing.

• Discuss Facebook and LinkedIn.

In this video, you’ll see the code challenge of day-7

This video will give you an overview about the course.

In this video, we will learn how to get Flutter running on a machine. Also define the other required software to be installed.

• Download and install the Flutter distribution

• Get the other required software, like Android Studio and XCode

• Use recommended software like Visual Studio Code, Git, and GitKraken

In this video, we’ll learn how to set up a repo in GitLab, what git-flow is, and how to push changes to the repo.

• Set up a repository in GitLab using web interface, and clone to local machine.

• Use GitKraken to initialize git-flow and to push commits to the repo.

• Validate that the changes were accepted. The user is ready to start making Flutter apps.

In this video, we will tackle the requirements prior to the initialization of the Flutter project.

• Initialize the Flutter project using the CLI or Android Studio

• Validate all the created files and folders, and push the new changes to the repo

• Ready to start coding his/her new Flutter app

In this video, we will learn what the boilerplate code from ‘flutter create’ contains. We’ll understand ‘state’, ‘stateless’ widget, and ‘stateful’ widget.

• Let’s fire up Visual Studio Code and check out the included boilerplate

• Define what ‘state’ means, and see the difference between stateful and stateless widgets

• Run the app and see how reactivity in Flutter works

Prior to coding, we have to know what the app would roughly look like so here is a guide on which widgets to use.

• Define what the app’s user interface would look like

• Define what classes and widgets are, and the different Flutter widgets

• Do the coding of the initial user interface according to the design

In this video, we will learn how to add arguments or parameters to the classes and widgets that we will use for the app, and add ListViews to make a scrollable list of chat heads and messages. Also, add a widget that accepts user input.

• Add variables that define what the widgets will show

• Add ListViews and ChatHeads and show messages

• Discover how to handle the user text input prior to adding to messages

In this video, while we are still in the beginning of the app, we will add files that will contain some static messages and chat with friends just so that we can show something in the ListViews.

• Add two new files to the asset folder and add dummy data

• Import the files into the pubspec.yaml file, and load them into memory

• Use a Flutter function to deserialize the JSON files and display the data

The initial Chat Messages widget we added before is clunky. In this video, we will start to refine the UI little by little. We will also show the chat to friends from the recentChats.json file.

• Add views for Home, ChatHistory, and Settings tabs

• Read, deserialize, and load the recentChats.json file. Load it to a ListView

• Make the Text widget for the messages aligned and use an image for the avatar

As chat apps do, we shall now let the user type in a message through the TextFormField, and add that message.

• Replace the FutureBuilder with a List state that can be changed at runtime

• Add a ChatMessage widget to the List state when the user presses Enter or the Send button

• Enhance the TextFormField appearance by using a collapsed type

Before we use Firebase Cloud Firestore, an introduction is necessary.

• Discuss the different services that Firebase offers

• Elaborate the reason we are using Firebase

• Create a project and download the config files for Android and iOS

In this video, we’ll learn what Cloud Firestore and NoSQL are. And we’ll discuss how it differs from SQL. We will also create a Firestore database for our project.

• Discuss what Firestore and NoSQL are

• Learn what the different data types that can be used in Firestore are

• Create a Firestore database and add dummy data

In this video, we will learn about Firebase Authentication and how such a server makes it easy to handle user sign-in.

• Show the Firebase Authentication console to familiarize viewers

• Discuss the different ways to sign in to Firebase Authentication

• Show the ways to identify the signed-in user on a project

In this video, we will learn how to use Firebase, a complete suite of servers that will help developers concentrate on coding, and how to use it with Flutter.

• Define the dependencies for Firebase

• The dependencies will then be imported to pubspec.yaml

• Configure Firebase to work with both Android and iOS apps made with Flutter

Building an authentication server takes a lot of time and will cost app owners money when they provision the hardware and supporting infrastructure. In this video we will see how to combat this.

• Use Google’s authentication server

• Add Google Sign-in together with custom sign in user interface

• Connect received authentication tokens through Firebase Authentication

Most apps require a database to function correctly. While SQL databases are really good, NoSQL databases are gaining a solid following. We will connect our app with Firestore: a NoSQL database.

• Connect Firestore to the app through the imported dependency

• Define the data structure for the messages collection

• Add temporary data to the database and test the app’s connection

In this video, we will learn how to list and add messages to the database using the app.

• Create a view where the messages can be listed into

• Explain and use the StreamBuilder class for listing and listening to changes in data

• Add a new message to the messages collection and view it on the user interface

What is a chat app without a friend or a contact? In this video, we will make a way to add contacts to the database.

• Define the data structure for storing the contacts

• Make a view for showing the contacts in a list and open it using the FAB

• Add ChatHeads to a ListView while using StreamBuilder to fetch the data

In this video, we will add a friend to the database so the user can initiate a conversation with him/her

• Add a button and a dialog for adding a friend

• Use a rudimentary way to add the friend: using the user id, avatar, and name

• Add buttons for getting the user’s own data for others to add him/her

In this video, we will replace the static data from the json file with the actual data from Firestore

• Define the data structure for the chat history or conversations

• Remove the reference to the static recentChats.json file

• Use a StreamBuilder to build and show the list of messages

In this video, we will finalize the codes as well as clean up and replace the static references with dynamic references from the user’s data and Firestore

• Replace all static data/strings with dynamic data

• Finalize the arguments on the ChatView to allow opening actual messages collection

• Check other parts of the codes while making sure it still works

In this video, we will learn how to prepare the app prior to releasing it to Android Play Store.

• Add build options

• Modify the file

• Build the APK