Skip to main content

Use Hypi in a Flutter Project

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In this guide, we will showcase how to import the Hypi package within the Flutter project using Hypi CLI. After the import, you may use Hypi functionalities to build Flutter Applications.

Prerequisite: Knowledge of application development using Flutter. Installed flutter SDK on the system.

Follow the below steps to import the Hypi package.

Login#

Login to your Hypi account using hypi login command.

Hypi Init#

Use the hypi init command to initialize a new hypi App and Instance in your flutter project folder.

    USAGE      $ hypi init [WEBSITE] [NAME] [LABEL] [DOMAIN]        OPTIONS      -h, --help           show CLI help      -i, --have_instance        EXAMPLES      $ hypi init -i      $ hypi init --have_instance      $ hypi init

Go to your flutter project folder on the command line and run hypi init

hypi initThis command will walk you through creating the app.yaml and instance.yaml files.? Do you have a Hypi instance created at https://hypi.app that you’d like to use? No? App name? FlutterHypi? App label? FlutterHypi? Website? https://hypi.app/apps? Domain(Optional)? flutterHypi.apps.hypi.appInit done successfully, Now write your schema then run the hypi sync command to generate your app's API

This creates a .hypi folder in your Flutter project folder. Within .hypi, three files are created. app.yaml, instance.yaml and schema.graphql. The files app.yaml and instance.yaml has Hypi App and Instance details.

info

You should write your schema inside schema.graphql file.

app.yaml==============================website: https://hypi.app/appsname: FlutterHypilabel: FlutterHypireleases:  - name: latestschema:types: schema.graphqlstatus: PUBLISHEDnotes: latest versionhypi:id: 01F4EYDEMCS5CKBHWBM0SFJ7DHhypi:id: 01F4EYDEM7VJ6WZK9BQFFAQ0G5
instance.yaml=================================domain: flutterHypi.apps.hypi.apprelease:name: latesthypi:id: 01F4EYDEMCS5CKBHWBM0SFJ7DHhypi:id: 01F4EYDHHCFV05BZZF6N7ZEG35

If you want to use an existing domain on the Hypi website instead of creating a new one, you may provide that domain that as well.

hypi init
This command will walk you through creating app.yaml and instance.yaml files.? Do you have a Hypi instance created at https://hypi.app that you’d like to use? Yes? Please enter a valid domain freehand.apps.hypi.appInit done successfully, Now write your schema then run the hypi sync command to generate your app's API

In this case, the existing schema will get imported. You may edit the schema in the schema.graphql

Hypi Sync#

You need to generate schema dart files to use Hypi APIs within the flutter project. Use the hypi sync flutter command for that.

    USAGE      $ hypi sync flutter        OPTIONS      -h, --help  show CLI help        EXAMPLE      $ hypi sync

For syncing, make sure that the following dependencies exist inside your pubspec.yaml in your flutter project.

dependencies:
 artemis: ">=6.0.0 <7.0.0" json_annotation: ^ 3.1.0 equatable: ^ 1.2.5 meta: ">=1.0.0 <2.0.0" gql: ">=0.12.3 <1.0.0"
dev_dependencies:
 artemis: ">=6.0.0 <7.0.0" build_runner: ^ 1.10.4 json_serializable: ^ 3.5.0

Run flutter pub get command to get the dependencies you have added. If there are duplicate entries for any parameters, comment out the previous entries.

Also check if build.yaml file exists. If not, create one with the following content.

targets:  $default:    sources:      - lib/**      - graphql/**      - .hypi/generated-schema.graphql      - generated-schema.graphql    builders:      artemis:        options:          schema_mapping:            - schema: .hypi/generated-schema.graphql              output: lib/models/graphql/graphql_api.dart              queries_glob: graphql/*.graphql              naming_scheme: pathedWithFields          custom_parser_import: 'package:graphbrainz_example/coercers.dart'          scalar_mapping:              - graphql_type: DateTime                dart_type: DateTime              - graphql_type: Json                dart_type: Set              - graphql_type: Long                dart_type: int              - graphql_type: Any                dart_type: String

Now run hypi sync flutter to generate dart files.

hypi sync flutter
App created with id : 01F4EYDEM7VJ6WZK9BQFFAQ0G5Instance created with id : 01F4EYDHHCFV05BZZF6N7ZEG35updateAppYamlFile doneupdateInstanceYamlFile doneIntrospection doneRunning flutter pub run build_runner build --delete-conflicting-outputsProgram output: [INFO] Generating build script...[INFO] Generating build script completed, took 545ms
[INFO] Initializing inputs[INFO] Reading cached asset graph...[INFO] Reading cached asset graph completed, took 86ms
[INFO] Checking for updates since last build...[INFO] Checking for updates since last build completed, took 4.0s
[INFO] Running build...[INFO] 12.6s elapsed, 0/1 actions completed.[INFO] 13.7s elapsed, 1/1 actions completed.[INFO] Running build completed, took 14.8s
[INFO] Caching finalized dependency graph...[INFO] Caching finalized dependency graph completed, took 971ms
[INFO] Succeeded after 15.8s with 2 outputs (1 actions)
Sync Process... done

After syncing, dart files get created in the \lib\models\graphql folder. Also, generated-schema.graphql file gets generated in the .hypi folder that has hypi schema.

Now you are ready to update your dart files and create a flutter application using Hypi!