Building scalable Flutter apps using GraphQL, Hasura and event-driven serverless, Part 3 - building the Flutter client

This tutorial was written by Can Taşpınar 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.

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 covered how to deploy Hasura and how to model the relational data with permissions. Part 2, covered how Auth and Business Logic can be handled by combining Hasura and Firebase services.

Also, we've written a guide to event-driven programming that may be useful to go through.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Can Taşpınar 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.