github.com/rrousselGit/flutter_hooks(開始URL: https://github.com/rrousselGit/flutter_hooks?tab=readme-ov-file#existing-hooks)の翻訳及び補足をしてあります。
本ブログの(上記flutter_hooksの)翻訳および解説の目次頁(構成上のトップページ)は次のURLになります。
Flutter Hooks
参照:ReactフックのFlutter実装: (https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 )
フックはウィジェットのライフサイクルを管理する新しい種類のオブジェクトです。
フックが存在する理由はひとつ、重複を取り除くことでウィジェット間のコード共有を増やすためです。
1.Motivation
2.Principle
3.Rules
4.About hot-reload
5.How to create a hook
6.Existing hooks
Flutter_Hooksにはすでに再利用可能なHooks のリストが付属しており、それらは様々な種類に分かれている:
6-1.Primitives
ウィジェットのさまざまなライフサイクルと相互作用する低レベルHooks のセットです。
| Hooks名 | 機能説明 |
|---|---|
| useEffect | 副作用や、オプションで副作用をキャンセルするのに便利。 |
| useState | 変数を作成し、その変数を購読する。 |
| useMemoized | 複合オブジェクトのインスタンスをキャッシュします。 |
| useRef | 変更可能なプロパティを1つ持つオブジェクトを作成します。 |
| useCallback | 関数インスタンスをキャッシュします。 |
| useContext | ビルド中のHookWidgetのBuildContextを取得します。 |
| useValueChanged | 値を監視し、値が変更されるたびにコールバックをトリガする。 |
6-2.Object-binding
このカテゴリのHooks は、既存のFlutter/DartオブジェクトをHooks で操作する。
オブジェクトの作成/更新/破棄を引き受けてくれる。
6-2-1.dart:async 関連 hooks:
| Hooks名 | 機能説明 |
|---|---|
| useStream | Stream にサブスクライブし、その現在の状態を AsyncSnapshot として返します。 |
| useStreamController | 自動的に破棄される StreamController を作成します。 |
| useOnStreamChange | Stream にサブスクライブし、ハンドラを登録し、StreamSubscription を返します。 |
| useFuture | Future にサブスクライブし、その現在の状態を AsyncSnapshot として返します。 |
6-2-2.Animation 関連 hooks:
| Hooks名 | 機能説明 |
|---|---|
| useSingleTickerProvider | 単一の使用法の TickerProvider を作成します。 |
| useAnimationController | 自動的に破棄される AnimationController を作成します。 |
| useAnimation | Animation を購読し、その値を返します。 |
6-2-3.Listenable 関連 hooks:
| Hooks名 | 機能説明 |
|---|---|
| useListenable | SListenable を購読し、リスナーが呼び出されるたびに、ウィジェットをビルドする必要があるとマークします。 |
| useListenableSelector | useListenableと似ているが、UIの再構築をフィルタリングできる。 |
| useValueNotifier | 自動的に破棄される ValueNotifier を作成します。 |
| useValueListenable | ValueListenable をサブスクライブし、その値を返します。 |
| useOnListenableChange | 指定されたリスナーのコールバックを自動的に削除される Listenable に追加します。 |
6-2-4.その他の hooks:
| Hooks名 | 機能説明 |
|---|---|
| useReducer | より複雑な状態のための useState の代替。 |
| usePrevious | [usePrevious]に呼び出された前の引数を返す。 |
| useTextEditingController | TextEditingController を作成します。 |
| useFocusNode | FocusNode を作成します。 |
| useTabController | TabController を作成し、破棄します。 |
| useScrollController | ScrollController を作成し、破棄します。 |
| usePageController | PageController を作成し、破棄します。 |
| useFixedExtentScrollController | FixedExtentScrollController を作成し、破棄します。 |
| useAppLifecycleState | 現在のAppLifecycleStateを返し、変更時にウィジェットを再構築します。 |
| useOnAppLifecycleStateChange | AppLifecycleStateの変更をリッスンし、変更時にコールバックをトリガーする。 |
| useTransformationController | TransformationController を作成し、破棄します。 |
| useIsMounted | State.mountedに相当するフック。 |
| useAutomaticKeepAlive | フック用のAutomaticKeepAliveウィジェットに相当するもの。 |
| useOnPlatformBrightnessChange | プラットフォームの明るさの変更をリッスンし、変更時にコールバックをトリガーする。 |
| useSearchController | SearchController を作成し、破棄します。 |
| useWidgetStatesController | WidgetStatesController を作成し、破棄します。 |
| useExpansionTileController | ExpansionTileControllerを作成します。 |
| useDebounced | 提供された値のデバウンスバージョンを返し、指定されたタイムアウト時間後にそれに応じてウィジェットの更新をトリガーする |
| useDraggableScrollableController | DraggableScrollableController を作成します。 |