Dart & Flutter: The Complete Mobile Apps Development Course

Name: Dart & Flutter: The Complete Mobile Apps Development Course
Rating: 3.8 (16 reviews)

A Complete Guide to the Dart & Flutter Framework for building beautiful native apps on iOS and Android

Created byPackt Publishing

Last updated 2/2019

English

What you'll learn

Build applications for iOS and Android with Dart and Flutter
Learn Dart basics: data types, variables, control flows (if statements, for loops), operations, and functions
Learn Dart object-oriented concepts:classes, functions, inheritance, interfaces, and data structures
Build apps with material design widgets - scaffold, flat buttons, cards, and ListView .builder
Fetch data from online APIs and parse JSON objects
Persist data with SQLite
Create a To-Do list and a chat application
Add Google maps, routes, and places to create comprehensive map applications
Detect images to discover the powerful machine learning APIs with the Firebase ML Kit
Manage state changes using the Scoped Model, Bloc and Redux architecture patterns
Build robust code with Unit, Widget, and Integration testing
Build apps and deploy them to Google Play Store and Apple App Store with a single codebase

Course content

3 sections • 104 lectures • 16h 45m total length

The Course Overview1:15
This video provides an overview of the entire course.
MacOS Setup – Install the Flutter SDK4:53
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.
MacOS Setup – Install Android Studio and XCode4:39
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
MacOS Setup – Install IntelliJ and Build Our First App5:31
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.
Windows Setup – Install the Flutter Framework3:48
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.
Windows Setup – Install Android Studio4:54
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
Windows Setup – Install IntelliJ and Build Your First App4:40
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.
Code Challenge0:57
In this video, you’ll see the code challenge of day-1
Introduction to Variables and Data Types5:42
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.
String Concatenation and Interpolation4:47
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
Arithmetic Operators and Equality Operators5:07
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
If Else and Logical Operators4:40
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
for Loops, do while, and break4:36
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
Switch Statements5:10
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.
Code Challenge1:58
In this video, you’ll see the code challenge of day-2
Introduction to Classes and Objects4:53
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.
Creating Functions4:51
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.
Constructors, Class Inheritance, and Overriding Methods4:58
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.
Interfaces and Abstract Classes3:59
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.
Introduction to Collections4:45
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
Using Loops to Iterate Through Collections4:41
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.
Code Challenge1:42
In this video, you’ll see the code challenge of day-3
Introduction to Material Design5:20
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.
Flutter Project Structure5:03
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.
Stateless Widgets – Part 15:18
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.
Stateless Widgets – Part 23:57
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
Stateful Widgets – Part 14:10
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.
Stateful Widgets – Part 24:00
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.
Code Challenge2:20
In this video, you’ll see the code challenge of day-4
Using HTTP and JSON in Our App4:54
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
Setting Up the Project to Receive JSON Data4:25
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.
Getting Data from the API4:22
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
Displaying the JSON Data on the Screen – Part 14:12
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.
Displaying the JSON Data on the Screen – Part 25:16
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.
Wrapping Up4:33
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.
Code Challenge1:28
In this video, you’ll see the code challenge of day-5
Persistence in Flutter: Saving Data with Text Files7:58
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.
Persistence in Flutter: Saving Data with Shared Preferences6:31
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.
Persistence in Flutter: Saving Data with Databases Part 15:59
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.
Persistence in Flutter: Saving Data with Databases Part 27:39
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.
Persistence in Flutter: Saving Data with Databases Part 37:39
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
Persistence in Flutter: Saving Data with Databases Part 46:12
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.
Persistence in Flutter: Saving Data with Databases Part 56:44
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
Code Challenge1:47
In this video, you’ll see the code challenge of day-6
Deploying Your App to the Google Play Store Part 16:57
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/
Deploying Your App to the Google Play Store Part 24:08
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
Deploying Your App to the Apple App Store Part 14:29
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.
Deploying Your App to the Apple App Store Part 25:31
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
Deploying Your App to the Apple App Store Part 33:44
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.
Promoting Your App and Moving Forward4:09
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.
Code Challenge1:13
In this video, you’ll see the code challenge of day-7
Test your knowledge

The Course Overview3:38
This video will give you an overview about the course.
Download, Install, and Set Up the Required Softwares14:03
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
Set Up a Repository in GitLab21:59
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.
Initialize the Flutter App Using the Command-Line Tool16:12
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
The Boilerplate from Flutter23:54
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
Add a Basic Layout Using Layout Widgets1:00:39
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
Build the Message Widgets51:18
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
Create a JSON File for the Messages42:45
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
Improve the Layout of Chat Messages45:51
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
Simulate Sending a Message41:00
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
A Short Firebase Introduction11:36
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
Adding a Firebase Cloud Firestore Database15:30
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
Introduction to Firebase Authentication6:24
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
Add Firebase Dependencies11:13
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
Add Google-Sign In to the App27:11
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
Add Firestore Connection16:59
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
Listing and Adding Messages25:38
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
Adding a Contacts List15:43
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
Adding a Friend21:32
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
Use Firestore in ChatHistory14:16
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
Cleaning the Codes32:03
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
Putting the Application Together9:41
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
Test your knowledge

The Course Overview4:54
This video will give you an overview about the course.
Create Mockup UI to Visualize the App7:03
It is important before implementing the main code that a visual representation of the code is provided, which will include all the visual widgets. A mockup will be created, with widget values either hardcoded or loaded from the assets folder.
Create all the widgets required for the UI
Populate the widgets with either hardcoded values or local images
Run the app to confirm acceptance of the UI
Implement the Widget Tester to Test the Weather Widget4:49
Upon implementing a widget tree or widget UI, testing code should be implemented and run to expose any bugs in the widget code. Use the Flutter widget tester to create a number of tests for verifying the widgets.
Build the widget to be tested
Insert a number of tests
Run the tests to verify pass or fail
Get JSON Weather Data to Display the Live Weather9:52
The data provided by the openweathermap.org server will be in JSON format. A solution will be needed to decode the JSON data into values that can be used by the widgets.
Create a model and controller for decoding JSON data
Provide the model data to the widgets
Run the app and verify that JSON data is displayed
Add Location Support to Display Local Weather6:11
Currently, the application displays a hardcoded location for the weather. The actual location must be provided to get the local weather conditions.
Install the Flutter location package
Pass live location data to the openweathermap.org API
Run the app to verify that the user’s local weather is displayed
Create Unit Tests for Testing API Methods4:27
Unit test code must be executed straightaway without unpredictable delays. Unfortunately, HTTP calls can take an indeterminate amount of time, which will be problematic for unit tests. Find a solution to run unit tests of Map API, which bypasses http calls.
Replace the HTTP client with a mock client
Pass in dummy JSON data to the mock client
Run unit tests on the Map API and verify that all pass
Integrate Google Cloud Support to Access Google Maps5:48
A solution to providing a map on the application display.
Set up a Google Cloud project with maps, routes, and places support
Install and set up the google_maps_flutter project
Run the app to verify that a map is being displayed
Integrate Location with Maps to View Local Location7:27
Currently, the location of the user is not being displayed on the app screen.
We need to find a solution to get the user’s current location and then provide it to the map.
Install the location package
Create an API to return location to widget
Run the app to verify that a new map location is displayed
Use Google Maps Web Service for a List of Nearby Cafes7:47
Provide a solution for finding coffee shops near a specified location.
Install the Google Map web service package
Create an API to return a list of local coffee shops
Run the app in debug mode to view a list of shops
Use Google Map Markers to Display the Cafes4:29
We need to provide a solution for displaying a list of coffee shops on a Google map, and also provide interactivity by highlighting which marker has been selected.
Create a method to add the shops list to map controller markers
Add a method to highlight the current marker
Run the app to view markers and the highlighted marker
Create Card to Display Cafe Information and Route9:06
We need to provide a solution for displaying coffee shop details when a marker is selected. The coffee shop details should also include a directions button for providing the route to the coffee shop.
Use a Flutter card to display information and route button
Use the URL Launcher package to start Google routes
Select a marker to view information and directions button for route
Create Home Page to Visualize Look and Feel7:59
It is important before implementing the main code that a visual representation of the code is provided. It will include all the visual widgets.
A mockup will be created with widget values either hardcoded or loaded from the assets folder.
Create all the widgets required for the UI
Populate the widgets with either hardcoded values or local images
Run the app to confirm acceptance of the UI
Create Carousel for Switching between Drinks9:08
Companies will want to show case important sections of their application.
An image carousel is an effective way of doing this.
Create a carousel which displays drinks and supports scrolling.
Use TabBar to create the carousel
Add image buttons for switching images
Restart app and check that the images change
Integrate Scoped Model Design Pattern for Sharing State6:19
In flutter child widgets will often want to pass their state across to another widget.
There are a number of ways to achieve this such as global properties and callbacks, which are not good solutions.
Implement the Scoped model pattern to pass the state information form the Image carousel to the drinks list.
Install and implement the Scoped model pattern
Add ScopedModelDescendents to the carousel and drinks list widget
Select carousel products and confirm drinks list changes
Add AlertDialog for Placing Drinks Order7:14
Upon selecting a drink the information will need to be displayed to the user about the drinks details and price.
Also once the user completes and sends the order, confirmation will need to be provided.
Implement the dialog to display the drink info
Use a Snackbar to provide order confirmation
Select drink, place order, and check for confirmation
Implement Integration Tests for Testing Entire App6:31
In addition to unit and widget tests which are used for testing a particular component or widget, a means is required for testing the entire app.
Add integration tests to test the functionality of the app during execution.
Create an instrumented test version of the application
Write the instrumentation tests
Run the instrumented test app and check all tests pass
Create Mockup UI for App Look and Feel8:38
It is important before implementing the main code that a visual representation of the code is provided which will include all the visual widgets.
A mockup will be created with a TabBar with two views. One for creating the QR code and one for the camera capture.
Create all the widgets required for the UI
Populate the widgets with either hard coded values or local images
Run the app to confirm acceptance of the UI
Create QR Codes for Coffee Shop Products8:06
Need to find a solution to convert properties of a class instance to a string which will then be displayed as a QR code.
Use the JSON annotation package to convert to string
Use the qr_flutter package to display QR code
Run app to display the QR code
Use Firebase ML Kit to Detect QR Code11:08
Need to find a solution for detecting a QR code and retrieving it values.
Create Firebase project and add support for Android and iOS
Install firebase_ml_vision package to detect QR code
Run in debug mode with breakpoint check QR code contents
Set Up Camera for QR Code Scanning9:37
Need a solution of scanning a QR code and then provide the decoded results back to the user.
Implement the camera plugin to capture the image
Pass the captured image to the ML vision kit API
Check the results displayed in the card
Use BLoC Pattern to Manage State Changes11:04
Need to find a robust solution of sharing the form data and captured image to the display widgets.
The current solution is using function callbacks, which involves passing functions up and down the widget trees; it is not a graceful implementation.
Implement files for the BLoC, events, and states
Implement the BLoC provider and builder in the parent widget
Run and check the app operates as previously
Create Mockup UI for App Look and Feel9:08
It is important before implementing the main code that a visual representation of the code is provided which will include all the visual widgets.
Two screens will be created. One to represent the camera preview and gallery. The other to display the captured image in full screen mode.
Implement the camera preview gallery screen
Image the image full screen mode
Run the app to display both screens
Use the Camera Plugin for Capturing Images7:52
A solution to capturing an image is required. A number of solutions could be used such as third party applications or implementing it at the Android and iOS platform levels.
But we will use the Flutter camera plugin.
Create method for saving images to application directory
Implement the Flutter camera plugin
Take some photos and verify that they have been saved
Implement Gallery to Display Image Thumbnails7:17
A solution is required for displaying the captured images to the user. To allow the user to select an image.
Additionally a solution is also needed for sharing the image to social media.
Create method for loading directory files
Use Git version of share plugin to share images
Select gallery thumbnail and use share icon for social share
Use Flutter Redux for Managing State Change9:08
Currently to share state between different child widgets callback methods are provided to the widget constructors. This method integrates the business logic into the presentation layer and results in additional code and maintenance overhead.
Find a solution to extract the business logic from the presentation layer.
Implement methods for setting state changes
Set up store, store provider, and store connector
Run app and check functionality is unchanged
Build and Release for Publishing Android Apps5:48
Once the code is completed a process needs to be defined in preparation for publishing to the Google Play Store.
Define the steps required prior to the release of the app to the Google Play Store
Create launcher icon
Sign the app and enable ProGuard
Install release APK on device and check app
Create Mockup UI for App Look and Feel10:22
It is important before implementing the main code that a visual representation of the code is provided which will include all the visual widgets.
The UI requires two main parts. One for displaying a list of messages and the other a text box for inserting messages.
The mockup UI will be required to display both those parts as well as adding new messages using the text box.
Create a ListView to display the messages
Implement a text controller for adding messages
Enter messages and verify they are displayed on the screen
Implement Google Sign In for Login10:56
The app needs to be secured with a login button.
It is preferable that the login system used is simple and known to the users.
For this app the Google sign in method will be used for login.
Enable Google sign in authentication in the Firebase console
Create a Google sign in widget
Select the sign in button to verify app authentication
Use Cloud Firestore to Hold Chat Messages10:44
All the application data is required to be stored remotely on the cloud.
The solution will be to use the Firebase Cloud Firestore.
Create a Cloud Firestore database in the Firebase console
Implement the Flutter Cloud Firestore plugin
Verify that the Firestore database documents can be viewed on the app
Add Firebase Storage to House Images7:52
The app is also required to provide remote storage for large image files.
Remote databases are not a practical solution so an alternative is required for hosting the images.
The Firebase storage will be used for hosting the image files.
Enable Firebase storage in the Firebase console
Implement the Flutter Firebase storage plugin
Verify that images can be uploaded and viewed from the app
Build and Release for Publishing iOS Apps7:24
Once the code is completed, a process needs to be defined in preparation for sending the release build to the Apple App Store
Define the steps required prior to uploading the release build to the Apple App Store.
Register bundle ID and create an application record
Create a custom launcher icon
Create a release build, archive, and then verify it
Test your knowledge

Requirements

No prior knowledge of Dart or Flutter is required.

Description

Dart has become a general-purpose language that is optimized for web and mobile development. Flutter - Google’s new mobile UI framework is developed to build beautiful user interfaces for both Android and iOS natively. Flutter is a SDK providing the tooling to compile Dart code into native code and it also gives you a rich set of pre-built and pre-styled UI elements also called widgets which you can use to compose your own user interfaces. With so much of features provided, it takes less time to develop mobile applications with Dart and Flutter.

This practical course is designed specifically for people just starting out with Dart & Flutter for mobile development and who want to build fully functioning mobile applications that serves a real purpose. You will begin with learning the basics of the Dart programming language and setting up the development environment for Dart and Flutter to build your applications. You will then learn to build app layouts, perform widget animation, pull and push data to servers, and compile codes to build amazing native mobile apps for iOS and Android. You will also learn to deploy your applications on Google Play Store and Apple App Store.

Contents and Overview

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Dart 2 in 7 Days, starts by setting up a development environment for Dart and Flutter from which to build your first app. You will then learn how to create variables and perform operations and will learn about conditional statements. You will also focus on object-oriented programming aspects, wherein you will learn about creating classes, functions, and data structures. Next, you will learn to build a To-Do list application by calling APIs to get JSON data. Finally, you will learn how to deploy your app on the Google Play Store and Apple App Store.

In the second course, Learning Dart - Build Your First App with Flutter, you will be able to build app layouts, create widget animations, pull and push data to servers, and compile and release code to both stores.

The third course, Real-World Projects with Flutter, model’s real-world problems and then teaches the steps and techniques for creating solutions in the form of complete Android and iOS applications. Here with Flutter, you’ll develop multiple apps for both stores with just one code base and deploy it to both Google Play Store and Apple App Store.

By the end of this course, you will be able to build your own stunning iOS and Android mobile applications with Dart and Flutter.

Meet Your Expert(s):

We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:

Victor Wooding is a teacher and developer from Barbados. He has been teaching for ten years and coding for about eight. His first programming job came in 2011 when he was given the task of developing a website for the school that he was attached to. Since then he has developed skills in Photoshop, Illustrator, and Sketch and has learned Java, JavaScript, Swift, Dart, and Kotlin. Currently, he manages his own website—kodechamp—and uploads video tutorials to YouTube under his name.
Tim Anthony Manuel works as a Technical Manager for Fennec3D, as an App Development Consultant for an upcoming software company in the Philippines, and as the lead (and only) developer in his own company, Third Degree Apps. As a freelancer, he has developed Android apps using Java, and many progressive web apps using Vue.js and Node.js backends. In his previous jobs, he worked extensively with industrial machine automation and machine vision systems, developing software using Visual Basic .NET. He also loves making 3D models using Solidworks, as well as 3D-printing them. Currently, Flutter and Dart, and all Firebase APIs, are his focus.
Nigel Henshaw is a mobile software developer who as well as providing software development services loves to share his knowledge through his YouTube channel and website. He originates from New Zealand, where he started out as an electrician. After one too many electric shocks, he wisely decided on a career change. After completing a two-year diploma in Computer Science and Technology at the Auckland University of Technology, Nigel relocated to London for new opportunities.He landed a job as a test engineer with a pioneering tech company called Psion, who were one of the first to develop handheld devices and mobile operating systems. Before too long, Nigel was transferred to the base porting team and found himself in the middle of porting operating systems and writing device drivers with Symbian OS using C++.Nigel has experienced many wonderful opportunities through the software industry. He has worked in the UK, Scotland, and Japan, and held roles as a software engineer, consultant, project manager, and general manager of a remote development site.

Who this course is for:

This course is for beginners who want to build cross platform mobile applications using Dart and Flutter. Developers who create mobile applications using other technologies and now wish to learn Dart and Flutter for building native-mobile apps will also find this course useful.

Dart & Flutter: The Complete Mobile Apps Development Course

What you'll learn

Explore related topics

Course content

Dart 2 in 7 Days51 lectures • 3hr 52min

Learning Dart - Build Your First App with Flutter22 lectures • 8hr 49min

Real-World Projects with Flutter31 lectures • 4hr 4min

Requirements

Description

Who this course is for: