WEEK 6

E-COMMERCE APP

GovindDev | Flutter Dev | Kan Myint Htun

GovindDev | Flutter Dev | Kan Myint Htun
 E-Commerce app
Overview

This project introduces students to

Managing complex app state with the Provider package
Dynamically updating UI components based on changes in state
Organizing code for scalability (models, providers, UI structure).


PROVIDER Feature
Product List Screen
Display a list of products with "Add to Cart" buttons
Cart Screen
Show added products, quantity, and total price
Allow users to increment/decrement product quantity or
remove products
Global State Management
Manage the cart state using a CartProvider.

GovindDev | Flutter Dev | Kan Myint Htun

 E-Commerce app
lib/

└── models/
│
│ └── product_model.dart
│
│ └── cart_item_model.dart

└── providers/
│
│ └── cart_provider.dart

PROVIDER └── screens/

│
│ └── product_list_screen.dart
│
│ └── cart_screen.dart

└── widgets/
│
│ └── product_design.dart
│
│ └── cart_item_card.dart

└── main.dart

GovindDev | Flutter Dev | Kan Myint Htun

 MODELS
product_model.dart
cart_item_model.dart

class ProductModel {
class CartItemModel {

final String id;

final String id;

final String name;

final String name;

final double price;

final double price;

final String image;

final String image;

PROVIDER ProductModel({

int quantity;

required this.id,
CartItemModel({

required this.name,
required this.image,

required this.price,
required this.id,

required this.image,
required this.name,

});
required this.price,

}
this.quantity = 1,

});

GovindDev | Flutter Dev | Kan Myint Htun

 PROVIDERS
//set private variable

final List<CartItemModel> _cartItems = []; // Cart stored as a list

//get method

List<CartItemModel> get cartItems => _cartItems;


PROVIDER //total amount


double get totalPrice {

double total = 0;

for (var item in _cartItems) {

total = total + (item.price * item.quantity);

return total;

GovindDev | Flutter Dev | Kan Myint Htun

 PROVIDERS
// Increment item quantity

incrementQuantity(CartItemModel cartItemModel) {

cartItemModel.quantity++;

notifyListeners();

PROVIDER // Decrement item quantity or remove if quantity becomes zero

decrementQuantity(CartItemModel cartItemModel) {

if (cartItemModel.quantity > 1) {

cartItemModel.quantity--;

} else {

_cartItems.remove(cartItemModel); // Remove item if quantity is zero

notifyListeners();

GovindDev | Flutter Dev | Kan Myint Htun

 PROVIDERS
// Add item to cart or update quantity if it already exists


addToCart(CartItemModel cartItemModel) {

final index = _cartItems.indexWhere(

(item) => item.id == cartItemModel.id); // Find item in cart

//if there the data doesn’t match the index will be -1”
စ်နေ

PROVIDER if (index == -1) {

_cartItems.add(cartItemModel); // Add new item to cart

} else {

_cartItems[index].quantity++; // Increment quantity if item exists

notifyListeners();

GovindDev | Flutter Dev | Kan Myint Htun

 PROVIDERS
// Clear the entire cart

clearCart() {

_cartItems.clear();

notifyListeners();

PROVIDER // Remove item from cart

removeFromCart(CartItemModel cartItemModel) {

_cartItems.remove(cartItemModel);

notifyListeners();

GovindDev | Flutter Dev | Kan Myint Htun

E-COMMERCE

UI

DESIGN

GovindDev | Flutter Dev | Kan Myint Htun

GovindDev | Flutter Dev | Kan Myint Htun
GovindDev | Flutter Dev | Kan Myint Htun
GovindDev | Flutter Dev | Kan Myint Htun
GovindDev | Flutter Dev | Kan Myint Htun
GovindDev | Flutter Dev | Kan Myint Htun
GovindDev | Flutter Dev | Kan Myint Htun
 Asynchronous operations
Future



A Future represents a promise that a result will be available at some

point in future. Its used to handle operations that take some time to

FUTURE
 complete, for example fetching data, performing calculations or

interacting with the user. When a function returns a Future, it means

ASYNC
that the result isn’t immediately available but will be in future.

&

Example

AWAIT The showDatePicker and showTimePicker functions are asynchronous

and return a Future<DateTime?> and Future<TimeOfDay?>,

respectively. This means they are designed to perform operations that

take time (waiting for the user’s input), and the result will be available

in the future.

GovindDev | Flutter Dev | Kan Myint Htun

 Asynchronous operations
Async

The async keyword is used to mark a function as asynchronous. This

allows the function to perform operations that take time (such as

FUTURE
 waiting for user input or making network requests) without blocking

the execution of the rest of your program.

ASYNC

&
 Example

We mark the method that calls the DateTimePicker or TimePicker as

AWAIT async, so we can use the await keyword inside it. This lets us pause

execution at certain points (like waiting for the user to pick a date or

time) and then continue once the result is available.

GovindDev | Flutter Dev | Kan Myint Htun

 Asynchronous operations
Await

The await keyword is used inside an async function to pause

execution until the result of a Future is available. It’s like telling the

function, "Pause here until the result is ready."

FUTURE

Example

ASYNC
When you call showDatePicker or showTimePicker, you use await to

&
 pause execution of the code until the user has selected a date or time.

Once the user finishes, the await expression will return the selected
AWAIT value, and execution will continue.

GovindDev | Flutter Dev | Kan Myint Htun

 Date_Time_Picker (Provider)
import 'package:flutter/material.dart';

class DateTimeProvider extends ChangeNotifier{

FUTURE
 TimeOfDay _selectedTime = TimeOfDay.now();

DateTime _selectedDate = DateTime.now();

ASYNC

&
 TimeOfDay get selectedTime => _selectedTime;

DateTime get selectedDate => _selectedDate;

AWAIT
void setTime(TimeOfDay time){

_selectedTime = time;

notifyListeners();}

void setDate(DateTime date){

_selectedDate = date;

notifyListeners();

}}
GovindDev | Flutter Dev | Kan Myint Htun
 Date_Time_Picker (Functions)
Future<void> _pickTime(BuildContext context) async {

final selectedTime = await showTimePicker(

context: context,

initialTime: TimeOfDay.now(),

FUTURE
 );

context.read<DateTimeProvider>().setTime(selectedTime!);

ASYNC
}



&

Future<void> _pickDate(BuildContext context) async {

AWAIT final selectedDate = await showDatePicker(

context: context,

initialDate: DateTime.now(),

firstDate: DateTime(2000),

lastDate: DateTime(2030),

);

context.read<DateTimeProvider>().setDate(selectedDate!);

GovindDev | Flutter Dev | Kan Myint Htun

 Date_Time_Picker (Functions)
Future<void> _pickTime(BuildContext context) async {

final selectedTime = await showTimePicker(

context: context,

initialTime: TimeOfDay.now(),

FUTURE
 );

context.read<DateTimeProvider>().setTime(selectedTime!);

ASYNC
}



&

Future<void> _pickDate(BuildContext context) async {

AWAIT final selectedDate = await showDatePicker(

context: context,

initialDate: DateTime.now(),

firstDate: DateTime(2000),

lastDate: DateTime(2030),

);

context.read<DateTimeProvider>().setDate(selectedDate!);

GovindDev | Flutter Dev | Kan Myint Htun

 ANIMATION
Hero(

tag: ‘tag_line’,

child: Widget(),

),




FUTURE

ASYNC
FadeIn



&

FadeIn(

AWAIT child: Widget(),

),



....

GovindDev | Flutter Dev | Kan Myint Htun