Getting started with Hasura and Flutter

#flutter #graphql #guide #tutorial

This tutorial was written by Junyu Zhan and published as part of the Hasura Technical Writer Program - an initiative that supports authors who write guides and tutorials for the open source Hasura GraphQL Engine.

For those who aren't familiar with Flutter yet, Flutter is an open-source mobile application development framework created by Google, which allows you to build beautiful native apps on iOS and Android from a single codebase. Just like Hasura, Flutter has many great features that improve both developer and user experience. Just take 2 examples: Hot Reload helps you iterate with different designs really fast, without losing the state of your app. Skia (the 2D graphics engine used by Chrome) and all the built-in widgets provide performant, beautiful and customizable UIs.

Hasura and Flutter are a really good match for building 3factor apps. In this tutorial, I will show you how to get started with this powerful duo. We are going to port the voting app in my last tutorial to iOS and Android. The main goal is to show you how to integrate Hasura into Flutter apps, so we are only going to implement the basic voting features.

Prerequisites

You need to know Hasura and a little bit of Flutter to get started. Since you are reading this article, I assume you are already familiar with Hasura. For Flutter, I recommend going through the official doc to learn how to install and build a simple demo app with Flutter.

First thing first

Create a new flutter project is pretty simple. Just run flutter create hasura_vote_flutter and you are good to go. We need to add a GraphQL library first. Believe it or not, this might be the trickiest part of this tutorial. Since Flutter is in its early stages, there isn't a mature library like Apollo or Relay for the web. I picked flutter-graphql just because it works for this project. I expect as time goes on a great GraphQL library for Flutter will appear. By the way, all of us can help to make this happen!

Back to the topic. Open pubspec.yaml and add the dependency:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

  flutter_graphql: ^1.0.0-rc.3

If you are using IDEs recommended by the official doc, the package will be installed automatically. Otherwise, just run flutter packages get in the command line.

Prepare GraphQL documents

No matter which GraphQL library you use, the process is similar. You write some GraphQL documents and the library helps you send them and get some result back. Create two files queries.dart and mutations.dart in the lib folder same as your main.dart file. Then copy and paste the two documents from our last tutorial.

queries.dart:

mutations.dart:

This might seems a little bit redundant. But as the amazing ecosystem of GraphQL keeps going, I expect more code-sharing between Flutter and Web in the future.

Hook up the client

The auto-generated main.dart includes a simple counter app. Run it to make sure everything works. Then replace it with code below:

Much cleaner! Let's focus on the MyApp widget first, which initializes our GraphQL client. We don't need authentication in this project, so a simple HttpLink will do. The URI here is the same as in the last tutorial. If you deployed your own version, use your URI instead. We then make GraphQLProvider at the top of our widget tree, in order to use the Query and Mutation widget in the children.

Add Query

Because Flutter takes inspiration from React to provide a tree-like structure to build UI, the workflow of adding GraphQL data is very similar to that of Apollo React. Just wrap the children with a Query widget:

Nothing surprising here. We hook up the ReadProgrammingLanguages query and use that data to build a List. Hit save and you should see the list appear in you developing device. But since we haven't added the Vote mutation yet, clicking the list item will do nothing. What's more, because the subscription API of this flutter-graphql is not stable yet, we use polling to achieve real-time. Visit the Web version and make some change, you should see real-time updates on your Flutter app.

Add Mutation

Finally, let's add the Vote mutation to make our app fully functional. Change the return part of _MyHomePageState like this:

We use our prepared mutation to vote and update the data manually when the result comes back. At this stage, the app should work correctly. Try playing with it and see the change reflect on both the Flutter app and the Web app.

Wrapping Up

Good developer tools simplify common tasks but also provide ways to customize when in need. To me, Flutter and Hasura are two of the best examples of this quality. In this tutorial, we build a fairly simple real-time voting app. Utilizing the power of Hasura and Flutter, there really is no limit on what kinds of amazing apps you can build.

About the author

Junyu Zhan is a full-stack web developer living in China. Right now he is building a cross-platform App with Flutter, React and Hasura. He loves taking long walks and swimming in his spare time. You can contact him at his email address (thezjy@gmail.com) or Twitter Account (https://twitter.com/thezjy1).