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.
Create and Open Documents
Easily create and re-open documents. Everything is saved to your Appwrite database.
Authentication - Sign-in and Create New Accounts
Easy authentication using Appwrite.
Packages
Packages used in this project.
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 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.
- Intro: video
- Base: branch and video
- Setup Riverpod: branch and video
- Setup Routemaster: branch and video
- Appwrite Setup: branch and video
- Create Authentication Repository: branch and video
- Create Auth State Service: branch and video
- Create Login and Register Page: branch and video
- Add Logged in Routes: branch and video
- Add Document UI and State: branch and video
- Create Documents: branch and video
- Update and Save Documents: branch and video
- Add Realtime Changes: branch and video
- List All Documents: branch and video
- What's Next?: video