Forem: Chandram Dutta

Appwrite + Flutter: The Pilot Blog.

Chandram Dutta — Thu, 05 Jan 2023 08:55:39 +0000

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

On a Mac
On Windows (make sure you have WSL2 installed)
On Linux for Docker Desktop, tho I personally prefer downloading the Docker Engine for Linux(and don't forget the post-installation steps)

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" \
    appwrite/appwrite:1.2.0

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:1.2.0

Powershell

docker run -it --rm `
    --volume /var/run/docker.sock:/var/run/docker.sock `
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw `
    --entrypoint="install" `
    appwrite/appwrite:1.2.0

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!

macOS
Linux (Don't install the snap version)
Windows

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

// Detect dark theme var iframe = document.getElementById('tweet-1609575130832965632-74'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1609575130832965632&theme=dark" }

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😁😁!

Flutter Riverpod - Part 2

Chandram Dutta — Mon, 21 Mar 2022 06:19:53 +0000

In the last blog, we learned to set up Riverpod for a Flutter Project and how to use the basic of all Riverpod Provider, the Provider(). In this blog we will learn to use the most useful and basic Provider, the StateProvider().

Let's dig into why do we need a Provider?

Let's say you have an A Flutter(Riverpod) Project with the following code

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

int counter = 0;

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Riverpod',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Riverpod'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            const CounterCard()
          ],
        ),
      ),
    );
  }
}

class CounterCard extends StatefulWidget {
  const CounterCard({
    Key? key,
  }) : super(key: key);

  @override
  State<CounterCard> createState() => _CounterCardState();
}

class _CounterCardState extends State<CounterCard> {
  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
        child: ListTile(
      title: Text("$counter"),
      trailing: IconButton(
        icon: const Icon(Icons.plus_one),
        onPressed: _incrementCounter,
      ),
    ));
  }
}

Whats all this Provider Scope? Read my previous blog on setting up Riverpod for your Project!

So what's going on in the code above?
Its the similar Default Flutter Counter Application that we get when we create a new Flutter Project, but with Riverpod and some Changes to display the problem with state.
We have a global variable int counter which is initialised to Zero. Then that counter is used at two places, one in the upper MyHomePage Class and second in CounterCard Class. In the CounterCard, there's an IconButton with the function _incrementCounter() which increments the counter variable. Now Ideally, on pressing the button, we should see the counter getting incremented at both the places. But this doesn't happen. This is because the setState() method only refreshes the CounterCard Contents and not of MyHomePage. Flutter State works in this way to improve performance, imagine the entire screen refreshing everytime for small changes and you don't own an M1 Device. To solve this problem we have State Management Solutions. Let's figure it all out using some diagrams!! Who doesn't love diagrams right?

So if you want to change the state of a base class from a derived class(which happens quite frequently), it becomes quite tedious, we are gonna solve this problem with Riverpod, more specifically with a Provider that contains state or StateProvider().

So we have a counter variable right? We are going to convert it into Provider just how we learned in the previous blog.

//int counter = 0; This Changes to
final counterProvider = Provider<int>((ref) {
  return 0;
});

And half the Magic is Done!!

Change the MyHomePage to a Stateless Widget...

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            const CounterCard()
          ],
        ),
      ),
    );
  }
}

Again cahnge the MyHomePage to a ConsumerWidget just like we learned in the previous blog and let the Text Widget watch the counterProvider()


class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context,WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              ref.watch(counterProvider).toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
            const CounterCard()
          ],
        ),
      ),
    );
  }
}

Now sometimes you need to read a provider from a StatefulWidget, and we do this using ConsumerStatefulWidget which we will do to the CounterCard StatefulWidget.

// Add Consumer to StatefulWidget
class CounterCard extends ConsumerStatefulWidget {
  const CounterCard({
    Key? key,
  }) : super(key: key);

  @override
//    Changes here 
  ConsumerState<CounterCard> createState() => _CounterCardState();
}
//    Changes here 
class _CounterCardState extends ConsumerState<CounterCard> {
 ...
}

And that's it!
Now remember before I talked about a different kind of Provider and it was the StateProvider, it basically is an a Provider but it can maintain the State of its contents.
Now go above and add State to the counterProvider

//                                    Over Here
final counterProvider = StateProvider<int>((ref) {
  return 0;
});

Now go to CounterCard and let the Text watch the counterProvider

class _CounterCardState extends ConsumerState<CounterCard> {


  @override
  Widget build(BuildContext context) {
    return Card(
        child: ListTile(
      title: Text(ref.watch(counterProvider).toString()),
      trailing: IconButton(
        icon: const Icon(Icons.plus_one),
        onPressed: (){
          ...
        },
      ),
    ));
  }
}

Now in the onPressed we have to increment the "state" of counterProvider.
To do this we use ref.read() instead of ref.watch, so here it should be,

onPressed: () {
          setState(() {
            ref.read(counterProvider.state).state++;
          });
        },

Note that here it will still work if you don't use a setState Function.
That's it and now run the program to solve the State Mangement Problem we faced earlier.

I will be soon starting a Riverpod Series on Youtube so don't forget to subscribe my Youtube Channel and Also follow me on Twitter and Instagram to get the latest updates and Tips and Tricks using Flutter.

Hello Flutter with Riverpod 1.0.0!

Chandram Dutta — Sun, 20 Mar 2022 10:04:42 +0000

State Management in Flutter is an important topic not to be overlooked. Obviously, you can't just use set state(); throughout a project consisting of 3000 lines of code over 20 different files! There are many approaches in Flutter that you can use for managing your state and for dependency injection.

Some of the Darttastical State Management Approaches are:

BLoC
Riverpod
GetX And many more...

Note: I am not including Provider as Riverpod is a better version of Provider itself.

So Now let's understand Riverpod.

As I mentioned before, Riverpod is an improved version of Providers and hence, Providers play an important role in Riverpod.
What are Providers tho...

final thisIsProvider = Provider((ref) {
  return MyValue();
});

The final thisIsProvider is the declaration of the variable. The Provider(); comes from Riverpod Class. MyValue() refers to object that our Provider is returning. It could be a string, int, or any other data type.

To understand more vividly using real code examples let's learn to import riverpod.

Installing Riverpod

There are 3 types of riverpod

riverpod to be used only with Dart
flutter_riverpod when we use Flutter and riverpod
riverpod_hooks when we use flutter_hooks in our flutter Project.

For this blog, we will use flutter_riverpod

In pubspec.yaml Under dependencies add flutter_riverpod

dependencies:
  flutter_riverpod:

Wrap the root of your widget tree (MyApp() Class) with ProviderScope()

void main() {
  runApp(
    //Right Here👇
    ProviderScope(
      child: MyApp(),
    ),
  );
}

And don't forget to import riverpod in your .dart files

import 'package:flutter_riverpod/flutter_riverpod.dart';

Let's play with riverpod now

Ok...so after all this, let's actually use the riverpod with a basic Provider().

Copy the following code

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          return Text('Riverpod says Hello');
      ),
    );
  }
}

The code is self-explanatory to any flutter developer with basic knowledge of flutter with changes that we discussed before while installing riverpod. Now we will use riverpod's Provider to display the text in the Text() in the Center() of the Scaffold()

Change StatelessWidget() to ConsumerWidget()

class Home extends ConsumerWidget {
...
}

Pass another object named WidgetRef ref in build() method of ConsumerWidget()

class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}

Now let's create a Provider() the most basic of all.

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}
//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}

Let's watch() our helloTextProvider()

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
//Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}

The Final Code

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          //Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}

And Congrats🎉🎉, you made your first Riverpod App(if it runs successfullly🤭😉) .

In my next blog, we will learn to use StateProvider() where you will actually get to know the advantages of flutter_riverpod.
Till that Oh Boy! you all need to wait!

Originally published on Hashnode on 29th December 2020