Building scalable Flutter apps using GraphQL, Hasura and event-driven serverless, Part 3 - building the Flutter client
Tags: flutter, eventdriven, guidesandtutorials, firebase
Published: 2019-12-17 10:25:54

---
title: Building scalable Flutter apps using GraphQL, Hasura and event-driven serverless, Part 3 - building the Flutter client
published: true
date: 2019-09-04 14:56:53 UTC
tags: flutter, event-driven, guides and tutorials, firebase
canonical_url: https://blog.hasura.io/build-flutter-app-hasura-firebase-part3/
---

![](https://blog.hasura.io/content/images/2019/09/hasura-flutter-wo-border-8.png)

_This tutorial was written by_ [_Can Taşpınar_](https://twitter.com/cntaspinar) _and published as part of  the [Hasura Technical Writer Program](https://blog.hasura.io/the-hasura-technical-writer-program/) - an initiative that supports authors who write guides and tutorials for the open source Hasura GraphQL Engine._

## Introduction

This is the third part in the "Building a quiz app with Hasura & Firebase". In this final part, we will create the Flutter frontend.

> **[Part 1](https://blog.hasura.io/build-flutter-app-graphql-hasura-serverless-part1/)** covered how to deploy Hasura and how to model the relational data with permissions. **[Part 2](https://blog.hasura.io/build-flutter-app-hasura-firebase-part2/)**, covered how Auth and Business Logic can be handled by combining Hasura and Firebase services.

To keep things simple, we are not going to cover all the Flutter code. Instead we are going to look into important parts. You can find the finished project on [GitHub](https://github.com/cantaspinar/hasura_trivia).

## Making the flutter frontend

Following dependencies are needed in **pubspec.yaml** file.

```
dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^1.0.0
  firebase_auth: ^0.11.1+11
  cloud_functions: ^0.4.1
```

Flutter app needs a setup to connect your Firebase project. You can follow [this guide](https://firebase.google.com/docs/flutter/setup).

The App consists of 6 screens.

- Main
- Login
- SignUp
- Play
- Result
- Scores

### Main

This is the entry point of the app. First thing to do is to check if there is a signed in user.

 {% gist https://gist.github.com/shark-h/e540101e123d2f8fb513bdfc77995c27.js %}

In case there is no user, app navigates to login screen. From there you can sign in or go to **SignUp** page to register with the custom Firebase function we have created earlier. After a successful sign up, the user is signed in and navigated to the **AuthCheck** again.

 {% gist https://gist.github.com/shark-h/4ed4e3390db11b15ee5c9e772e698fb3.js %}

Once there is a user logged in, MainApp widget is returned with user and token. In MainApp, we prepare GraphQL Client and wrap the MaterialApp with GraphQL Provider. Don’t forget to change the links below with your GraphQL endpoint.

 {% gist https://gist.github.com/shark-h/bb6c0e7703e4564a3050d5e984b1be23.js %}

We are now in Menu. Once the user hits play button, app is navigated to the `Play` page. In this page we have a Query widget that makes a query to our custom Postgres function to get the question that hasn’t been answered by the user.

 {% gist https://gist.github.com/shark-h/e5ed92f4d25c9b3ca8e46ba91455d396.js %}

Another important part in this page is the `addAnswer` method. Once the user taps on an answer option for the question, this method is called to insert to answer to the  
`user_answers` table.

 {% gist https://gist.github.com/shark-h/c6deba4d6321421f83b79d0ef714a4f6.js %}

Once the insert operation is finished, user is navigated to the `Result` page. This page shows whether the answer is correct or incorrect and shows the correct one in either case. User can continue to answer other questions by tapping on next button. If user has answered all questions, app notifies the user. Apart from that, remember inserting an answer on `user_answers` table triggers the functions we have deployed earlier in the event section. If the answer is correct, user gets 10 points.

Lastly, let’s have a look on `Scores` page. In this page, we are getting the user score date real time thanks to the subscription feature. There is a subscription widget similar to the Query widget we have used in Play page earlier.


 {% gist https://gist.github.com/shark-h/1c87cf6d6a00e9e415740c3ebe8d3286.js %}

That's it! We have created a simple Flutter quiz app powered by Hasura and Firebase. We have seen how Firebase services like Authentication and Cloud Functions can be used with Hasura to handle user authentication and business logic.

## About the Author

[Can Taşpınar](https://twitter.com/cntaspinar) is passionate and enthusiastic developer whose journey started with the question “How to make a video game?” Moving on with mobile application development and Full Stack Web development. Enjoys working with modern and open source technologies.