{"id":13548677,"url":"https://github.com/Securrency-OSS/mirai","last_synced_at":"2025-04-02T21:32:05.902Z","repository":{"id":134848924,"uuid":"501249813","full_name":"Securrency-OSS/mirai","owner":"Securrency-OSS","description":"Mirai is a Server-Driven UI (SDUI) library for Flutter. Mirai allows you to build beautiful cross-platform applications with JSON in real time.","archived":false,"fork":false,"pushed_at":"2024-08-04T22:07:23.000Z","size":12276,"stargazers_count":523,"open_issues_count":29,"forks_count":66,"subscribers_count":14,"default_branch":"dev","last_synced_at":"2024-11-27T14:48:45.293Z","etag":null,"topics":["backend-driven-ui","dart","dynamic-ui","flutter","json","mirai","sdui","server-driven-ui"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/mirai","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Securrency-OSS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-08T12:53:01.000Z","updated_at":"2024-11-12T18:50:38.000Z","dependencies_parsed_at":"2023-10-04T13:48:12.282Z","dependency_job_id":"df412f9b-bb05-4dc2-9087-a8c31e279d6b","html_url":"https://github.com/Securrency-OSS/mirai","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Securrency-OSS%2Fmirai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Securrency-OSS%2Fmirai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Securrency-OSS%2Fmirai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Securrency-OSS%2Fmirai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Securrency-OSS","download_url":"https://codeload.github.com/Securrency-OSS/mirai/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246895874,"owners_count":20851344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend-driven-ui","dart","dynamic-ui","flutter","json","mirai","sdui","server-driven-ui"],"created_at":"2024-08-01T12:01:13.150Z","updated_at":"2025-04-02T21:32:05.713Z","avatar_url":"https://github.com/Securrency-OSS.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"![Mirai][mirai_banner]\n\n[![pub package](https://img.shields.io/pub/v/mirai.svg)](https://pub.dev/packages/mirai)\n[![License: MIT][license_badge]][license_link]\n\n---\n\nMirai is a Server-Driven UI (SDUI) library for Flutter. Mirai allows you to build beautiful cross-platform applications with JSON in real time.\n\nDeveloped with 💙 by [Securrency][securrency_link]\n\n## Installation 🚀\n\nFirst, we need to add Mirai to our pubspec.yaml file.\n\nInstall the plugin by running the following command from the project root:\n\n```bash\nflutter pub add mirai\n```\n\n## Usage 🧑‍💻\n\nNow that we have successfully installed Mirai, we can import Mirai in main.dart.\n\n```dart\nimport 'package:mirai/mirai.dart';\n```\n\nNext, within main function initialize Mirai.\n\n```dart\nvoid main() async {\n  await Mirai.initialize();\n\n  runApp(const MyApp());\n}\n```\n\nYou can also specify your custom Parsers in `Mirai.initialize` and `Dio` instance.\n\n```dart\nvoid main() async {\n  final dio = Dio();\n\n  await Mirai.initialize(\n    parsers: const [\n      ExampleScreenParser(),\n    ],\n    dio: dio,\n  );\n\n  runApp(const MyApp());\n}\n```\n\nFinally, replace your MaterialApp with MiraiApp. And call your json with Mirai.fromJson(json, context).\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:mirai/mirai.dart';\n\nvoid main() async {\n  await Mirai.initialize();\n\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MiraiApp(\n      title: 'Mirai Demo',\n      homeBuilder: (context) =\u003e Mirai.fromJson(json, context),\n    );\n  }\n}\n\n```\n\n## Example\n\nHere is an example of a basic form screen build with Mirai.\n\n### Server\n\n```json\n{\n  \"type\": \"scaffold\",\n  \"appBar\": {\n    \"type\": \"appBar\",\n    \"title\": {\n      \"type\": \"text\",\n      \"data\": \"Text Field\",\n      \"style\": {\n        \"color\": \"#ffffff\",\n        \"fontSize\": 21\n      }\n    },\n    \"backgroundColor\": \"#4D00E9\"\n  },\n  \"backgroundColor\": \"#ffffff\",\n  \"body\": {\n    \"type\": \"singleChildScrollView\",\n    \"child\": {\n      \"type\": \"container\",\n      \"padding\": {\n        \"left\": 12,\n        \"right\": 12,\n        \"top\": 12,\n        \"bottom\": 12\n      },\n      \"child\": {\n        \"type\": \"column\",\n        \"mainAxisAlignment\": \"center\",\n        \"crossAxisAlignment\": \"center\",\n        \"children\": [\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"textField\",\n            \"maxLines\": 1,\n            \"keyboardType\": \"text\",\n            \"textInputAction\": \"done\",\n            \"textAlign\": \"start\",\n            \"textCapitalization\": \"none\",\n            \"textDirection\": \"ltr\",\n            \"textAlignVertical\": \"top\",\n            \"obscureText\": false,\n            \"cursorColor\": \"#FC3F1B\",\n            \"style\": {\n              \"color\": \"#000000\"\n            },\n            \"decoration\": {\n              \"hintText\": \"What do people call you?\",\n              \"filled\": true,\n              \"icon\": {\n                \"type\": \"icon\",\n                \"iconType\": \"cupertino\",\n                \"icon\": \"person_solid\",\n                \"size\": 24\n              },\n              \"hintStyle\": {\n                \"color\": \"#797979\"\n              },\n              \"labelText\": \"Name*\",\n              \"fillColor\": \"#F2F2F2\"\n            },\n            \"readOnly\": false,\n            \"enabled\": true\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"textField\",\n            \"maxLines\": 1,\n            \"keyboardType\": \"text\",\n            \"textInputAction\": \"done\",\n            \"textAlign\": \"start\",\n            \"textCapitalization\": \"none\",\n            \"textDirection\": \"ltr\",\n            \"textAlignVertical\": \"top\",\n            \"obscureText\": false,\n            \"cursorColor\": \"#FC3F1B\",\n            \"style\": {\n              \"color\": \"#000000\"\n            },\n            \"decoration\": {\n              \"hintText\": \"Where can we reach you?\",\n              \"filled\": true,\n              \"icon\": {\n                \"type\": \"icon\",\n                \"iconType\": \"cupertino\",\n                \"icon\": \"phone_solid\",\n                \"size\": 24\n              },\n              \"hintStyle\": {\n                \"color\": \"#797979\"\n              },\n              \"labelText\": \"Phone number*\",\n              \"fillColor\": \"#F2F2F2\"\n            },\n            \"readOnly\": false,\n            \"enabled\": true\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"textField\",\n            \"maxLines\": 1,\n            \"keyboardType\": \"text\",\n            \"textInputAction\": \"done\",\n            \"textAlign\": \"start\",\n            \"textCapitalization\": \"none\",\n            \"textDirection\": \"ltr\",\n            \"textAlignVertical\": \"top\",\n            \"obscureText\": false,\n            \"cursorColor\": \"#FC3F1B\",\n            \"style\": {\n              \"color\": \"#000000\"\n            },\n            \"decoration\": {\n              \"hintText\": \"Your email address\",\n              \"filled\": true,\n              \"icon\": {\n                \"type\": \"icon\",\n                \"iconType\": \"material\",\n                \"icon\": \"email\",\n                \"size\": 24\n              },\n              \"hintStyle\": {\n                \"color\": \"#797979\"\n              },\n              \"labelText\": \"Email\",\n              \"fillColor\": \"#F2F2F2\"\n            },\n            \"readOnly\": false,\n            \"enabled\": true\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 100,\n            \"child\": {\n              \"type\": \"textField\",\n              \"expands\": true,\n              \"cursorColor\": \"#FC3F1B\",\n              \"style\": {\n                \"color\": \"#000000\"\n              },\n              \"decoration\": {\n                \"filled\": true,\n                \"hintStyle\": {\n                  \"color\": \"#797979\"\n                },\n                \"labelText\": \"Life story\",\n                \"fillColor\": \"#F2F2F2\"\n              },\n              \"readOnly\": false,\n              \"enabled\": true\n            }\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"textField\",\n            \"maxLines\": 1,\n            \"keyboardType\": \"text\",\n            \"textInputAction\": \"done\",\n            \"textAlign\": \"start\",\n            \"textCapitalization\": \"none\",\n            \"textDirection\": \"ltr\",\n            \"textAlignVertical\": \"top\",\n            \"obscureText\": true,\n            \"cursorColor\": \"#FC3F1B\",\n            \"style\": {\n              \"color\": \"#000000\"\n            },\n            \"decoration\": {\n              \"filled\": true,\n              \"suffixIcon\": {\n                \"type\": \"icon\",\n                \"iconType\": \"cupertino\",\n                \"icon\": \"eye\",\n                \"size\": 24\n              },\n              \"hintStyle\": {\n                \"color\": \"#797979\"\n              },\n              \"labelText\": \"Password*\",\n              \"fillColor\": \"#F2F2F2\"\n            },\n            \"readOnly\": false,\n            \"enabled\": true\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 24\n          },\n          {\n            \"type\": \"textField\",\n            \"maxLines\": 1,\n            \"keyboardType\": \"text\",\n            \"textInputAction\": \"done\",\n            \"textAlign\": \"start\",\n            \"textCapitalization\": \"none\",\n            \"textDirection\": \"ltr\",\n            \"textAlignVertical\": \"top\",\n            \"obscureText\": true,\n            \"cursorColor\": \"#FC3F1B\",\n            \"style\": {\n              \"color\": \"#000000\"\n            },\n            \"decoration\": {\n              \"filled\": true,\n              \"suffixIcon\": {\n                \"type\": \"icon\",\n                \"iconType\": \"cupertino\",\n                \"icon\": \"eye\",\n                \"size\": 24\n              },\n              \"hintStyle\": {\n                \"color\": \"#797979\"\n              },\n              \"labelText\": \"Re-type password*\",\n              \"fillColor\": \"#F2F2F2\"\n            },\n            \"readOnly\": false,\n            \"enabled\": true\n          },\n          {\n            \"type\": \"sizedBox\",\n            \"height\": 48\n          },\n          {\n            \"type\": \"elevatedButton\",\n            \"child\": {\n              \"type\": \"text\",\n              \"data\": \"Submit\"\n            },\n            \"style\": {\n              \"backgroundColor\": \"#4D00E9\",\n              \"padding\": {\n                \"top\": 8,\n                \"left\": 12,\n                \"right\": 12,\n                \"bottom\": 8\n              }\n            },\n            \"onPressed\": {}\n          }\n        ]\n      }\n    }\n  }\n}\n```\n\n### Flutter\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:mirai/mirai.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MiraiApp(\n      title: 'Mirai Demo',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: Mirai.fromNetwork(\n        MiraiRequest(\n          url: _url,\n          method: Method.get,\n        ),\n      ),\n    );\n  }\n}\n```\n\n\u003eNote:\n\u003e\n\u003eMirai provides multiple methods to parse JSONs into Flutter widgets. You can use `Mirai.fromNetwork()`,  `Mirai.fromJson()` \u0026 `Mirai.fromAsset()`\n\nThat's it with just few lines of code your SDUI app is up and running.\n\n![Form Screen][form_screen]\n\n### More examples\n\nCheck out the [Mirai Gallery](https://github.com/Securrency-OSS/mirai/tree/main/examples/mirai_gallery) app for more such examples.\n\n## Contributors ✨\n\n\u003ca href=\"https://github.com/Securrency-OSS/mirai/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Securrency-OSS/mirai\" /\u003e\n\u003c/a\u003e\n\n## Maintainers\n\n- [Divyanshu Bhargava][divyanshu_github]\n- [Rahul Bisht][rahul_linkedIn]\n- [Aasim Khan][aasim_github]\n\n---\n\n[license_badge]: https://img.shields.io/badge/license-MIT-blue.png\n[license_link]: https://opensource.org/licenses/MIT\n[mirai_banner]: https://github.com/Securrency-OSS/mirai/blob/main/assets/mirai_banner.png\n[securrency_link]: https://securrency.com\n[form_screen]: https://github.com/Securrency-OSS/mirai/blob/main/assets/form_screen_image.png\n[divyanshu_github]: https://github.com/divyanshub024\n[aasim_github]: https://github.com/i-asimkhan\n[rahul_linkedIn]: https://www.linkedin.com/in/rahul--bisht/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSecurrency-OSS%2Fmirai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSecurrency-OSS%2Fmirai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSecurrency-OSS%2Fmirai/lists"}