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

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

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  # SOLUTION-1
  cloud_firestore: ^4.8.4

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.4

flutter:
  uses-material-design: true

pubspec.yaml

import 'package:firebase_core/firebase_core.dart'; // SOLUTION-2a
import 'package:flutter/material.dart';

import 'app.dart';
import 'firebase_options.dart'; // SOLUTION-2b

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // SOLUTION-2c
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

lib/main.dart

import 'package:cloud_firestore/cloud_firestore.dart'; // SOLUTION 3a
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    String newTaskTitle = '';

    return Container(
      color: const Color(0xff757575),
      child: Container(
        padding: const EdgeInsets.only(
          top: 10.0,
          left: 20.0,
          right: 20.0,
          bottom: 30.0,
        ),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const SizedBox(),
                const Text(
                  'New Task',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.clear),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
            Container(
              padding: const EdgeInsets.only(right: 20.0, left: 20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextField(
                    onChanged: (newTask) {
                      newTaskTitle = newTask;
                    },
                    textAlign: TextAlign.center,
                    autofocus: true,
                    decoration: const InputDecoration(
                        hintText: 'What are you planning?'),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),
            TextButton(
              onPressed: () async {
                if (newTaskTitle.isEmpty) {
                  Navigator.pop(context);
                  return;
                }
                // SOLUTION-3
                await FirebaseFirestore.instance
                    .collection('todos')
                    .add({'title': newTaskTitle, 'isDone': false});
                Navigator.pop(context);
              },
              style: TextButton.styleFrom(backgroundColor: Colors.blue),
              child: const Text(
                'Save',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

lib/presentation/new_task.dart

import 'package:cloud_firestore/cloud_firestore.dart'; // SOLUTION 4a
import 'package:flutter/material.dart';

import '../models/task.dart';
import 'new_task.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (context) => SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom,
                ),
                child: const AddTaskScreen(),
              ),
            ),
          );
        },
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.only(
              top: 60.0,
              left: 30.0,
              right: 30.0,
              bottom: 30.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const <Widget>[
                Text(
                  'Hello!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 50.0,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                Text(
                  'Get some work done today!',
                  style: TextStyle(color: Color(0xffD4E2FB), fontSize: 18.0),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(20.0),
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              child: StreamBuilder(
                // SOLUTION 4b
                stream: FirebaseFirestore.instance
                    .collection('todos')
                    .snapshots()
                    .map((event) => event.docs
                        .map((e) => Task(
                            title: e.data()['title'],
                            isDone: e.data()['isDone'],
                            id: e.id))
                        .toList()),
                builder: (context, AsyncSnapshot<List<Task>> snapshot) {
                  if (snapshot.hasError) {
                    return Center(
                        child: Text(
                            'Something went wrong: ${snapshot.error.toString()}'));
                  }
                  if (snapshot.hasData) {
                    return ListView.builder(
                      itemBuilder: (context, index) {
                        return Dismissible(
                          key: UniqueKey(),
                          background: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: const <Widget>[
                              Icon(Icons.delete_forever, color: Colors.grey),
                            ],
                          ),
                          onDismissed: (direction) async {
                            // SOLUTION 5
                            await FirebaseFirestore.instance
                                .collection('todos')
                                .doc(snapshot.data![index].id)
                                .delete();
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(
                                backgroundColor: Colors.redAccent,
                                content: Text("Task deleted"),
                              ),
                            );
                          },
                          child: CheckboxListTile(
                            value: snapshot.data![index].isDone,
                            onChanged: (val) async {
                              // SOLUTION-6
                              await FirebaseFirestore.instance
                                  .collection('todos')
                                  .doc(snapshot.data![index].id)
                                  .update({'isDone': val});
                            },
                            title: Text(
                              snapshot.data![index].title,
                              style: TextStyle(
                                decoration: snapshot.data![index].isDone
                                    ? TextDecoration.lineThrough
                                    : null,
                                color: snapshot.data![index].isDone
                                    ? Colors.grey
                                    : Colors.black,
                              ),
                            ),
                          ),
                        );
                      },
                      itemCount: snapshot.data!.length,
                    );
                  }
                  return const Center(child: CircularProgressIndicator());
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}


lib/presentation/tasks_screen.dart

First, on **line 1**, we import the `firebase_core` package, which we'll use to initialize Firebase in our application. Next, we import the `lib/firebase_options.dart` file, which contains our Firebase application configuration (**line 5**).

Finally, we initialize our Firebase application using the configuration defined in the `lib/firebase_options.dart` file.

Explore the solutions to the Firebase for Flutter 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: Firebase Firestore

Solutions

Challenge 1: Add the `cloud_firestore` package

Essential Tools to Enhance Your Flutter Workflow

Project: Build an Online Furniture Store

Solution: Firebase Firestore

Solutions

Challenge 1: Add the cloud_firestore package

Challenge 1: Add the `cloud_firestore` package