{"id":20766681,"url":"https://github.com/luo3house/flutter_fc","last_synced_at":"2025-04-30T10:42:55.128Z","repository":{"id":183212189,"uuid":"669785217","full_name":"luo3house/flutter_fc","owner":"luo3house","description":"Functional Component (FC) Library in Flutter with your favorite powerful hooks, as using in React","archived":false,"fork":false,"pushed_at":"2024-09-14T13:02:37.000Z","size":157,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T10:42:29.839Z","etag":null,"topics":["flutter","flutter-functional","flutter-hooks","hooks"],"latest_commit_sha":null,"homepage":"","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/luo3house.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-07-23T12:24:09.000Z","updated_at":"2024-10-25T11:07:25.000Z","dependencies_parsed_at":"2023-07-23T12:47:37.146Z","dependency_job_id":"225d7a3a-7b75-4cd0-b43d-b65618a98839","html_url":"https://github.com/luo3house/flutter_fc","commit_stats":null,"previous_names":["luo3house/flutter_fc"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luo3house%2Fflutter_fc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luo3house%2Fflutter_fc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luo3house%2Fflutter_fc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luo3house%2Fflutter_fc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luo3house","download_url":"https://codeload.github.com/luo3house/flutter_fc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251684846,"owners_count":21627201,"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-functional","flutter-hooks","hooks"],"created_at":"2024-11-17T11:25:33.980Z","updated_at":"2025-04-30T10:42:55.077Z","avatar_url":"https://github.com/luo3house.png","language":"Dart","readme":"# () =\u003e Text(\"FC in Flutter\")\n\n[![Pub Version](https://img.shields.io/pub/v/flutter_fc)](https://pub.dev/packages/flutter_fc)\n[![Github Action](https://github.com/luo3house/flutter_fc/actions/workflows/test.yaml/badge.svg)](https://github.com/luo3house/flutter_fc/actions/workflows/test.yaml)\n\nAn easy way to create Functional Components (FC) in Flutter, with composable hooks.\n\n*The FC has been deployed in some production app builds. FC aims to save your time.*\n\n## Features\n\n- ⏱️ No need to generate codes\n- 🖨️ No need to verbose StateXXXWidget \u0026 State\\\u003cXXX\u003e classes\n- 📄 Tiny implementations without external deps\n- 🪝 Built-in powerful composable hooks\n- 🐇 Speed up developing\n- 🎯 Focus on performance optimization\n- 🧱 Hot reload\n- ⚛️ React style friendly\n\n## Install\n\n```yaml\ndependencies:\n  flutter_fc: ^1.0.0\n```\n\n## Quick Start\n\nNo need to create a StatefulWidget class and a State for it.\n\n```dart\nclass Counter extends FCWidget {\n  const Counter({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    final (counter, setCounter) = useState(0);\n    return ElevatedButton(\n      onPressed: () =\u003e setCounter(counter + 1),\n        child: Text(\"Counter: $counter\"),\n    );\n  }\n}\n```\n\nDynamically create a temporary widget type, Not recommended.\n\n```dart\nfinal Counter = defineFC((context, props) {\n  final (counter, setCounter) = useState(0);\n  return ElevatedButton(\n    onPressed: () =\u003e setCounter(counter + 1),\n      child: Text(\"Counter: $counter\"),\n  );\n});\n```\n\n## Using hooks\n\n### useState\n\nCreate or restore with initial value stored in element, and get a function to let it update and rebuild.\n\n```dart\nfinal (loading, setLoading) = useState(false);\n```\n\n`useSetState` instead in case of just want to trigger an rebuild.\n\n```dart\nfinal update = useSetState();\n\nupdate(); // trigger an rebuild\n```\n\n### useIsMounted\n\nReturn a function, call to get whether element is mounted.\n\n```dart\nfinal isMounted = useIsMounted();\n\nTimer(const Duration(seconds: 3), () {\n  if (isMounted()) {\n    // element is still present\n  }\n});\n```\n\n### useElement\n\nRetrieve current building element. It inherits `BuildContext` so...\n\n```dart\nfinal context = useElement();\nfinal theme = Theme.of(context);\nfinal navigator = Navigator.of(context);\n```\n\n\n### useDidChangeDependencies\n\nPost a callback, called on element's dependencies were changed.\n\n### useReassemble\n\nPost a callback, called on element receives reassemble directive.\n\n```dart\nuseReassemble(() =\u003e textController.clear());\n```\n\n### useDispose\n\nPost a callback, called before element unmounts.\n\n```dart\nfinal timer = useMemo(() =\u003e Timer(...));\nuseDispose(timer.cancel);\n```\n\n### useDiff\n\nPost a callback, called on dependencies are different from before.\n\n```dart\nfinal (flag, setFlag) = useState(false);\nuseDiff(() {\n  print(\"Flag is changed to: $flag\");\n\n  // DO NOT TRIGGER UPDATE HERE setFlag(false);\n}, [flag]);\n```\n\n### useMemo\n\nGive a factory to create value, get the same object on each build until dependencies were changed.\n\n```dart\nfinal (percent, setPercent) = useState(20);\nfinal prettierPercent = useMemo(() =\u003e \"${percent} %\", [percent]);\n```\n\n### useRef\n\nCreate or restore with initial value stored in a `Ref`, which holds the value only.\n\n```dart\nfinal timerRef = useRef\u003cTimer\u003e(); // nullable\n\nfinal flagRef = useRefMust(false); // not null\n```\n\n### useValue\n\nCreate or restore with initial value stored in an `ValueNotifier`, which update listeners on its value has changed.\n\n```dart\nfinal loading = useValue(() =\u003e false);\n\nsetLoading(bool newValue) =\u003e loading.value = newValue;\n\nreturn ValueListenableBuilder(\n  valueListenable: loading,\n  builder: (context, flag, child) =\u003e flag\n    ? const Text(\"Loading\") \n    : const SizedBox(),\n);\n```\n\n### useDisposable\n\nCreate or restore a disposable instance. It may be called with `.disposed()` if it inherits from `ChangeNotifier` or `StreamSink`,\n\nCommonly used descendant classes:\n- ChangeNotifier\n- ValueNotifier\n- StreamController\n- FocusNode\n- TextEditingController\n\n```dart\n// auto disposed on unmount\nfinal controller = useDisposable(() =\u003e TextEditingController());\n```\n\n\n## Acknowledgement\n\nReact\n\nDart 3\n\n## License\n\nMIT (c) 2023-present, Luo3House.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluo3house%2Fflutter_fc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluo3house%2Fflutter_fc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluo3house%2Fflutter_fc/lists"}