funwithflutter/google-docs-clone-flutter

Google-Docs Like Clone With Flutter Web and Appwrite

This project is a demo application showing how to create a rich text editing experience, similar to Google Docs, using Flutter, Appwrite, and Flutter-Quill. This is meant to serve as a demo on how to use these tools. Please see the video tutorial for a step-by-step walkthrough. Beginner friendly 😎

Realtime Changes - Collaboration

Collaborate with other users on the same document in real-time.

Realtime changes demos

Create and Open Documents

Easily create and re-open documents. Everything is saved to your Appwrite database.

Create a new document demo

Authentication - Sign-in and Create New Accounts

Easy authentication using Appwrite.

Registration demo

Packages

Packages used in this project.

built with appwrite logo

Backend: Appwrite

Appwrite is an open-source alternative to Firebase and makes it possible to easily integrate authentication and add a backend database for your application. Appwrite also makes it possible to add real-time listeners to your database quickly.

• Appwrite Docs
• Appwrite Github
• Appwrite Discord

Appwrite sponsored this project and tutorial

Rich Text Editor: Flutter-Quill

FlutterQuill is a rich text editor and a Quill component for Flutter. This package makes it easy to sync incremental changes to other editors (real-time changes).

Honorable Mentions: SuperEditor

State Management: Riverpod

Riverpod is an excellent choice for a state management solution in your Flutter application, and this tutorial demonstrates multiple scenarios where Riverpod truly shines. If you've not used it before, this project may change your mind. The video tutorial highlights numerous excellent features and demos how to structure and organize your providers.

Routing: Routemaster

Routemaster simplifies the complexity of Flutter's 2.0 Navigator. This project creates two separate route maps:

• Authenticated routes
• Not authenticated routes

Riverpod, and the authentication state from Appwrite, determine which routes to allow.

Other Packages

Equatable: A Dart package that helps implement value-based equality without needing to explicitly override == and hashCode.

• UUID: Simple, fast generation of RFC4122 UUIDs.
• Logging: Provides APIs for debugging and error logging.

Tutorial

The project is split into multiple sections to make the tutorial easy to follow.

Video Tutorial

For a complete step-by-step guide, see: https://youtu.be/0_GJ1w_iG44

Tutorial Sections

For the most up-to-date code: see the master branch.

The tutorial sections are extracted as dedicated branches on Github, meaning you can easily follow along and always have the latest code before starting new sections.

0. Intro: video
1. Base: branch and video
2. Setup Riverpod: branch and video
3. Setup Routemaster: branch and video
4. Appwrite Setup: branch and video
5. Create Authentication Repository: branch and video
6. Create Auth State Service: branch and video
7. Create Login and Register Page: branch and video
8. Add Logged in Routes: branch and video
9. Add Document UI and State: branch and video
10. Create Documents: branch and video
11. Update and Save Documents: branch and video
12. Add Realtime Changes: branch and video
13. List All Documents: branch and video
14. What's Next?: video