Hasura GraphQL 102 | Build a Recipe Management App with Flutter
In this course we will build a Recipe Management App with Hasura GraphQL Engine and Flutter. We will design our database using the one-to-many relationship between Recipe and Ingredients. We will be developing a Cupertino styled app that will use the Ferry GraphQL client to communicate with our Hasura GraphQL endpoint. We will download the GraphQL schema into a Dart package and implements the various operations for our app.
We will use ferry_generator to generate the relevant Dart classes based on our schema, queries and mutation operations. We will use the get_it package to register our GraphQL client as a singleton, which will allow us to use this around the app in a way that is decoupled from our UI.
=== Contents of this course ===
00:00 Intro and Demo
01:18 Visualise the Database model
01:54 Create recipes and ingredients tables
04:01 Explain project setup and packages
05:24 Create CupertinoApp widget and routes
06:06 Launch app in iPhone simulator
06:36 Implement AllRecipesScreen widget
11:06 Implement NoRecipes and NewRecipeScreen widget
13:30 Implement RecipeListTile widget
18:05 Implement Cupertino modal popup
20:03 Download GraphQL Schema
21:26 Generate Dart classes from GraphQL Schema
21:55 Define GraphQL query operations
24:34 Export generated classes for use in Flutter App
25:14 Implement GraphQL client initialisation function
26:05 Use GetIt package to register GraphQL client initialisation function as singleton
27:07 Use Operation widget to retrieve list of recipes
30:37 Pass response data to RecipeListTile widget
32:52 Implement RecipeDetail widget
41:15 Perform fetch ingredients query
42:20 Generate Ingredients query Dart classes
42:55 Fix Dart Analyser issue picking up
43:22 Fetch Ingredients and display in RecipeDetail widget
49:46 Implement Slidable widget from flutter_slidable package
50:58 Implement Delete recipe alert dialog
53:40 Summary
54:18 Outro
Please leave us your feedback in the comments, and let us know what you would like us to demonstrate next! You can reach out in the comments below or on Twitter using #Hasura #GraphQL #Fullstack #Flutter
Like, Subscribe and Hit the Bell 🔔 if you enjoyed this video 😍
Get the source code → https://github.com/graphicbeacon/reci...
Get started with Dart course → https://bit.ly/getstartedwithdart
Hasura 101 Tutorial → • Hasura GraphQL 101 (Instant GraphQL P...
Ferry GraphQL Client Tutorial → • Ferry GraphQL Client for Dart and Flu...
Download get-graphql-schema → https://www.npmjs.com/package/get-gra...
Subscribe to the channel → http://bit.ly/2P2N1j
Dart docs → https://dart.dev
Read More Dart Tutorials → https://creativebracket.com
Buy me a coffee → https://ko-fi.com/creativebracket
LET'S CONNECT
---
Twitter → / creativ_bracket
Support the channel → / creativebracket