{"id":20664022,"url":"https://github.com/flutterando/hook_state","last_synced_at":"2025-04-19T16:11:21.374Z","repository":{"id":243971593,"uuid":"813903529","full_name":"Flutterando/hook_state","owner":"Flutterando","description":"`hook_state` is a Flutter package inspired by React hooks and the `flutter_hooks` package. It offers a similar hooks experience but without the need for additional widgets, allowing you to use just `StatefulWidget` to manage complex states declaratively and reactively.","archived":false,"fork":false,"pushed_at":"2024-06-16T02:39:47.000Z","size":316,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-20T23:56:41.819Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flutterando.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":"2024-06-12T01:01:01.000Z","updated_at":"2024-12-31T01:44:47.000Z","dependencies_parsed_at":"2024-06-12T09:30:51.973Z","dependency_job_id":"f38f4632-2375-493c-94d2-f831c619e568","html_url":"https://github.com/Flutterando/hook_state","commit_stats":null,"previous_names":["flutterando/hook_state"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterando%2Fhook_state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterando%2Fhook_state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterando%2Fhook_state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterando%2Fhook_state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flutterando","download_url":"https://codeload.github.com/Flutterando/hook_state/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235247651,"owners_count":18959455,"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":[],"created_at":"2024-11-16T19:21:43.919Z","updated_at":"2025-01-25T03:35:05.472Z","avatar_url":"https://github.com/Flutterando.png","language":"Dart","readme":"\n# Hook State\n\n[![Pub Version](https://img.shields.io/pub/v/hook_state.svg)](https://pub.dev/packages/hook_state)\n\n`hook_state` is a Flutter package inspired by React hooks and the `flutter_hooks` package. It offers a similar hooks experience but without the need for additional widgets, allowing you to use just `StatefulWidget` to manage complex states declaratively and reactively.\n\n## Motivation\n\nThe motivation behind this package is to provide a simpler and more intuitive development experience for managing state in Flutter. Unlike other packages that require the use of custom widgets, `hook_state` allows you to use just `StatefulWidget`, making the code cleaner and easier to maintain. This package is ideal to be used alongside widgets like `ListenableBuilder` and `StreamBuilder`.\n\n## Installation\n\nAdd the dependency to your `pubspec.yaml`:\n\n```\nflutter pub add hook_state\n```\n\n## Usage\n\n### Basic Example\n\nHere is a basic example of how to use `hook_state` to manage a counter.\n\nFirst, create a new `StatefulWidget`. Then, use a `HookStateMixin` as a mixin in the State.\nAfter that, you can use the hook methods.\n\n```dart\nclass _ExampleWidgetState extends State\u003cExampleWidget\u003e with HookStateMixin {\n```\n\nYou can also use the `HookMixin` directly in the `Widget` class, replacing the `StatelessWidget`.\n\n```dart\nclass ExampleWidget extends StatelessWidget with HookMixin {\n\n  Widget build(BuildContext context) {\n    final counter = useNotifier\u003cint\u003e(0);\n    return Text('$value');\n  }\n}\n```\n\nNow you can use a hooks methods in the `build` method.\nThis example uses the `useNotifier` hook to manage a `ValueNotifier` and return its value.\n\n```dart\n@override\n  Widget build(BuildContext context) {\n    final counter = useNotifier\u003cint\u003e(0);\n    ...\n```\nSee the full example below:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:hook_state/hook_state.dart';\n\nclass ExampleWidget extends StatefulWidget {\n  @override\n  _ExampleWidgetState createState() =\u003e _ExampleWidgetState();\n}\n\nclass _ExampleWidgetState extends State\u003cExampleWidget\u003e with HookStateMixin {\n  @override\n  Widget build(BuildContext context) {\n    final counter = useNotifier\u003cint\u003e(0);\n\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Hook Example'),\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: \u003cWidget\u003e[\n            Text('You have pressed the button this many times:'),\n            Text(\n              '${counter.value}',\n              style: Theme.of(context).textTheme.headline4,\n            ),\n          ],\n        ),\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: () {\n          counter.value += 1;\n        },\n        tooltip: 'Increment',\n        child: Icon(Icons.add),\n      ),\n    );\n  }\n}\n```\n\n## Available Hooks\n\n| Hook                       | Description                                                |\n|----------------------------|------------------------------------------------------------|\n| `useValueNotifier`         | Create a `ValueNotifier` and returns its value             |\n| `useListenable`            | Listen a `Listenable` like `ChangeNotifier`                |\n| `useListenableChanged`     | Listen a `Listenable` and execute a callback               |\n| `useValueListenable`       | Listen a `ValueNotifier` and returns its value             |\n| `useStream`                | Listens to a `Stream` and returns the latest emitted value |\n| `useStreamChanged`         | Listen a `Listenable` and execute a callback               |\n| `useStreamController`      | Create a `StreamController`                                |\n| `useTextEditingController` | Manages a `TextEditingController`                          |\n| `useFocusNode`             | Manages a `FocusNode`                                      |\n| `useTabController`         | Manages a `TabController`                                  |\n| `useScrollController`      | Manages a `ScrollController`                               |\n| `usePageController`        | Manages a `PageController`                                 |\n| `useAnimationController`   | Manages an `AnimationController`                           |\n\n## Creating Custom Hooks\n\nYou can create custom hooks by extending `Hook` and using extensions. Here’s an example:\n\n### Custom Hook for `GlobalKey`\n\n#### Implementing the Custom Hook\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:hook_state/hook_state.dart';\n\nextension CustomHookStateExtension on HookState {\n  /// Registers a GlobalKeyHook to manage a GlobalKey.\n  /// Returns the created GlobalKey.\n  GlobalKey\u003cT\u003e useGlobalKey\u003cT extends State\u003cStatefulWidget\u003e\u003e() {\n    final hook = GlobalKeyHook\u003cT\u003e();\n    return use(hook).key;\n  }\n}\n\nclass GlobalKeyHook\u003cT extends State\u003cStatefulWidget\u003e\u003e extends Hook\u003cGlobalKey\u003cT\u003e\u003e {\n  late final GlobalKey\u003cT\u003e key;\n\n  GlobalKeyHook();\n\n  @override\n  void init() {\n    key = GlobalKey\u003cT\u003e();\n  }\n\n  @override\n  void dispose() {\n    // GlobalKey does not need to be disposed.\n  }\n}\n```\n\n#### Using the Custom Hook\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:hook_state/hook_state.dart';\n\nclass ExampleCustomHookWidget extends StatefulWidget {\n  @override\n  _ExampleCustomHookWidgetState createState() =\u003e _ExampleCustomHookWidgetState();\n}\n\nclass _ExampleCustomHookWidgetState extends State\u003cExampleCustomHookWidget\u003e with HookStateMixin {\n  @override\n  Widget build(BuildContext context) {\n    final key = useGlobalKey\u003c_CustomWidgetState\u003e();\n\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Custom Hook Example'),\n      ),\n      body: Center(\n        child: CustomWidget(key: key),\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: () {\n          key.currentState?.doSomething();\n        },\n        child: Icon(Icons.play_arrow),\n      ),\n    );\n  }\n}\n\nclass CustomWidget extends StatefulWidget {\n  CustomWidget({Key? key}) : super(key: key);\n\n  @override\n  _CustomWidgetState createState() =\u003e _CustomWidgetState();\n}\n\nclass _CustomWidgetState extends State\u003cCustomWidget\u003e {\n  void doSomething() {\n    print('Doing something!');\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: Text('Custom Widget'),\n    );\n  }\n}\n```\n\n\n## Contribution\n\nContributions are welcome! Feel free to open issues and pull requests on the GitHub repository.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for more information.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutterando%2Fhook_state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutterando%2Fhook_state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutterando%2Fhook_state/lists"}