Build a Personal Target Tracking Application with Flutter Riverpod and Strapi GraphQL

In this tutorial, we will create a personal goals tracking application using Flutter, Riverpod, GraphQL, and Strapi CMS. The app will allow users to add, start, and edit their goals or targets. We will use the following technologies and tools: 1. Flutter: A free and open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase. 2. Riverpod: A state management library for Flutter that helps manage application states efficiently. 3. GraphQL: A query language for APIs that enables declarative data fetching and allows clients to define the structure of the required data. 4. Strapi: An open-source Node.js CMS built with JavaScript, which provides a powerful and customizable API for managing content and data. By following this tutorial, you will learn how to integrate these technologies together to create a feature-rich personal goals tracking application. To get started, ensure that you have the following prerequisites: 1. Flutter SDK installed on your development machine. 2. An understanding of Dart programming language and familiarity with Flutter framework. 3. Basic knowledge of GraphQL and RESTful APIs. 4. A working installation of Node.js, npm, and Yarn package managers. 5. Familiarity with Strapi CMS or a similar headless CMS platform. Once you have the prerequisites in place, follow these steps to create your personal goals tracking application: Step 1: Set up the Flutter project Create a new Flutter project by running the following command in your terminal or command prompt: ```bash flutter create personal_goals_app cd personal_goals_app ``` Step 2: Install Riverpod package Add the Riverpod package to your Flutter project by updating the `pubspec.yaml` file with the following dependency: ```yaml dependencies: flutter: sdk: flutter riverpod: ^1.0.0 ``` Run the following command in your terminal or command prompt to fetch and install the Riverpod package: ```bash flutter pub get ``` Step 3: Set up GraphQL client Create a new file named `graphql_client.dart` inside the `lib/src/graphql/` directory of your Flutter project. Define the GraphQL client with the Strapi GraphQL URL as follows: ```dart import 'package:flutter/material.dart'; import 'package:graphql_flutter/graphql_flutter.dart'; ValueNotifier<GraphQLClient> initializeClient(String graphqlEndpoint) { final HttpLink httpLink = HttpLink(graphqlEndpoint); return ValueNotifier( GraphQLClient( link: httpLink, cache: GraphQLCache(store: InMemoryStore()), ), ); } const String strapiGraphQLURL = 'http://localhost:1337/graphql'; final graphqlClient = initializeClient(strapiGraphQLURL); ``` Step 4: Define GraphQL mutations and queries Create two new files named `mutations.dart` and `queries.dart` inside the `lib/src/graphql/` directory of your Flutter project. In these files, define Strapi GraphQL mutations for creating, updating, and deleting goals, as well as a GraphQL query for fetching all goals from the Strapi database. Step 5: Update Riverpod provider to use real queries and mutations Update the `goal_provider.dart` file inside the `lib/src/provider/` directory of your Flutter project to use the real queries and mutations defined in Step 4. This provider is responsible for managing the state of goals in your app and facilitating communication with the Strapi backend through GraphQL mutations and queries. Step 6: Enhance Goal model Update the `goal_model.dart` file inside the `lib/src/goals/models/` directory of your Flutter project to accommodate the requirements for integrating with a Strapi backend. These enhancements include adding methods such as `fromJson`, `calculateStatus`, and converting string representations of enums into their corresponding enum values. Step 7: Display goals fetched from Strapi in home page Update the `home.dart` file inside the `lib/src/pages/` directory of your Flutter project to fetch the goals from Strapi and display them in a list view. Ensure that you use the `ConsumerWidget` provided by Riverpod for efficient state management. Step 8: Test the personal goals tracking application Run your Flutter app on an emulator or physical device by executing the following command in your terminal or command prompt: ```bash flutter run ``` By the end of this tutorial, you should have a working personal goals tracking application that allows a user add, start and edit a goal or target. Strapi API provides a powerful and customizable API for managing content and data. With Strapi, we can define custom content types, set permissions, and expose APIs tailored to our application's needs. Personally, It is very easy to use and quick to learn. Benefits of Using Riverpod, Flutter, GraphQL, and Strapi Together: Computer Engineering graduate, proficient in building mobile applications with Flutter and web applications with Vue.js. Beyond coding, I enrich my time playing an instrument, learning new languages, exploring diverse cultures, and developing my own mobile app. As a tech writer, I'm dedicated to sharing knowledge and insights. I am always eager to blend technical skills with creative pursuits.```