1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3679],{89162:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>l,metadata:()=>o,toc:()=>c});var t=i(85893),s=i(11151);const l={id:"hypi-cli-flutter",title:"Use Hypi in a Flutter Project",sidebar_label:"Flutter",slug:"/lowcode/hypi-cli-flutter"},a=void 0,o={id:"lowcode/hypi-cli-flutter",title:"Use Hypi in a Flutter Project",description:"Flutter is Google\u2019s UI toolkit for building beautiful, natively compiled applications for\xa0mobile,\xa0web, and\xa0desktop\xa0from 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.",source:"@site/src/markdown/lowcode/hypi-cli-flutter.md",sourceDirName:"lowcode",slug:"/lowcode/hypi-cli-flutter",permalink:"/docs/lowcode/hypi-cli-flutter",draft:!1,unlisted:!1,editUrl:"https://github.com/hypi-universe/website/tree/main/packages/create-docusaurus/templates/shared/src/markdown/lowcode/hypi-cli-flutter.md",tags:[],version:"current",frontMatter:{id:"hypi-cli-flutter",title:"Use Hypi in a Flutter Project",sidebar_label:"Flutter",slug:"/lowcode/hypi-cli-flutter"},sidebar:"docs",previous:{title:"Hypi CLI Overview",permalink:"/docs/lowcode/hypi-cli-intro"},next:{title:"ReactJS",permalink:"/docs/lowcode/hypi-cli-react"}},r={},c=[{value:"Login",id:"login",level:3},{value:"Hypi Init",id:"hypi-init",level:3},{value:"Hypi Sync",id:"hypi-sync",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Flutter is Google\u2019s UI toolkit for building beautiful, natively compiled applications for\xa0mobile,\xa0web, and\xa0desktop\xa0from 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."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Prerequisite"}),": Knowledge of application development using Flutter. Installed flutter SDK on the system."]}),"\n",(0,t.jsx)(n.p,{children:"Follow the below steps to import the Hypi package."}),"\n",(0,t.jsx)(n.h3,{id:"login",children:"Login"}),"\n",(0,t.jsxs)(n.p,{children:["Login to your Hypi account using ",(0,t.jsx)(n.a,{href:"/docs/lowcode/hypi-cli-intro#hypi-login",children:"hypi login"})," command."]}),"\n",(0,t.jsx)(n.h3,{id:"hypi-init",children:"Hypi Init"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"hypi init"})," command to initialize a new hypi App and Instance in your flutter project folder."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:" USAGE\n $ hypi init [WEBSITE] [NAME] [LABEL] [DOMAIN]\n \n OPTIONS\n -h, --help show CLI help\n -i, --have_instance\n \n EXAMPLES\n $ hypi init -i\n $ hypi init --have_instance\n $ hypi init\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Go to your flutter project folder on the command line and run ",(0,t.jsx)(n.code,{children:"hypi init"})]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"hypi init\nThis command will walk you through creating the app.yaml and instance.yaml files.\n? Do you have a Hypi instance created at https://hypi.app that you\u2019d like to use? No\n? App name? FlutterHypi\n? App label? FlutterHypi\n? Website? https://hypi.app/apps\n? Domain(Optional)? flutterHypi.apps.hypi.app\nInit done successfully, Now write your schema then run the hypi sync command to generate your app's API\n"})}),"\n",(0,t.jsxs)(n.p,{children:["This creates a ",(0,t.jsx)(n.code,{children:".hypi"})," folder in your Flutter project folder. Within ",(0,t.jsx)(n.code,{children:".hypi"}),", three files are created. ",(0,t.jsx)(n.code,{children:"app.yaml"}),", ",(0,t.jsx)(n.code,{children:"instance.yaml"})," and ",(0,t.jsx)(n.code,{children:"schema.graphql"}),". The files app.yaml and instance.yaml has Hypi ",(0,t.jsx)(n.code,{children:"App and Instance"})," details."]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{}),(0,t.jsxs)(n.p,{children:["You should write your schema inside ",(0,t.jsx)(n.code,{children:"schema.graphql"})," file."]})]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"app.yaml\n==============================\nwebsite:\xa0https://hypi.app/apps\nname:\xa0FlutterHypi\nlabel:\xa0FlutterHypi\nreleases:\n\xa0\xa0-\xa0name:\xa0latest\nschema:\ntypes:\xa0schema.graphql\nstatus:\xa0PUBLISHED\nnotes:\xa0latest\xa0version\nhypi:\nid:\xa001F4EYDEMCS5CKBHWBM0SFJ7DH\nhypi:\nid:\xa001F4EYDEM7VJ6WZK9BQFFAQ0G5\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"instance.yaml\n=================================\ndomain:\xa0flutterHypi.apps.hypi.app\nrelease:\nname:\xa0latest\nhypi:\nid:\xa001F4EYDEMCS5CKBHWBM0SFJ7DH\nhypi:\nid:\xa001F4EYDHHCFV05BZZF6N7ZEG35\n"})}),"\n",(0,t.jsx)(n.p,{children:"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."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"hypi init\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"This command will walk
1you through creating app.yaml and instance.yaml files.\n? Do you have a Hypi instance created at https://hypi.app that you\u2019d like to use? Yes\n? Please enter a valid domain freehand.apps.hypi.app\nInit done successfully, Now write your schema then run the hypi sync command to generate your app's API\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In this case, the existing schema will get imported. You may edit the schema in the ",(0,t.jsx)(n.code,{children:"schema.graphql"})]}),"\n",(0,t.jsx)(n.h3,{id:"hypi-sync",children:"Hypi Sync"}),"\n",(0,t.jsxs)(n.p,{children:["You need to generate schema dart files to use Hypi APIs within the flutter project. Use the ",(0,t.jsx)(n.code,{children:"hypi sync flutter"})," command for that."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:" USAGE\n $ hypi sync flutter\n \n OPTIONS\n -h, --help show CLI help\n \n EXAMPLE\n $ hypi sync\n"})}),"\n",(0,t.jsx)(n.p,{children:"For syncing, make sure that the following dependencies exist inside your pubspec.yaml in your flutter project."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'dependencies:\n\n artemis: ">=6.0.0 <7.0.0"\n json_annotation: ^ 3.1.0\n equatable: ^ 1.2.5\n meta: ">=1.0.0 <2.0.0"\n gql: ">=0.12.3 <1.0.0"\n\ndev_dependencies:\n\n artemis: ">=6.0.0 <7.0.0"\n build_runner: ^ 1.10.4\n json_serializable: ^ 3.5.0\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Run\xa0",(0,t.jsx)(n.code,{children:"flutter pub get"}),"\xa0command to get the dependencies you have added. If there are duplicate entries for any parameters, comment out the previous entries."]}),"\n",(0,t.jsxs)(n.p,{children:["Also check if ",(0,t.jsx)(n.code,{children:"build.yaml"})," file exists. If not, create one with the following content."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"targets:\n $default:\n sources:\n - lib/**\n - graphql/**\n - .hypi/generated-schema.graphql\n - generated-schema.graphql\n builders:\n artemis:\n options:\n schema_mapping:\n - sc
1hema: .hypi/generated-schema.graphql\n output: lib/models/graphql/graphql_api.dart\n queries_glob: graphql/*.graphql\n naming_scheme: pathedWithFields\n custom_parser_import: 'package:graphbrainz_example/coercers.dart'\n scalar_mapping:\n - graphql_type: DateTime\n dart_type: DateTime\n - graphql_type: Json\n dart_type: Set\n - graphql_type: Long\n dart_type: int\n - graphql_type: Any\n dart_type: String\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now run ",(0,t.jsx)(n.code,{children:"hypi sync flutter"})," to generate dart files."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"hypi sync flutter\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"App created with id : 01F4EYDEM7VJ6WZK9BQFFAQ0G5\nInstance created with id : 01F4EYDHHCFV05BZZF6N7ZEG35\nupdateAppYamlFile done\nupdateInstanceYamlFile done\nIntrospection done\nRunning flutter pub run build_runner build --delete-conflicting-outputs\nProgram output: [INFO] Generating build script...\n[INFO] Generating build script completed, took 545ms\n\n[INFO] Initializing inputs\n[INFO] Reading cached asset graph...\n[INFO] Reading cached asset graph completed, took 86ms\n\n[INFO] Checking for updates since last build...\n[INFO] Checking for updates since last build completed, took 4.0s\n\n[INFO] Running build...\n[INFO] 12.6s elapsed, 0/1 actions completed.\n[INFO] 13.7s elapsed, 1/1 actions completed.\n[INFO] Running build completed, took 14.8s\n\n[INFO] Caching finalized dependency graph...\n[INFO] Caching finalized dependency graph completed, took 971ms\n\n[INFO] Succeeded after 15.8s with 2 outputs (1 actions)\n\nSync Process... done\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:["After syncing, ",(0,t.jsx)(n.code,{children:"dart"})," files get created in the ",(0,t.jsx)(n.code,{children:"\\lib\\models\\graphql"})," folder. Also, ",(0,t.jsx)(n.code,{children:"generated-schema.graphql"})," file gets generated in the ",(0,t.jsx)(n.code,{children:".hypi"})," folder that has hypi schema."]}),"\n",(0,t.jsx)(n.p,{children:"Now you are ready to update your dart files and create a flutter application using Hypi!"})]})}function d(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},11151:(e,n,i)=>{i.d(n,{Z:()=>o,a:()=>a});var t=i(67294);const s={},l=t.createContext(s);function a(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.