Flutter Products Full App Tutorial
Video Tutorial
Video Tutorial: YouTube Video
Blog: Article
Source Code: GitHub
Part 1 – Introduction
What we’ll cover:
- Take a look at the dummyjson.com free JSON service
- Ability to test Authentication
- Retrieve records with Authentication Token
Create Project called products
- Separate Business Logic
- UI/UX
Create Models needed for API calls
- Auth Model
- Auth Error Model
- Product Model
- Products List Model
Create Services to make API Calls
- API Values Service
- Authentication Service
- Connection Service – Check Internet Connection
- Product List Service
- Product Service
Create Reusable Widgets
- Products ListView
- Products ListView Item 1
- Products ListView Item 2
- Products ListView Card
- Star Rating
- Status Message
Create Helpers
- App Helpers
Performance – Rebuild only what is needed by using…
- StreamBuilder
- Streams
- ValueListenableBuilder
- ValueNotifier
- Parse JSON server response via json.decode
- Parse JSON Via compute – Spawn a Isolate
- Parse JSON Via Isolate.spawn – Manually spawn Isolate plus message
Retrieve Records via pagination
- ScrollController
- ScrollController Listener
- ScrollController check scrolling offset and maxScroll Extent to retrieve the next 10 records
Themes
- Light Mode
- Dark Mode
- Switch Between Modes
Version Control
- GitHub
Part 2
What we’ll cover:
- Create Products Flutter Project
- Platforms, Android, iOS, Web
- Enable GitHub for project
- Modify main.dart to handle Light & Dark Mode by creating Themes via ThemeData()
- Add Home Page base layout
- Overview of Free DummyJson.com API JSON Service
- Create partial project folder structure
- Overview of App.QuickType.io to convert JSON to Dart Class for Data Models
- Create Auth Model, Auth Error Model, Product Model, Product List Classes
- Add http, connectivity_plus, intl packages to pubspec.yaml file by running the flutter pub add <packagename> command. This automatically adds the packages to the pubspec.yaml file with the latest version.
- http package – To consume HTTP resources
- connectivity_plus package – Discover network (internet) connectivity
- intl package – Number formatting, currency, internationalization and localization
Part 3
What we’ll cover:
- Create Connection Service
- Create Product List Service
- StreamController
- Sink
- Stream
- Implement StreamBuilder for Home page for Product List Service
- Create Status Message Widget
- Push changes to GitHub
Part 4
What we’ll cover:
- Create API Values Service
- Create Auth Service
- Use http.post to call API Service
- Process JSON response
- StreamBuilder watch for Product List Service Snapshot Connection
- Push changes to GitHub
Part 5
What we’ll cover:
- Product Service
- Use http.get to call API Service
- Use Auth Token to Retrieve Products
- Use Paging to Retrieve the next 10 Products
- Parse JSON Server Response via json.decode
- Parse JSON Via compute – Spawn a Isolate
- Parse JSON Via Isolate.spawn – Manually Spawn Isolate plus Message
- Create Products Service Background Message
- Create Products Service Background Parser
- Push changes to GitHub
Part 6
What we’ll cover:
- AppBar – Add Dynamic Content
- Show Products Count
- Get Next 10 Records IconButton
- DropdownButton to Choose Different Templates
- DropdownMenuItem
- StreamBuilder for Performance
- ValueListenableBuilder for DropdownButton Performance
- ValueNotifier
- Create App Helpers
Part 7
What we’ll cover:
- Create Products ListView Widget
- CustomScrollView
- SliverToBoxAdapter
- SliverList
- SliverChildBuilderDelegate
- Create Products ListView Item Card Template
- Card Widget
- RoundedRectangleBorder
- AspectRatio
- Image.network
- FadeInImage
- ListView.builder
- ListTile
- Push changes to GitHub
Part 8
What we’ll cover:
- Create Star Rating Widget
- Create getProducts method
- Create Products List Model
- Create Products ListView Item 1 Template
- AspectRatio
- Image.network
- ListView.builder
- ListTile
- NumberFormat.simpleCurrency() for Price
- NumberFormat.percentPattern() for Discount Percentage
- CustomScrollView
- SliverToBoxAdapter
- SliverList
- SliverChildBuilderDelegate
- Push changes to GitHub
Part 9
What we’ll cover:
- Create Assets Images Folders
- Add Placeholder Image
- Enable assets in pubspec.yaml
- Create Products ListView Item 2 Template
- NumberFormat.simpleCurrency() for Price
- NumberFormat.percentPattern() for Discount Percentage
- ListView.builder
- ListTile
- Image.network
- BoxFit
loadingBuilder – Track ImageChunkEvent - CircularProgressIndicator
TEST
- Parse JSON Server Response via json.decode
- Parse JSON Via compute – Spawn a Isolate
- Parse JSON Via Isolate.spawn – Manually Spawn Isolate plus Message
- General Overview
- Push changes to GitHub
Part 10
What we’ll cover:
Supplemental
Alternate ways to build the ListView to view different performance issues between CustomScrollView, SilverChildBuilderDelegate -vs- ListView.builder, ListView.separated when you combine multiple widgets. When you mix different scrolling widgets, like vertical or horizontal, the ListView.builder instead of building the visible records, can rebuild all of the fetched records. In theory, things should work this way, but when you combine them you might have side effects, especially performance.
- ListView.builder
- ListView.separated
- Test for Performance
- Use debugPrint to View number of Builds
- Push changes to GitHub