apiKey

Find its value from the `firebase_options.dart` file and paste here.

appId

messagingSenderId

projectId

authDomain

storageBucket

iosClientId

iosBundleId

measurementId

Gain insights into using Flutter and Dart to build visually stunning, high-performance Android and iOS apps. Delve into UI/UX design, networking, state management, Firebase, testing, and deployment.

hello.tar.gz

Flutter_Web

Flutter_Web-copy

Flutter_Web-Firebase

Flutter_Web_build_runner

Flutter_Web_Testing

Flutter_API_Server

Flutter_API_Server-copy

Get ready to unlock the potential of Flutter and Dart as you learn to craft visually stunning and high-performance applications for both Android and iOS.

This course will teach you to plan, build, and deploy interactive Flutter applications. You’ll start by developing user interfaces and handling gestures. Next, you’ll explore navigation and routing to smoothly move around your app. You’ll then dive into networking and HTTP to connect your app to the internet and implement data persistence. You’ll use Firebase services for authentication and storing data. State management comes next, helping you manage the different pieces of your app efficiently. Then, you’ll focus on testing, analytics, and crash reporting. You’ll then explore accessibility and internationalization, making your app usable by everyone and suitable for different languages. Lastly, you’ll learn app deployment.

The course wraps up with a project: you will create an online furniture store, combining all the skills you’ve learned.

The Complete Guide to Flutter

# Solutions

Compare your solutions with the ones provided below.


name: ecommerce_app
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  # SOLUTION-1: Import the get dependency
  get: ^4.6.5

dev_dependencies:
  flutter_lints: ^1.0.4

flutter:
  uses-material-design: true

pubspec.yaml

// SOLUTION-2: Create the CartController class
import 'package:ecommerce_app/models/cart_item.dart';
import 'package:get/get.dart';

class CartController extends GetxController {
  var items = <CartItem>[].obs;

  int get itemCount => items.fold(0, (sum, item) => sum + item.quantity);
  double get totalPrice => items.fold(0, (sum, item) => sum + (item.price * item.quantity));

  addItem(CartItem item) {
    final itemIndex = items.indexWhere((e) => item.id == e.id);
    if (itemIndex >= 0) {
      items.assignAll([...items]..replaceRange(itemIndex, itemIndex + 1, [
          CartItem(
            price: items[itemIndex].price,
            title: items[itemIndex].title,
            id: items[itemIndex].id,
            quantity: items[itemIndex].quantity + 1,
          )
        ]));
    } else {
      items.assignAll([...items, item]);
    }
  }

  void removeItem(String id) {
    final itemIndex = items.indexWhere((e) => id == e.id);
    if (itemIndex >= 0) {
      items.assignAll([...items]..removeAt(itemIndex));
    }
  }
}

lib/state/cart_controller.dart

import 'package:flutter/material.dart';

// SOLUTION-3a: Import get and cart_controller dependencies
import 'package:get/get.dart';

import '../constants.dart';
import '../models/product.dart';
import '../state/cart_controller.dart';
import 'widgets/product_item_widget.dart';

class ProductsOverviewScreen extends StatelessWidget {
  ProductsOverviewScreen({Key? key}) : super(key: key);

  // SOLUTION-3b: Provide an instance of CartController to the get dependency injector
  final CartController cartController = Get.put(CartController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MyGearShop'),
        actions: [
          Stack(
            children: [
              IconButton(
                onPressed: () {
                  Navigator.of(context).pushNamed(cartScreenRoute);
                },
                icon: const Icon(Icons.shopping_cart),
              ),
              Positioned(
                top: 0,
                right: 0,
                child: Obx(
                  () => Text("${cartController.itemCount}")
                ),
              ),
            ],
          ),
          const SizedBox(width: 20),
        ],
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        itemCount: loadedProducts.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          childAspectRatio: 2 / 2,
        ),
        itemBuilder: (ctx, index) => GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, productDetailRoute,
                arguments: loadedProducts[index]);
          },
          child: ProductItem(
            title: loadedProducts[index].title,
            id: loadedProducts[index].id,
            imageUrl: loadedProducts[index].imageUrl,
            price: loadedProducts[index].price,
          ),
        ),
      ),
    );
  }
}


lib/presentation/product_overview_screen.dart

import 'package:ecommerce_app/presentation/widgets/cart_item_widget.dart';
import 'package:flutter/material.dart';
// SOLUTION-4a: Import get and cart_controller dependencies
import 'package:get/get.dart';
import '../state/cart_controller.dart';

class CartScreen extends StatelessWidget {
  CartScreen({Key? key}) : super(key: key);

  // SOLUTION-4b: Get the CartController instance from the get dependency injector
  final CartController cartController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Your Cart')),
      body: Column(
        children: <Widget>[
          Card(
            margin: const EdgeInsets.all(15),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  const Text('Total', style: TextStyle(fontSize: 20)),
                  const Spacer(),
                  Chip(
                    // SOLUTION-4c: Display and observe cart total
                    label: Obx(() {
                      return Text(
                        '\$${cartController.totalPrice}',
                        style: const TextStyle(color: Colors.white),
                      );
                    }),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 10),
            // SOLUTION-4d: Display and observe cart items
          Expanded(
            child: Obx(() {
              return ListView.builder(
                itemBuilder: (ctx, index) => CartItemWidget(
                  quantity: cartController.items[index].quantity,
                  price: cartController.items[index].price,
                  id: cartController.items[index].id,
                  title: cartController.items[index].title,
                ),
                itemCount: cartController.items.length,
              );
            }),
          ),
        ],
      ),
    );
  }
}


lib/presentation/cart_screen.dart

import 'package:ecommerce_app/models/cart_item.dart';
import 'package:flutter/material.dart';
// SOLUTION-6a: Import get and cart_controller dependencies
import 'package:get/get.dart';
import '../../state/cart_controller.dart';

class ProductItem extends StatelessWidget {
  final String id;
  final String imageUrl;
  final String title;
  final double price;

  ProductItem({
    Key? key,
    required this.imageUrl,
    required this.title,
    required this.id,
    required this.price,
  }) : super(key: key);

  // SOLUTION-6b: Get the CartController instance from the get dependency injector
  final CartController cartController = Get.find();

  @override
  Widget build(BuildContext context) {
    return GridTile(
      footer: GridTileBar(
        backgroundColor: Colors.black54,
        title: Text(title),
        trailing: IconButton(
          icon: const Icon(Icons.shopping_cart),
          onPressed: () {
            // SOLUTION-6f: Add the item to the user's cart
            cartController.addItem(CartItem(price: price, title: title, id: id, quantity: 1));

            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('Added one item to cart'),
                duration: Duration(seconds: 2),
              ),
            );
          },
        ),
      ),
      child: Image.network(
        imageUrl,
        fit: BoxFit.cover,
        repeat: ImageRepeat.noRepeat,
      ),
    );
  }
}


lib/presentation/widgets/product_item_widget.dart

import 'package:flutter/material.dart';
// SOLUTION-5a: Import get and cart_controller dependencies
import 'package:get/get.dart';
import '../../state/cart_controller.dart';

class CartItemWidget extends StatelessWidget {
  final String id;
  final double price;
  final int quantity;
  final String title;

  CartItemWidget({
    Key? key,
    required this.quantity,
    required this.price,
    required this.id,
    required this.title,
  }) : super(key: key);

  // SOLUTION-5b: Get the CartController instance from the get dependency injector
  final CartController cartController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: ValueKey(id),
      background: Container(
        margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 4),
        alignment: Alignment.centerRight,
        padding: const EdgeInsets.only(right: 20),
        color: Theme.of(context).errorColor,
        child: const Icon(Icons.delete, color: Colors.white, size: 40),
      ),
      direction: DismissDirection.endToStart,
      onDismissed: (direction) {
        // SOLUTION-5c: Remove an item from the cart when swiped away
        cartController.removeItem(id);
      },
      confirmDismiss: (direction) {
        return showDialog(
          context: context,
          builder: (ctx) => AlertDialog(
            title: const Text('Are you sure?'),
            content: const Text('Do you want to remove Item from Cart?'),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.of(ctx).pop(false),
                child: const Text('NO'),
              ),
              TextButton(
                onPressed: () => Navigator.of(ctx).pop(true),
                child: const Text('YES'),
              ),
            ],
          ),
        );
      },
      child: Card(
        margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 4),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListTile(
            leading: CircleAvatar(
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: FittedBox(child: Text('\$ $price')),
              ),
            ),
            title: Text(title),
            subtitle: Text('Total \$ ${price * quantity}'),
            trailing: Text('x $quantity'),
          ),
        ),
      ),
    );
  }
}

lib/presentation/widgets/cart_item_widget.dart

import 'package:flutter/material.dart';

import '../models/cart_item.dart';
import '../models/product.dart';
// SOLUTION-6d: Import get and cart_controller dependencies
import 'package:get/get.dart';
import '../state/cart_controller.dart';

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({Key? key, required this.product})
      : super(key: key);

  // SOLUTION-6e: Get the CartController instance from the get dependency injector
  final CartController cartController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(product.title)),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 300,
              width: double.infinity,
              child: Image.network(product.imageUrl, fit: BoxFit.cover),
            ),
            const SizedBox(height: 10),
            Text(
              '\$ ${product.price}',
              style: const TextStyle(color: Colors.grey, fontSize: 20),
            ),
            const SizedBox(height: 10),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              width: double.infinity,
              child: Text(
                product.description,
                textAlign: TextAlign.center,
                softWrap: true,
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton.icon(
              onPressed: () {
                // SOLUTION-6c: Add the item to the user's cart
                cartController.addItem(CartItem(price: product.price, title: product.title, id: product.id, quantity: 1));
                ScaffoldMessenger.of(context).hideCurrentSnackBar();
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('Added one item to cart'),
                    duration: Duration(seconds: 2),
                  ),
                );
              },
              icon: const Icon(Icons.shopping_cart),
              label: const Text('Add to Cart'),
            )
          ],
        ),
      ),
    );
  }
}


lib/presentation/product_detail_screen.dart

Explore solutions to the dependency injection challenges.

Introduction

User Interface

Navigation and Routing

Networking and HTTP

Persisting Data

State Management

Firebase for Flutter

Essential Tools to Enhance Your Flutter Workflow

Quality Assurance

Accessibility and Internalization

Deployment

Project: Build an Online Furniture Store

Next Steps

Solution: Dependency Injection

Solutions

Challenge 1: Add the Get package