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

04 September, 2019 | 3 min read

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.

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 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.

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.

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.

About the Author

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.

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.

HasuraCon, Our user conference is back!

We’re bringing together users from all over the world for a 2 day celebration of all things Hasura!
Discover the amazing products developers are building with Hasura. Level up your Hasura skills with live, in-depth workshops. Hear about all the big features and updates we are making to the Hasura GraphQL Engine and Hasura Cloud. Join us on 23rd & 24th June 2021!

Harsha

Harsha

Works at Hasura.

Read More

hand
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️