Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
Flutter App Development Course Module
1. Introduction
• Introduction
• What is Flutter
• Flutter Architecture
• How Flutter and Dart code Compiled to Native Apps
• Flutter Versions
• macOS Setup
• macOS Development Environment
• Windows Setup
• Windows Development Environment
• Flutter & Material Design
• Flutter Alternatives
2. Flutter Basics
• Introduction
• Creating a New Project
• An Overview of the Generated Files & Folders
• Dart Basics
• Dart Fundamentals
• Building an App from Scratch
• Running the App on an Emulator
• Class Constructors & Named Arguments
• First Summary & Additional Syntax
• Building a Widget Tree
• Visible (Input / Output) & Invisible (Layout / Control) Widgets
• Adding Layout Widgets
• Widget Basics
• Connecting Functions & Buttons
• Anonymous Functions
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Updating Widget Data (Or: Using StatelessWidget Incorrectly)
• Understanding Lists
• Updating Correctly with Stateful Widgets
• Stateful & Stateless Widgets
• Using Private Properties
• Creating a New, Custom Widget
• First Styling & Layout Steps
• Enums & Multiple Constructors
• Passing Callback Functions Around
• Introducing Maps
• Mapping Lists to Widgets
• final vs const
• Advanced Flutter & Dart Basics
• Introducing "if" Statements
• [DART DEEP DIVE] More on "if" Statements
• [DART DEEP DIVE] The "null" Value
• Outputting Widgets Conditionally
• Splitting the App into Widgets
• Calculating a Total Score
• Getters & "else-if"
• Resetting the Quiz
3. Running Apps on Different Devices and Debugging Apps
• Module Introduction
• Running the App on a Real Android Device
• Running the App on an iOS Emulator
• Running the App on a Real iOS Device
• Working with the Emulators / Using the Emulators
• Understanding Error Messages & Fixing Errors
• Using the Debugger
• Getting Started with the Dart DevTools
• Understanding the Repaint Rainbow
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Wrapping up the Dart DevTools
4. Widgets, Styling, Adding Logic - Building a Real App [PERSONAL
EXPENSES APP]
• Introduction
• An Overview of the Core Flutter Widgets
• Combining Widgets
• Understanding Column Alignment
• Columns & Rows
• Not a Widget: Adding a Transaction Model & Transaction Data
• Mapping Data into Widgets
• Building a Custom List Item
• Styling a Container
• Styling Text
• Styling Time!
• Containers vs Columns Vs Rows
• Using String Interpolation
• Installing External Packages & Formatting Dates
• DateFormat Patterns
• Adding Text Input Widgets (TextField)
• Fetching User Input
• Splitting the App into Widgets
• Connecting Widgets & Managing Data / State
• Adding User Transactions to the List
• Making the List Scrollable!
• Working with ListViews
• Lists, Scrolling & Text Input
• Further Input & Output Styling and Configuration
• Adding AppBar Buttons & Floating Action Buttons
• Showing a Modal Bottom Sheet
• Improving & Styling the Modal Bottom Sheet
• Configuring & Using Themes
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Custom Fonts & Working with Text Themes
• Theming
• Adding Images to the App
• Planning the Chart Widget
• Looping Through Lists
• More on "for" Loops
• Deriving Recent Transactions
• Creating Bars for our Chart
• Populating the Chart with Values
• Finishing the Chart Bars
• Flexible & Expanded: Deep Dive
• Adding a ListTile Widget
• Improving the Overall Chart
• Getting Started with Date Selection
• Showing a DatePicker
• Adding Transactions with a Date
• Deleting Transactions & Using IconButtons
5. Responsive & Adaptive User Interfaces and Apps
• Introduction
• What does "Responsive" and "Adaptive" Mean?
• Calculating Sizes Dynamically
• Working with the "textScaleFactor"
• Using the LayoutBuilder Widget
• Responsiveness
• Controlling the Device Orientation
• Rendering Alternative Landscape Content – 1
• Finishing Landscape Mode
• Showing Different Content Based on Device Orientation
• Respecting the Softkeyboard Insets
• Using the Device Size in Conditions
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Managing the MediaQuery Object
• Checking the Device Platform
• Using Cupertino (iOS) Widgets
• Using the SafeArea
• More Cupertino Styles
• Using Cupertino Buttons
• Creating Custom Adaptive Widgets
• Adaptive Widgets
6. Widget & Flutter Internals - Deep Dive
• Introduction
• The Problem at Hand
• Widget Tree & Element Tree - What, Why and How?
• How Flutter Rebuilds & Repaints the Screen
• How Flutter Executes build ()
• Using "const" Widgets & Constructors
• Widgets, Elements, build ()
• Writing Good Code
• Extracting Widgets
• Using Builder Methods
• Understanding the Widget Lifecycle
• Calling super.initState() etc.
• Understanding the App Lifecycle
• Understanding Context
• A Problem with Lists & Stateful Widgets
• Understanding the Problem Root
• Using Keys
• Keys, Lists, Stateful Widgets
7. Navigation & Multiple Screens [APP]
• Introduction
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Planning the App
• Starting with The App - Adding Base Data
• Creating a Grid & Working with Linear Gradients
• Registering a Screen as the Main Screen
• Styling & Theming
• Navigating to a New Page
• Passing Data via the Constructor
• Using Named Routes & Passing Data with Named Routes
• Screens & Navigation
• Diving Deeper into Named Routes
• Adding a Meal Model & Data
• Selecting Meals for a Chosen Category
• Displaying Recipe Items & Using Network Images
• Finishing the Meal List Item
• Navigating to the Meal Detail Page
• onGenerateRoute & onUnknownRoute
• Finishing the Meal Detail Page
• Adding a TabBar to the Appbar
• Adding a Bottom TabBar
• Adding a Custom Drawer
• Adding Links to the Drawer
• Tabs & Drawers!
• Replacing Pages (Instead of Pushing)
• Popping Pages & Passing Data Back
• Replacing, Popping & Data
• Adding Filter Switches
• Adding Filtering Logic
• Adding a "Mark as Favorite" Feature
8. State Management [APP]
• Module Introduction
• Planning the App
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Defining a Data Model
• Working on the "Products" Grid & Item Widgets
• Styling & Theming the App
• Adding Navigation to the App
• Why State Management? And what is "State" and "State Management"?
• Understanding the "Provider" Package & Approach
• Working with Providers & Listeners
• Inheritance ("extends") vs Mixins ("with")
• Providing non-Objects
• Listening in Different Places & Ways
• State, State Management & The Provider Package/ Approach
• Using Nested Models & Providers
• Exploring Alternative Provider Syntaxes
• Using "Consumer" instead of "Provider.of"
• Local State Vs App-wide State
• Adding Shopping Cart Data
• More on State Management & The Provider Package
• Working with Multiple Providers
• Connecting the Cart Provider
• Working on the Shopping Cart & Displaying a Total
• Displaying a List of Cart Items
• Making Cart Items Dismissible
• Adding Product Detail Data
• Providing an Orders Object
• Adding Orders
• Adding an Orders Screen
• Using a Side Drawer
• Making Orders Expandable & Stateful Widgets Vs Providers
9. Working with User Input & Forms [SHOP APP]
• Module Introduction
• Snackbars & Undoing "Add to Cart" Actions
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Showing Alert Dialogs
• Adding a "Manage Products" Page
• "Edit Product" Screen & A Problem
• Using Forms & Working with Form Inputs
• ListView or Column
• Managing Form Input Focus
• Multiline Inputs & Disposing Objects
• Adding an Image Preview
• Image Input & Image Preview
• Submitting Forms
• Validating User Input
• Adding Validation to All Inputs
• Saving New Products
• Time to Update Products!
• Allowing Users to Delete Products
• Wrap Up
• Useful Resources & Links
10. Sending Http Requests [APP]
• Module Introduction
• On-Device Vs Web Storage
• How to Connect Flutter to a Database?
• Preparing Our Backend
• How to Send Http Requests
• Sending POST Requests
• Working with Futures in Dart
• Futures & Async Code
• Http Requests & Futures
• Showing a Loading Indicator
• Handling Errors Gracefully
• Working with "async" & "await"
• Fetching Data, initState & "of(context)"
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• How to Transform Fetched Data
• Implementing Pull-to-Refresh
• Updating Data via PATCH Requests
• Utilizing Optimistic Updating
• Creating Custom Exceptions & More Error Handling
• A Challenge for You!
• Updating the "Favorite" Status Optimistically
• Storing Orders in the Web
• Fetching Orders & Fixing an Issue
• Using the "FutureBuilder" Widget & Improving the Code
11. Adding User Authentication [APP]
• Introduction
• How Authentication Works
• Prepare Backend
• Adding the Auth Screen
• Adding User Signup
• Allowing Users to Log In
• Handling Authentication Errors
• Managing the Auth Token Locally (in the App)
• Using the "ProxyProvider" and Attaching the Token to Outgoing Http
Requests
• Adding the Token to All Requests
• Connecting the "Favorite" Status to Users
• Attaching Products to Users & Filtering by Creator
• Attaching Orders to Users
• Adding a Logout Functionality
• Automatically Logging Users Out (After Some Time)
• Automatically Logging Users In
12. Adding Animations [APP]
• Introduction
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• Animations from Scratch (Completely Manually Controlled)
• Using the "AnimatedBuilder" Widget
• Working with the "AnimatedContainer"
• More Built-in Animation & Transition Widgets
• Fading Loaded Images in (And Showing a Placeholder)
• Adding a "Hero" Transition
• Working with Slivers
• Practice: Animating Order Boxes
• A Fix for the Latest Version of Flutter
• Implementing Custom Route Transitions
13. Using Native Device Features (Camera, Maps, Location, ...) [APP]
• Introduction
• Planning the App
• PlaceList & Place Provider Setup
• Adding the "Add Place" Screen & An Image Input
• Using Image Picker & The Device Camera
• Storing the Image on the Filesystem (on the Device)
• Managing Data & Images via the Provider Package
• Handling Errors
• Testing on Real Devices
• Preparing SQLite
• Storing & Fetching Data with SQLite
• Adding a Location Input & The "location" Package
• Fetching the User Coordinates
• Displaying a Static Map Snapshot
• Rendering a Dynamic Map (via Google Maps)
• Allowing Users to Pick a Location on the Map
• Storing the Location in SQLite
• Adding a "Place Detail" Screen & Opening the Map in "readonly" Mode
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
14.Firebase, Image Upload, Push Notifications - Building a Chat App
• Introduction
• What is Firebase?
• Creating a New App
• Getting Started with Firebase
• Important: Flutter Firebase Versions
• Getting Started with Flutter & the Firebase SDK
• Adding "GoogleServices-Info.plist" correctly to iOS
• Rendering Stream Data with StreamBuilder
• Adding Data
• A Basic Authentication Screen
• Adding an App Theme
• Creating an Authentication Form
• Connecting Auth Form & Auth Screen
• Adding the firebase_auth Package
• Implementing Authentication
• Storing Extra User Data
• Finishing Authentication & Logout
• Adding Firebase Security Rules
• Listening to Chat Messages
• Sending & Ordering Chat Messages
• Creating a Basic Chat Bubble Widget
• Improving the Chat Bubbles
• Testing on Multiple Devices
• Displaying User Names
• ImagePicker: Latest Version
• Adding an Image Picker
• Preparing File Upload & Validating Images
• Uploading Images
• Improving Image Upload
• Running on a Real iOS Device
• Displaying User Images
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
• How Push Notifications Work
• An Introduction to Firebase Cloud Messaging
• Android & Push Notifications
• iOS & Push Notifications
• Handling Push Notifications
• Getting Started with Firebase Cloud Functions
• Setting a Firestore Trigger
• Sending Automated Push Notifications
15. Running Native Swift, ObjectiveC, Java or Kotlin Code
• Module Introduction
• Using a Proper Project Setup
• Sending a Method Call from Flutter
• Running Android Code
• Running iOS Code
16. Publishing to the App Stores
• Module Introduction
• Preparing the Code
• Preparing the App Configuration
• Preparing Third-Party Services
• Adding Icons & Splash Screens
• Publishing Android Apps
• Publishing iOS Apps
17. Roundup
✓ Resume Building
✓ Interview Preparation
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
Address: WsCube Tech, Laxmi Tower, Bhaskar Circle, Jodhpur, Rajasthan, India
Contact Us at: +919269698122, +919024244886. Mail us at: info@wscubetech.com
✓ NEW TOPICS: Since each new version of Android/iOS has new
features, we keep extra time for adding custom topics in every
batch. You can request any Flutter Basics Topic.
We provide training for Web Development, C, C++, Java, Core Java, Digital Marketing, UX, UI,
AWS, Python, ML, Laravel, React JS, Angular JS and Node JS.
