DEV Community

Cover image for Appwrite + Flutter: The Pilot Blog.
Chandram Dutta
Chandram Dutta

Posted on

Appwrite + Flutter: The Pilot Blog.

Let's learn to work with the best of the BaaS world and undoubtedly the best cross-platform UI toolkit.

Hello, let's fasten our seatbelts cause this blog series will take you through creating your next billion-dollar startup full-stack app based on the best of the Open-source World. We will be learning to use Appwrite, the Open-source Backend-as-a-Service, with Flutter, the almighty UI toolkit to build an app which we will talk about in a moment.
But first, let's install Appwrite and Flutter.

Appwrite Installation

To install Appwrite, make sure you have Docker. Here are the links to download and install Docker properly

Once installed, let's install Appwrite image which is pasting just one line of script on your terminal!

  • Linux/Mac
docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
Enter fullscreen mode Exit fullscreen mode
  • CMD
docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
Enter fullscreen mode Exit fullscreen mode
  • Powershell
docker run -it --rm `
    --volume /var/run/docker.sock:/var/run/docker.sock `
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw `
    --entrypoint="install" `
Enter fullscreen mode Exit fullscreen mode

Note: This scripts are for Appwrite version 1.2.0 which we will be using for the project! For the latest versions go to Appwrite and click on Get Started.
At the end of the installation, it will prompt you to many inputs, going for the default options is my recommendation and if you did it, go to your http://localhost:80 and voila! you will be greeted with the beautiful Appwrite Console(made using Svelte,my favourite). Create an account and sign in.

Flutter Installation

As for flutter, installing it through its official documentation is the best way!

Now, run flutter doctor and you should see all ticks green, if not, copy the red text and paste it on stack overflow and you should get your answers

The app

So, a couple of days ago, I posted an app I was building as a side project on Twitter

and realised there aren't any great Tutorials for the appwrite+flutter community. One resource worth mentioning is the React Bits (Damodar Lohani) Flutter + Appwrite Tutorial Series on YouTube however it's based on a very old version of Appwrite which isn't compatible with the latest version. The other and best resource is the Official Appwrite Docs which is the main source of knowledge in this blog series. To create a strong resource on integrating Appwrite perfectly with Flutter, I decided to document the entire process of developing the Recipe App, a social media for sharing your mouthwatering recipes to the world, in this blog series and mind you, I am still building the app at the time of writing this blog so let's learn together and build in public.

That's all to get you started with this blog series! In the next blog, we will talk about setting up our flutter apps, discussing the architecture and things like state management (will be Riverpod 2.0). Hope, the blog series will succeed in the prime objective of becoming the go-to resource for creating Flutter+Appwrite apps. See y'all soon in the next blog and do share it for the greater good of the community๐Ÿ˜๐Ÿ˜!

Top comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout ๐Ÿ˜†