{"id":16317413,"url":"https://github.com/mychidarko/flutterjs","last_synced_at":"2026-05-17T19:05:28.524Z","repository":{"id":118213450,"uuid":"320108127","full_name":"mychidarko/flutterjs","owner":"mychidarko","description":"😆 Flutter for JS devs","archived":false,"fork":false,"pushed_at":"2021-01-14T16:05:07.000Z","size":12448,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T16:53:39.849Z","etag":null,"topics":["flutter","flutter-js","web-technologies"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mychidarko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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,"zenodo":null}},"created_at":"2020-12-09T23:45:00.000Z","updated_at":"2024-04-02T15:58:50.000Z","dependencies_parsed_at":"2023-04-13T16:02:24.500Z","dependency_job_id":null,"html_url":"https://github.com/mychidarko/flutterjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mychidarko/flutterjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Fflutterjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Fflutterjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Fflutterjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Fflutterjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mychidarko","download_url":"https://codeload.github.com/mychidarko/flutterjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Fflutterjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260933648,"owners_count":23084960,"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":["flutter","flutter-js","web-technologies"],"created_at":"2024-10-10T22:08:21.932Z","updated_at":"2026-05-17T19:05:28.507Z","avatar_url":"https://github.com/mychidarko.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flutterjs\n\nflutterjs is a flutter boilerplate based on web frameworks and libraries like CRA, Vue CLI apps and even ordinary web setups.\n\nThe whole idea is to create some level of familiarity for web, especially JavaScript developers.\n\n## Getting Started\n\n- Clone this project.\n- Search and replace all occurances of `flutterjs` with the name of your project\n- Add your screens (routes/pages) in `lib/router/routes.dart`\n- Configure your app styles/theme in `lib/assets`\n- Add and remove screens (pages) in `lib/screens`\n- General widgets (components) go in `lib/widgets`, screen based widgets in `lib\\screens\\{screen}\\widgets`\n\n## Routing\n\nRouting with flutterjs is really simple, since all the pressing configuration has already been done for you, all that's left is for you to define your own routes (screens). This is also simple, as it follows a simple JS approach heavily inspired by Vue. In your `routes.dart` file, you should have something like this:\n\n```dart\nList\u003cMap\u003cString, dynamic\u003e\u003e screens(params) {\n  // create routes List(array)\n  return [\n    {\n      'name': HomeRoute,\n      'screen': Home(),\n    },\n    {\n      'name': ProfileRoute,\n      'screen': Profile(),\n    },\n    {\n      'name': '*',\n      'screen': Error(),\n    },\n  ];\n}\n```\n\nThe `screens` method is where you define all your screens, it should return a `List`(array) of `Maps`(Objects).\n\n```dart\n{\n  'name': HomeRoute,\n  'screen': Home(),\n},\n```\n\n`name` is the route handler, sort of and `screen` is the screen to load for that route.\n\nSwitching to a different screen is quite easy, all you need to do is to call the `routeTo` method.\n\n```dart\nGestureDetector(\n  child: Text('Go To Profile Screen'),\n  onTap: () =\u003e routeTo(context, ProfileRoute, {}),\n)\n```\n\nIn some cases, you might want to pass a variable into a \"route\", that's simple! You simply need to pass whatever variable you want into the third parameter of `routeTo`\n\n```dart\nGestureDetector(\n  child: Text('Go To Profile Screen'),\n  onTap: () =\u003e routeTo(context, ProfileRoute, {'id': 1}),\n)\n```\n\nNow, you just need to pass it into the route list\n\n```dart\n{\n  'name': ProfileRoute,\n  'screen': Profile(params('id')),\n},\n```\n\nFinally, you include it in the Screen's constructor, so it knows it's supposed to look for it on load.\n\n```dart\nclass Profile extends StatelessWidget {\n  final int _id;\n\n  Profile(this._id);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: ListView(\n          children: [\n            Text('Profile Screen for user $_id'),\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmychidarko%2Fflutterjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmychidarko%2Fflutterjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmychidarko%2Fflutterjs/lists"}