Committed by
GitHub
Merge pull request #1887 from toshi-kuji/translate-readme-tojapanese
Translated readme and documents into Japanese
Showing
4 changed files
with
3013 additions
and
0 deletions
README.ja-JP.md
0 → 100644
| 1 | + | ||
| 2 | + | ||
| 3 | +[](https://pub.dev/packages/get) | ||
| 4 | +[](https://pub.dev/packages/get/score) | ||
| 5 | + | ||
| 6 | +[](https://pub.dev/packages/effective_dart) | ||
| 7 | +[](https://discord.com/invite/9Hpt99N) | ||
| 8 | +[](https://communityinviter.com/apps/getxworkspace/getx) | ||
| 9 | +[](https://t.me/joinchat/PhdbJRmsZNpAqSLJL6bH7g) | ||
| 10 | +<a href="https://github.com/Solido/awesome-flutter"> | ||
| 11 | +<img alt="Awesome Flutter" src="https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square" /> | ||
| 12 | +</a> | ||
| 13 | +<a href="https://www.buymeacoffee.com/jonataslaw" target="_blank"><img src="https://i.imgur.com/aV6DDA7.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important; box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" > </a> | ||
| 14 | + | ||
| 15 | + | ||
| 16 | + | ||
| 17 | + | ||
| 18 | +<div align="center"> | ||
| 19 | + | ||
| 20 | +**言語** | ||
| 21 | + | ||
| 22 | + | ||
| 23 | +[](README.md) | ||
| 24 | +[](README-vi.md) | ||
| 25 | +[](README.id-ID.md) | ||
| 26 | +[](README.ur-PK.md) | ||
| 27 | +[](README.zh-cn.md) | ||
| 28 | +[](README.pt-br.md) | ||
| 29 | +[](README-es.md) | ||
| 30 | +[](README.ru.md) | ||
| 31 | +[](README.pl.md) | ||
| 32 | +[](README.ko-kr.md) | ||
| 33 | +[](README-fr.md) | ||
| 34 | +[](README-ja.md) | ||
| 35 | + | ||
| 36 | +</div> | ||
| 37 | + | ||
| 38 | +- [Getとは](#Getとは) | ||
| 39 | +- [インストール方法](#インストール方法) | ||
| 40 | +- [GetXによるカウンターアプリ](#GetXによるカウンターアプリ) | ||
| 41 | +- [三本柱](#三本柱) | ||
| 42 | + - [状態管理](#状態管理) | ||
| 43 | + - [リアクティブな状態管理](#リアクティブな状態管理) | ||
| 44 | + - [状態管理に関する詳細ドキュメント](#状態管理に関する詳細ドキュメント) | ||
| 45 | + - [Route管理](#Route管理) | ||
| 46 | + - [Route管理に関する詳細ドキュメント](#Route管理に関する詳細ドキュメント) | ||
| 47 | + - [依存オブジェクト管理](#依存オブジェクト管理) | ||
| 48 | + - [依存オブジェクト管理に関する詳細ドキュメント](#依存オブジェクト管理に関する詳細ドキュメント) | ||
| 49 | +- [ユーティリティ](#ユーティリティ) | ||
| 50 | + - [多言語対応](#多言語対応) | ||
| 51 | + - [翻訳ファイル](#翻訳ファイル) | ||
| 52 | + - [翻訳ファイルの利用](#翻訳ファイルの利用) | ||
| 53 | + - [ロケール](#ロケール) | ||
| 54 | + - [ロケールの変更](#ロケールの変更) | ||
| 55 | + - [システムのロケールを読み込む](#システムのロケールを読み込む) | ||
| 56 | + - [Themeの変更](#Themeの変更) | ||
| 57 | + - [GetConnect](#getconnect) | ||
| 58 | + - [デフォルト設定](#デフォルト設定) | ||
| 59 | + - [カスタム設定](#カスタム設定) | ||
| 60 | + - [GetPageにミドルウェアを設定](#GetPageにミドルウェアを設定) | ||
| 61 | + - [実行優先度](#実行優先度) | ||
| 62 | + - [redirect](#redirect) | ||
| 63 | + - [onPageCalled](#onpagecalled) | ||
| 64 | + - [onBindingsStart](#onbindingsstart) | ||
| 65 | + - [onPageBuildStart](#onpagebuildstart) | ||
| 66 | + - [onPageBuilt](#onpagebuilt) | ||
| 67 | + - [onPageDispose](#onpagedispose) | ||
| 68 | + - [その他API](#その他API) | ||
| 69 | + - [オプションのグローバル設定と手動設定](#オプションのグローバル設定と手動設定) | ||
| 70 | + - [ローカルステートWidget](#ローカルステートWidget) | ||
| 71 | + - [ValueBuilder](#valuebuilder) | ||
| 72 | + - [ObxValue](#obxvalue) | ||
| 73 | + - [お役立ちTIPS](#お役立ちTIPS) | ||
| 74 | + - [StateMixin](#statemixin) | ||
| 75 | + - [GetView](#getview) | ||
| 76 | + - [GetResponsiveView](#getresponsiveview) | ||
| 77 | + - [使い方](#使い方]) | ||
| 78 | + - [GetWidget](#getwidget) | ||
| 79 | + - [GetxService](#getxservice) | ||
| 80 | + - [テストの実行](#テストの実行) | ||
| 81 | + - [mockitoやmocktailを使う場合](#mockitoやmocktailを使う場合) | ||
| 82 | + - [Get.reset()](#Get.reset()) | ||
| 83 | + - [Get.testMode](#Get.testMode) | ||
| 84 | +- [バージョン2.0からの破壊的変更](#バージョン2.0からの破壊的変更) | ||
| 85 | +- [なぜGetXなのか](#なぜGetXなのか) | ||
| 86 | +- [コミュニティ](#コミュニティ) | ||
| 87 | + - [コミュニティチャンネル](#コミュニティチャンネル) | ||
| 88 | + - [コントリビュート方法](#コントリビュート方法) | ||
| 89 | + - [GetXに関する記事と動画](#GetXに関する記事と動画) | ||
| 90 | + | ||
| 91 | +# Getとは | ||
| 92 | + | ||
| 93 | +- GetXはFlutterのための超軽量でパワフルなソリューションです。高パフォーマンスな状態管理機能、インテリジェントな依存オブジェクト管理機能、そしてRoute管理機能の三本柱を軽量かつ実用的な形で組み合わせています。 | ||
| 94 | + | ||
| 95 | +- GetXは3つの基本原則を念頭に開発されています。 **【生産性、パフォーマンス、コードの分離性】** これらはライブラリ内のすべてのリソースに優先適用されている原則です。 | ||
| 96 | + | ||
| 97 | + - **パフォーマンス:** GetXは高いパフォーマンスと最小限のリソース消費を目標にしています。GetXはでは Stream および ChangeNotifier を利用しなくて済みます。 | ||
| 98 | + | ||
| 99 | + - **生産性:** GetXはシンプルで使い心地のいいシンタックスを採用しています。あなたの実現したい機能がどんなものであれ、GetXを使えばより簡単に実現できる方法が見つかるでしょう。開発にかかる時間を短縮し、あなたのアプリケーションのパフォーマンスを最大限引き出してくれます。 | ||
| 100 | + | ||
| 101 | + 開発者はメモリリソースの管理に気を配るのが常です。しかしGetXでは、リソースが使用されていないときはメモリから削除されるのがデフォルト動作のため、過度に気にかける必要はありません。（逆にメモリに残しておきたい場合は、依存オブジェクトをインスタンス化するメソッドを使う際に「permanent: true」と宣言してください）これにより時間が節約できますし、不要な依存オブジェクトがメモリ上に残るリスクも少なくなります。メモリへの読み込みについてもデフォルトは遅延読み込みであり、使用するときに初めてメモリ上に読み込まれます。 | ||
| 102 | + | ||
| 103 | + - **コードの分離性:** GetXを使うと、ビュー、プレゼンテーションロジック、ビジネスロジック、依存オブジェクトの注入、およびナビゲーション周りのコードを書き分けやすくなります。Routeのナビゲーションにはcontextを必要としないため、Widgetツリーに依存することはありません。ロジックについてもInheritedWidget経由でController/BLoCにアクセスする際のcontextは必要ありません。プレゼンテーションロジックとビジネスロジックをUIクラスから完全に切り離すことができます。また、Controller/モデル/BLoCのクラスを、`MultiProvider`を使ってWidgetツリーに注入する必要もありません。GetXでは独自の依存オブジェクト注入機能を使用し、ビュークラスからビューとは無関係なコードをなくすことができるのです。 | ||
| 104 | + | ||
| 105 | + GetXを使うことでアプリケーションの各機能がどこにあるのかがわかりやすくなり、自然と見やすいコードになります。メンテナンスが容易になるだけでなく、それまでのFlutterでは考えられなかったモジュール共有が簡単に実現できるようになりました。 | ||
| 106 | + BLoCはこの分野におけるFlutterの出発点と言えるものでしたが、GetXはこれを正統進化させており、ビジネスロジックのみならずプレゼンテーションロジックも分離することができます。そのほかデータレイヤーはもちろん、依存オブジェクトやRouteの注入に関するコードも。どこに何が配置されているのか全体の見通しがしやすくなり、Hello Worldを表示させるかのように簡単にアプリの機能を利用できるようになるでしょう。 | ||
| 107 | + Flutterアプリを作るならGetXは最も簡単で実用的、かつスケーラブルなソリューションです。強力なエコシステムも存在があるため、初心者にはわかりやすさ、プロには正確性を提供することができます。そしてFlutter SDKにはない幅広い種類のAPIを提供し、セキュアで安定的な環境を構築します。 | ||
| 108 | + | ||
| 109 | +- GetXは肥大化したライブラリではありません。何も気にせずすぐに開発を始められるよう多数の機能を標準で備えていますが、それぞれの機能は個別にコンテナに入っており、使用してはじめて起動します。状態管理機能しか利用していない場合はその機能だけがコンパイルされます。Route管理機能だけを利用していれば、状態管理機能がコンパイルされることはありません。 | ||
| 110 | + | ||
| 111 | +- GetXには巨大なエコシステム、コミュニティ、コラボレーターの存在があるため、Flutterが存在する限りメンテナンスされ続けます。またGetXもFlutterと同様にAndroid、iOS、Web、Mac、Linux、Windows、そしてあなたのサーバー上で、単一のコードから実行することができます。 | ||
| 112 | + | ||
| 113 | +**[Get Server](https://github.com/jonataslaw/get_server)を使うことで、フロントエンドで作成したコードをバックエンドで再利用することが可能です。** | ||
| 114 | + | ||
| 115 | +**さらに、[Get CLI](https://github.com/jonataslaw/get_cli)を使えば、サーバー側でもフロントエンド側でも開発プロセス全体を自動化することができます。** | ||
| 116 | + | ||
| 117 | +**また、生産性をさらに高めるためのツールとして、[VSCode用の拡張機能](https://marketplace.visualstudio.com/items?itemName=get-snippets.get-snippets) と [Android Studio/Intellij用の拡張機能](https://plugins.jetbrains.com/plugin/14975-getx-snippets)があります。** | ||
| 118 | + | ||
| 119 | +# インストール方法 | ||
| 120 | + | ||
| 121 | +Getパッケージを pubspec.yaml に追加します: | ||
| 122 | + | ||
| 123 | +```yaml | ||
| 124 | +dependencies: | ||
| 125 | + get: | ||
| 126 | +``` | ||
| 127 | + | ||
| 128 | +使用するときはこのようにインポートしてください: | ||
| 129 | + | ||
| 130 | +```dart | ||
| 131 | +import 'package:get/get.dart'; | ||
| 132 | +``` | ||
| 133 | + | ||
| 134 | +# GetXによるカウンターアプリ | ||
| 135 | + | ||
| 136 | +Flutterで新規プロジェクトを作成する際に表示されるカウンターアプリは、コメントを含めると100行以上あります。Getの実力を示すため、このカウンターアプリを可読性を重視した形で、コメントを含めてわずか26行のコードで作成する方法を紹介します。 | ||
| 137 | + | ||
| 138 | +- ステップ1: | ||
| 139 | + MaterialAppの前に「Get」を足して、GetMaterialAppにします。 | ||
| 140 | + | ||
| 141 | +```dart | ||
| 142 | +void main() => runApp(GetMaterialApp(home: Home())); | ||
| 143 | +``` | ||
| 144 | + | ||
| 145 | +- 注1: GetMaterialAppはFlutterのMaterialAppに手を加えたものではありません。MaterialAppをchildに持ち、諸々の追加設定をしてくれるWidgetに過ぎません。この設定は手動でも可能ですが、その必要はありません。GetMaterialAppは、Routeの作成・注入、言語翻訳の注入など、ナビゲーションに必要なものをすべて注入してくれます。Getを状態管理や依存オブジェクト管理に限定して使用する場合は、GetMaterialAppを使用する必要はありません。GetMaterialAppは、Route、SnackBar、多言語対応、BottomSheet、Dialog、contextなしの高レベルAPIを利用する場合に必要です。 | ||
| 146 | +- 注2: このステップは、Route管理機能（`Get.to()`や`Get.back()`など）を使用しない場合は、必要ありません。 | ||
| 147 | + | ||
| 148 | +- ステップ2: | ||
| 149 | + ビジネスロジッククラスを作成し、そこに必要な変数、メソッド、コントローラをすべて配置します。 | ||
| 150 | + 変数に ".obs" を付け足すことで、その変数の値の変化を監視することが可能になります。 | ||
| 151 | + | ||
| 152 | +```dart | ||
| 153 | +class Controller extends GetxController{ | ||
| 154 | + var count = 0.obs; | ||
| 155 | + increment() => count++; | ||
| 156 | +} | ||
| 157 | +``` | ||
| 158 | + | ||
| 159 | +- ステップ3: | ||
| 160 | + ビューを作成します。StatelessWidgetを使用することでRAMが節約できます。GetではStatefulWidgetを使用する必要がなくなるかもしれません。 | ||
| 161 | + | ||
| 162 | +```dart | ||
| 163 | +class Home extends StatelessWidget { | ||
| 164 | + | ||
| 165 | + @override | ||
| 166 | + Widget build(context) { | ||
| 167 | + | ||
| 168 | + // Get.put()を使ってクラスをインスタンス化することですべての子Routeで利用できるようになります。 | ||
| 169 | + final Controller c = Get.put(Controller()); | ||
| 170 | + | ||
| 171 | + return Scaffold( | ||
| 172 | + // countが変わるたびにTextを更新するにはObx(()=>)を使ってください。 | ||
| 173 | + appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))), | ||
| 174 | + | ||
| 175 | + // 8行使っていたNavigator.pushの代わりに短い Get.to()を使ってください。context不要です。 | ||
| 176 | + body: Center(child: ElevatedButton( | ||
| 177 | + child: Text("Go to Other"), onPressed: () => Get.to(Other()))), | ||
| 178 | + floatingActionButton: | ||
| 179 | + FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment)); | ||
| 180 | + } | ||
| 181 | +} | ||
| 182 | + | ||
| 183 | +class Other extends StatelessWidget { | ||
| 184 | + // 他のページで使われているコントローラーを見つけてきてくれます。 | ||
| 185 | + final Controller c = Get.find(); | ||
| 186 | + | ||
| 187 | + @override | ||
| 188 | + Widget build(context){ | ||
| 189 | + // 最新のcount変数の値にアクセス | ||
| 190 | + return Scaffold(body: Center(child: Text("${c.count}"))); | ||
| 191 | + } | ||
| 192 | +} | ||
| 193 | +``` | ||
| 194 | + | ||
| 195 | +Result: | ||
| 196 | + | ||
| 197 | + | ||
| 198 | + | ||
| 199 | +これはシンプルな例ですが、すでにGetがいかに強力であるかがわかると思います。プロジェクトが大きければ大きいほど、この差はもっと開くでしょう。 | ||
| 200 | + | ||
| 201 | +Getはチームでの作業を想定して設計されていますが、個人開発者の仕事もシンプルにしてくれます。 | ||
| 202 | + | ||
| 203 | +パフォーマンスを落とさず納期までにすべて納品。Getはすべての人に向いているわけではありませんが、このフレーズにぴんと来た人には確実に向いています！ | ||
| 204 | + | ||
| 205 | +# 三本柱 | ||
| 206 | + | ||
| 207 | +## 状態管理 | ||
| 208 | + | ||
| 209 | +Getの状態管理には、非リアクティブ（GetBuilder）と、リアクティブ（GetX/Obx）の2つのアプローチがあります。 | ||
| 210 | + | ||
| 211 | +### リアクティブな状態管理 | ||
| 212 | + | ||
| 213 | +リアクティブプログラミングは複雑であると言われ、多くの人に敬遠されています。GetXは、リアクティブプログラミングをシンプルなものに変えます: | ||
| 214 | + | ||
| 215 | +* StreamControllerを作る必要はありません。 | ||
| 216 | +* 変数ごとにStreamBuilderをセットする必要はありません。 | ||
| 217 | +* 状態ごとにクラスを作る必要はありません。 | ||
| 218 | +* 初期値のためにgetを準備する必要はありません。 | ||
| 219 | +- コードの自動生成をする必要がありません。 | ||
| 220 | + | ||
| 221 | +GetにおけるリアクティブプログラミングはsetStateと同じように簡単です。 | ||
| 222 | + | ||
| 223 | +例えば、名前の変数があって、それを変更するたびに、その名前を使っているすべてのWidgetを自動で更新したい場合。 | ||
| 224 | + | ||
| 225 | +```dart | ||
| 226 | +var name = 'Jonatas Borges'; | ||
| 227 | +``` | ||
| 228 | + | ||
| 229 | +このnameをObservable(監視可能)にするには, ".obs"を値の末尾に付けるだけです。 | ||
| 230 | + | ||
| 231 | +```dart | ||
| 232 | +var name = 'Jonatas Borges'.obs; | ||
| 233 | +``` | ||
| 234 | + | ||
| 235 | +UIでその値を表示し、値が変わるたびに内容を更新したい場合は次のようにします。 | ||
| 236 | + | ||
| 237 | +```dart | ||
| 238 | +Obx(() => Text("${controller.name}")); | ||
| 239 | +``` | ||
| 240 | + | ||
| 241 | +以上です。こんなに簡単なんですよ。 | ||
| 242 | + | ||
| 243 | +### 状態管理に関する詳細ドキュメント | ||
| 244 | + | ||
| 245 | +**状態管理に関するより詳細な説明を知りたい方は[こちらの日本語ドキュメント](./documentation/ja_JP/state_management.md)をご覧ください。多くの事例や、非リアクティブな状態管理とリアクティブな状態管理の違いについても説明されています。** | ||
| 246 | + | ||
| 247 | +GetXパワーがもたらす利点をより理解していただけると思います。 | ||
| 248 | + | ||
| 249 | +## Route管理 | ||
| 250 | + | ||
| 251 | +GetXはcontextなしでRoute/SnackBar/Dialog/BottomSheetを使用することができます。具体的に見ていきましょう。 | ||
| 252 | + | ||
| 253 | +いつものMaterialAppの前に「Get」を付け足して、GetMaterialAppにしましょう。 | ||
| 254 | + | ||
| 255 | +```dart | ||
| 256 | +GetMaterialApp( // MaterialApp の前に Get | ||
| 257 | + home: MyHome(), | ||
| 258 | +) | ||
| 259 | +``` | ||
| 260 | + | ||
| 261 | +新しいRouteに画面遷移するにはこのシンタックス。 | ||
| 262 | + | ||
| 263 | +```dart | ||
| 264 | +Get.to(NextScreen()); | ||
| 265 | +``` | ||
| 266 | + | ||
| 267 | +名前付きRouteに画面遷移するにはこのシンタックス。名前付きRouteの詳細は[こちらの日本語ドキュメント](./documentation/ja_JP/route_management.md#navigation-with-named-routes) | ||
| 268 | + | ||
| 269 | +```dart | ||
| 270 | +Get.toNamed('/details'); | ||
| 271 | +``` | ||
| 272 | + | ||
| 273 | +SnackBar、Dialog、BottomSheetなど、Navigator.pop(context)で閉じられるRouteはこれで閉じます。 | ||
| 274 | + | ||
| 275 | +```dart | ||
| 276 | +Get.back(); | ||
| 277 | +``` | ||
| 278 | + | ||
| 279 | +次の画面に移動した後、前の画面に戻れないようにする場合（スプラッシュスクリーンやログイン画面など）はこちら。 | ||
| 280 | + | ||
| 281 | +```dart | ||
| 282 | +Get.off(NextScreen()); | ||
| 283 | +``` | ||
| 284 | + | ||
| 285 | +次の画面に進み、前のRouteをすべてキャンセルする場合（ショッピングカート、アンケート、テストなど）はこちら。 | ||
| 286 | + | ||
| 287 | +```dart | ||
| 288 | +Get.offAll(NextScreen()); | ||
| 289 | +``` | ||
| 290 | + | ||
| 291 | +以上、contextを一度も使わなかったことに気付きましたか？これがGetでRoute管理を行う最大のメリットのひとつです。contextを使わないので、たとえばcontrollerクラスの中でも、これらのメソッドを実行することができます。 | ||
| 292 | + | ||
| 293 | +### Route管理に関する詳細ドキュメント | ||
| 294 | + | ||
| 295 | +**Getは名前付きRouteでも動作し、Routeの下位レベルの制御も可能です。詳細なドキュメントは[こちらの日本語ドキュメント](./documentation/ja_JP/route_management.md)にあります。** | ||
| 296 | + | ||
| 297 | +## 依存オブジェクト管理 | ||
| 298 | + | ||
| 299 | +Getにはシンプルで強力な依存オブジェクト注入機能があります。わずか1行のコードで、Provider contextやinheritedWidgetも使わず、BLoCやControllerのようなクラスのインスタンスを取得することができます。 | ||
| 300 | + | ||
| 301 | +```dart | ||
| 302 | +Controller controller = Get.put(Controller()); // controller = Controller() とする代わりに | ||
| 303 | +``` | ||
| 304 | + | ||
| 305 | +- 注: Getの状態管理機能を使用している場合は、Bindings APIにもご注目を。BindingsはビューとControllerを結びつけるのをより便利にしてくれます。 | ||
| 306 | + | ||
| 307 | +一つのクラスの中でControllerクラスをインスタンス化するのではなく、Getインスタンスの中でインスタンス化することで、アプリ全体でControllerが利用できるようになります。 | ||
| 308 | + | ||
| 309 | +**ヒント:** Getの依存オブジェクト注入機能の部分は、パッケージ全体の中でも他の部分と切り離されているので、たとえば、あなたのアプリがすでに状態管理機能を一部で使用していたとしても、それらを書き直す必要はなく、この依存オブジェクト注入機能をそのまま使用することができます。 | ||
| 310 | + | ||
| 311 | +```dart | ||
| 312 | +controller.fetchApi(); | ||
| 313 | +``` | ||
| 314 | + | ||
| 315 | +色々なRouteを行き来した後に、あるControllerクラスのデータにアクセスする必要が生じたとしましょう。ProviderやGet_itなら再びそのクラスに依存オブジェクトを注入する必要がありますよね？Getの場合は違います。Getでは「find」と依頼するだけで、追加の依存オブジェクトの注入は必要ありません。 | ||
| 316 | + | ||
| 317 | +```dart | ||
| 318 | +Controller controller = Get.find(); | ||
| 319 | +//マジックみたいですね。Getは正しいcontrollerをきちんと探してきてくれますよ。100万のcontrollerのインスタンスがあっても、Getは必ず正しいcontrollerを探し当てます。 | ||
| 320 | +``` | ||
| 321 | + | ||
| 322 | +そして、findで取得したコントローラーのデータをこのように呼び出すことができます。 | ||
| 323 | + | ||
| 324 | +```dart | ||
| 325 | +Text(controller.textFromApi); | ||
| 326 | +``` | ||
| 327 | + | ||
| 328 | +### 依存オブジェクト管理に関する詳細ドキュメント | ||
| 329 | + | ||
| 330 | +**依存オブジェクト管理に関するより詳細な説明は[こちらの日本語ドキュメント](./documentation/ja_JP/dependency_management.md)をご覧ください。** | ||
| 331 | + | ||
| 332 | +# ユーティリティ | ||
| 333 | + | ||
| 334 | +## 多言語対応 | ||
| 335 | + | ||
| 336 | +### 翻訳ファイル | ||
| 337 | + | ||
| 338 | +翻訳ファイルはシンプルなキーと値のMapとして保持されます。 | ||
| 339 | +翻訳を追加するには、クラスを作成して `Translations` を継承します。 | ||
| 340 | + | ||
| 341 | +```dart | ||
| 342 | +import 'package:get/get.dart'; | ||
| 343 | + | ||
| 344 | +class Messages extends Translations { | ||
| 345 | + @override | ||
| 346 | + Map<String, Map<String, String>> get keys => { | ||
| 347 | + 'en_US': { | ||
| 348 | + 'hello': 'Hello World', | ||
| 349 | + }, | ||
| 350 | + 'de_DE': { | ||
| 351 | + 'hello': 'Hallo Welt', | ||
| 352 | + } | ||
| 353 | + }; | ||
| 354 | +} | ||
| 355 | +``` | ||
| 356 | + | ||
| 357 | +#### 翻訳ファイルの利用 | ||
| 358 | + | ||
| 359 | +指定されたキーに `.tr` （translateのtr）を追加するだけで、`Get.locale` と `Get.fallbackLocale` の現在の値をに沿って適切な言語に翻訳されます。 | ||
| 360 | + | ||
| 361 | +```dart | ||
| 362 | +Text('title'.tr); | ||
| 363 | +``` | ||
| 364 | + | ||
| 365 | +#### 単数系と複数形に対応 | ||
| 366 | + | ||
| 367 | +```dart | ||
| 368 | +var products = []; | ||
| 369 | +Text('singularKey'.trPlural('pluralKey', products.length, Args)); | ||
| 370 | +``` | ||
| 371 | + | ||
| 372 | +#### パラメーターに対応 | ||
| 373 | + | ||
| 374 | +```dart | ||
| 375 | +import 'package:get/get.dart'; | ||
| 376 | + | ||
| 377 | + | ||
| 378 | +Map<String, Map<String, String>> get keys => { | ||
| 379 | + 'en_US': { | ||
| 380 | + 'logged_in': 'logged in as @name with email @email', | ||
| 381 | + }, | ||
| 382 | + 'es_ES': { | ||
| 383 | + 'logged_in': 'iniciado sesión como @name con e-mail @email', | ||
| 384 | + } | ||
| 385 | +}; | ||
| 386 | + | ||
| 387 | +Text('logged_in'.trParams({ | ||
| 388 | + 'name': 'Jhon', | ||
| 389 | + 'email': 'jhon@example.com' | ||
| 390 | + })); | ||
| 391 | +``` | ||
| 392 | + | ||
| 393 | +### ロケール | ||
| 394 | + | ||
| 395 | +ロケールと翻訳を定義するため、`GetMaterialApp`にパラメータを渡します。 | ||
| 396 | + | ||
| 397 | +```dart | ||
| 398 | +return GetMaterialApp( | ||
| 399 | + translations: Messages(), // Translationsを継承したクラスのインスタンス | ||
| 400 | + locale: Locale('en', 'US'), // このロケール設定に沿って翻訳が表示される | ||
| 401 | + fallbackLocale: Locale('en', 'UK'), // 無効なロケールだったときのフォールバックを指定 | ||
| 402 | +); | ||
| 403 | +``` | ||
| 404 | + | ||
| 405 | +#### ロケールの変更 | ||
| 406 | + | ||
| 407 | +ロケールを変更するには、`Get.updateLocale(locale)`を呼び出します。翻訳は新しいロケールに沿ってなされます。 | ||
| 408 | + | ||
| 409 | +```dart | ||
| 410 | +var locale = Locale('en', 'US'); | ||
| 411 | +Get.updateLocale(locale); | ||
| 412 | +``` | ||
| 413 | + | ||
| 414 | +#### システムのロケールを読み込む | ||
| 415 | + | ||
| 416 | +システムのロケールを読み込むには、`Get.deviceLocale`を使用します。 | ||
| 417 | + | ||
| 418 | +```dart | ||
| 419 | +return GetMaterialApp( | ||
| 420 | + locale: Get.deviceLocale, | ||
| 421 | +); | ||
| 422 | +``` | ||
| 423 | + | ||
| 424 | +## Themeの変更 | ||
| 425 | + | ||
| 426 | +`GetMaterialApp`より上位のWidgetを使ってThemeを変更しないでください。Keyの重複を引き起こす可能性があります。アプリのThemeを変更するためには「ThemeProvider」Widgetを作成するという前時代的なアプローチが採られることが多いですが、**GetX™**ではこのようなことは必要ありません。 | ||
| 427 | + | ||
| 428 | +カスタムのThemeDataを作成したら、それを`Get.changeTheme`内に追加するだけです。 | ||
| 429 | + | ||
| 430 | +```dart | ||
| 431 | +Get.changeTheme(ThemeData.light()); | ||
| 432 | +``` | ||
| 433 | + | ||
| 434 | +もし、`onTap`でThemeを変更するボタンを作りたいのであれば、以下の2つの**GetX™** APIを組み合わせることができます。 | ||
| 435 | + | ||
| 436 | +- Dark Theme が使われているかどうかをチェックするAPI | ||
| 437 | +- Theme を変えるAPI（ボタンの`onPressed`の中に設置できます） | ||
| 438 | + | ||
| 439 | +```dart | ||
| 440 | +Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark()); | ||
| 441 | +``` | ||
| 442 | + | ||
| 443 | +Darkモードが有効であれば、_light theme_に切り替わり、Lightモードが有効なら、_dark theme_に切り替わります。 | ||
| 444 | + | ||
| 445 | +## GetConnect | ||
| 446 | + | ||
| 447 | +GetConnect は、http または websocket を使用してバックエンドとフロントエンド間の通信を行う機能です。 | ||
| 448 | + | ||
| 449 | +### デフォルト設定 | ||
| 450 | + | ||
| 451 | +GetConnectを拡張することで、GET/POST/PUT/DELETE/SOCKETメソッドを使用して、Rest APIやウェブソケットと通信することができます。 | ||
| 452 | + | ||
| 453 | +```dart | ||
| 454 | +class UserProvider extends GetConnect { | ||
| 455 | + // Get リクエスト | ||
| 456 | + Future<Response> getUser(int id) => get('http://youapi/users/$id'); | ||
| 457 | + // Post リクエスト | ||
| 458 | + Future<Response> postUser(Map data) => post('http://youapi/users', body: data); | ||
| 459 | + // File付き Post リクエスト | ||
| 460 | + Future<Response<CasesModel>> postCases(List<int> image) { | ||
| 461 | + final form = FormData({ | ||
| 462 | + 'file': MultipartFile(image, filename: 'avatar.png'), | ||
| 463 | + 'otherFile': MultipartFile(image, filename: 'cover.png'), | ||
| 464 | + }); | ||
| 465 | + return post('http://youapi/users/upload', form); | ||
| 466 | + } | ||
| 467 | + | ||
| 468 | + GetSocket userMessages() { | ||
| 469 | + return socket('https://yourapi/users/socket'); | ||
| 470 | + } | ||
| 471 | +} | ||
| 472 | +``` | ||
| 473 | + | ||
| 474 | +### カスタム設定 | ||
| 475 | + | ||
| 476 | +GetConnect は高度なカスタマイズが可能です。ベースUrlの定義はもちろん、リクエストヘッダーを足したり、レスポンスボディに変更を加えたり、認証情報を追加したり、認証回数の制限を設けたりすることができるほか、リクエストをModelに変換するデコーダを定義することもできます。 | ||
| 477 | + | ||
| 478 | +```dart | ||
| 479 | +class HomeProvider extends GetConnect { | ||
| 480 | + @override | ||
| 481 | + void onInit() { | ||
| 482 | + // デフォルトデコーダーをセット | ||
| 483 | + httpClient.defaultDecoder = CasesModel.fromJson; | ||
| 484 | + httpClient.baseUrl = 'https://api.covid19api.com'; | ||
| 485 | + // baseUrlをセット | ||
| 486 | + | ||
| 487 | + // リクエストヘッダーに 'apikey' プロパティを付け足しています。 | ||
| 488 | + httpClient.addRequestModifier((request) { | ||
| 489 | + request.headers['apikey'] = '12345678'; | ||
| 490 | + return request; | ||
| 491 | + }); | ||
| 492 | + | ||
| 493 | + // サーバーが"Brazil"を含むデータを送ってきてもユーザーに表示されることはありません。 | ||
| 494 | + // レスポンスがUIレイヤーに届けられる前にデータが取り除かれているからです。 | ||
| 495 | + httpClient.addResponseModifier<CasesModel>((request, response) { | ||
| 496 | + CasesModel model = response.body; | ||
| 497 | + if (model.countries.contains('Brazil')) { | ||
| 498 | + model.countries.remove('Brazilll'); | ||
| 499 | + } | ||
| 500 | + }); | ||
| 501 | + | ||
| 502 | + httpClient.addAuthenticator((request) async { | ||
| 503 | + final response = await get("http://yourapi/token"); | ||
| 504 | + final token = response.body['token']; | ||
| 505 | + // ヘッダーをセット | ||
| 506 | + request.headers['Authorization'] = "$token"; | ||
| 507 | + return request; | ||
| 508 | + }); | ||
| 509 | + | ||
| 510 | + // HttpStatus が HttpStatus.unauthorized である限り、 | ||
| 511 | + // 3回まで認証が試みられます。 | ||
| 512 | + httpClient.maxAuthRetries = 3; | ||
| 513 | + } | ||
| 514 | + } | ||
| 515 | + | ||
| 516 | + @override | ||
| 517 | + Future<Response<CasesModel>> getCases(String path) => get(path); | ||
| 518 | +} | ||
| 519 | +``` | ||
| 520 | + | ||
| 521 | +## GetPageにミドルウェアを設定 | ||
| 522 | + | ||
| 523 | +GetPageに新しいプロパティが追加され、GetMiddleWareのListを設定することができるようになりました。GetMiddleWareは設定した任意の順序で実行されます。 | ||
| 524 | + | ||
| 525 | +**注**: GetPageにミドルウェアを設定すると、そのページの子ページはすべて同じミドルウェアを自動的に持つことになります。 | ||
| 526 | + | ||
| 527 | +### 実行優先度 | ||
| 528 | + | ||
| 529 | +GetMiddlewareに設定したpriority(優先度)の若い順にミドルウェアが実行されます。 | ||
| 530 | + | ||
| 531 | +```dart | ||
| 532 | +final middlewares = [ | ||
| 533 | + GetMiddleware(priority: 2), | ||
| 534 | + GetMiddleware(priority: 5), | ||
| 535 | + GetMiddleware(priority: 4), | ||
| 536 | + GetMiddleware(priority: -8), | ||
| 537 | +]; | ||
| 538 | +``` | ||
| 539 | + | ||
| 540 | +この場合の実行順序は **-8 => 2 => 4 => 5** | ||
| 541 | + | ||
| 542 | +### redirect | ||
| 543 | + | ||
| 544 | +redirect関数は、Routeを呼び出してページが検索されると実行されます。リダイレクト先のRouteSettingsが戻り値となります。もしくはnullを与えれば、リダイレクトは行われません。 | ||
| 545 | + | ||
| 546 | +```dart | ||
| 547 | +RouteSettings redirect(String route) { | ||
| 548 | + final authService = Get.find<AuthService>(); | ||
| 549 | + return authService.authed.value ? null : RouteSettings(name: '/login') | ||
| 550 | +} | ||
| 551 | +``` | ||
| 552 | + | ||
| 553 | +### onPageCalled | ||
| 554 | + | ||
| 555 | +onPageCalled関数は、ページが呼び出された直後に実行されます。 | ||
| 556 | +この関数を使ってページの内容を変更したり、新しいページを作成したりすることができます。 | ||
| 557 | + | ||
| 558 | +```dart | ||
| 559 | +GetPage onPageCalled(GetPage page) { | ||
| 560 | + final authService = Get.find<AuthService>(); | ||
| 561 | + return page.copyWith(title: 'Welcome ${authService.UserName}'); | ||
| 562 | +} | ||
| 563 | +``` | ||
| 564 | + | ||
| 565 | +### onBindingsStart | ||
| 566 | + | ||
| 567 | +onBindingsStart関数は、Bindingsが初期化される直前に実行されます。 | ||
| 568 | +たとえば、ページのBindingsを変更することもできます。 | ||
| 569 | + | ||
| 570 | +```dart | ||
| 571 | +List<Bindings> onBindingsStart(List<Bindings> bindings) { | ||
| 572 | + final authService = Get.find<AuthService>(); | ||
| 573 | + if (authService.isAdmin) { | ||
| 574 | + bindings.add(AdminBinding()); | ||
| 575 | + } | ||
| 576 | + return bindings; | ||
| 577 | +} | ||
| 578 | +``` | ||
| 579 | + | ||
| 580 | +### onPageBuildStart | ||
| 581 | + | ||
| 582 | +onPageBuildStart関数は、Bindingsが初期化された直後、ページWidgetが作成される前に実行されます。 | ||
| 583 | + | ||
| 584 | +```dart | ||
| 585 | +GetPageBuilder onPageBuildStart(GetPageBuilder page) { | ||
| 586 | + print('bindings are ready'); | ||
| 587 | + return page; | ||
| 588 | +} | ||
| 589 | +``` | ||
| 590 | + | ||
| 591 | +### onPageBuilt | ||
| 592 | + | ||
| 593 | +onPageBuilt関数は、GetPage.page(ページのビルダー)が呼び出された直後に実行され、表示されるWidgetを結果として受け取ることができます。 | ||
| 594 | + | ||
| 595 | +### onPageDispose | ||
| 596 | + | ||
| 597 | +onPageDispose関数は、ページに関するすべてのオブジェクト（Controller、ビューなど）が破棄された直後に実行されます。 | ||
| 598 | + | ||
| 599 | +## その他API | ||
| 600 | + | ||
| 601 | +```dart | ||
| 602 | +// 現在の画面に渡されているargs(引数)を取得 | ||
| 603 | +Get.arguments | ||
| 604 | + | ||
| 605 | +// 直前のRouteの名前("/" など)を取得 | ||
| 606 | +Get.previousRoute | ||
| 607 | + | ||
| 608 | +// 現在のRouteオブジェクトを取得 | ||
| 609 | +Get.rawRoute | ||
| 610 | + | ||
| 611 | +// GetObserverからRoutingを取得 | ||
| 612 | +Get.routing | ||
| 613 | + | ||
| 614 | +// SnackBarが開いているかチェック | ||
| 615 | +Get.isSnackbarOpen | ||
| 616 | + | ||
| 617 | +// Dialogが開いているかチェック | ||
| 618 | +Get.isDialogOpen | ||
| 619 | + | ||
| 620 | +// BottomSheetが開いているかチェック | ||
| 621 | +Get.isBottomSheetOpen | ||
| 622 | + | ||
| 623 | +// Routeを削除 | ||
| 624 | +Get.removeRoute() | ||
| 625 | + | ||
| 626 | +// 引数のRoutePredicateがtrueを返すまで画面を戻る | ||
| 627 | +Get.until() | ||
| 628 | + | ||
| 629 | +// 引数で指定したRouteに進み、RoutePredicateがtrueを返すまで画面を戻る | ||
| 630 | +Get.offUntil() | ||
| 631 | + | ||
| 632 | +// 引数で指定した名前付きRouteに進み、RoutePredicateがtrueを返すまで画面を戻る | ||
| 633 | +Get.offNamedUntil() | ||
| 634 | + | ||
| 635 | +// アプリがどのプラットフォームで実行されているかのチェック | ||
| 636 | +GetPlatform.isAndroid | ||
| 637 | +GetPlatform.isIOS | ||
| 638 | +GetPlatform.isMacOS | ||
| 639 | +GetPlatform.isWindows | ||
| 640 | +GetPlatform.isLinux | ||
| 641 | +GetPlatform.isFuchsia | ||
| 642 | + | ||
| 643 | +// アプリがどのデバイスで実行されているかのチェック | ||
| 644 | +GetPlatform.isMobile | ||
| 645 | +GetPlatform.isDesktop | ||
| 646 | +// プラットフォームとデバイスのチェックは独立 | ||
| 647 | +// 同じOSでもウェブで実行されているのか、ネイティブで実行されているのか区別 | ||
| 648 | +GetPlatform.isWeb | ||
| 649 | + | ||
| 650 | + | ||
| 651 | +// MediaQuery.of(context).size.height と同じ | ||
| 652 | +// ただしimmutable | ||
| 653 | +Get.height | ||
| 654 | +Get.width | ||
| 655 | + | ||
| 656 | +// Navigatorの現在のcontextを取得 | ||
| 657 | +Get.context | ||
| 658 | + | ||
| 659 | +// SnackBar/Dialog/BottomSheet などフォアグラウンドのcontextを取得 | ||
| 660 | +Get.overlayContext | ||
| 661 | + | ||
| 662 | +// 注: 以降のメソッドはcontextの拡張メソッドです。 | ||
| 663 | +// contextと同じくUIのどこからでもアクセスできます。 | ||
| 664 | + | ||
| 665 | +// ウィンドウサイズの変更などに合わせて変わる height/width を取得 | ||
| 666 | +context.width | ||
| 667 | +context.height | ||
| 668 | + | ||
| 669 | +// 画面の半分のサイズ,1/3のサイズなどを取得 | ||
| 670 | +// レスポンシブなデザインの場合に便利 | ||
| 671 | +// オプションのパラメーター dividedBy で割る数を指定 | ||
| 672 | +// オプションのパラメーター reducedBy でパーセンテージを指定 | ||
| 673 | +context.heightTransformer() | ||
| 674 | +context.widthTransformer() | ||
| 675 | + | ||
| 676 | +/// MediaQuery.of(context).size とほぼ同じ | ||
| 677 | +context.mediaQuerySize() | ||
| 678 | + | ||
| 679 | +/// MediaQuery.of(context).padding とほぼ同じ | ||
| 680 | +context.mediaQueryPadding() | ||
| 681 | + | ||
| 682 | +/// MediaQuery.of(context).viewPadding とほぼ同じ | ||
| 683 | +context.mediaQueryViewPadding() | ||
| 684 | + | ||
| 685 | +/// MediaQuery.of(context).viewInsets とほぼ同じ | ||
| 686 | +context.mediaQueryViewInsets() | ||
| 687 | + | ||
| 688 | +/// MediaQuery.of(context).orientation とほぼ同じ | ||
| 689 | +context.orientation() | ||
| 690 | + | ||
| 691 | +/// デバイスがランドスケープ(横長)モードかどうかチェック | ||
| 692 | +context.isLandscape() | ||
| 693 | + | ||
| 694 | +/// デバイスがポートレート(縦長)モードかどうかチェック | ||
| 695 | +context.isPortrait() | ||
| 696 | + | ||
| 697 | +/// MediaQuery.of(context).devicePixelRatio とほぼ同じ | ||
| 698 | +context.devicePixelRatio() | ||
| 699 | + | ||
| 700 | +/// MediaQuery.of(context).textScaleFactor とほぼ同じ | ||
| 701 | +context.textScaleFactor() | ||
| 702 | + | ||
| 703 | +/// 画面の短辺の長さを取得 | ||
| 704 | +context.mediaQueryShortestSide() | ||
| 705 | + | ||
| 706 | +/// 画面の横幅が800より大きい場合にtrueを返す | ||
| 707 | +context.showNavbar() | ||
| 708 | + | ||
| 709 | +/// 画面の短辺が600より小さい場合にtrueを返す | ||
| 710 | +context.isPhone() | ||
| 711 | + | ||
| 712 | +/// 画面の短辺が600より小さい場合にtrueを返す | ||
| 713 | +context.isSmallTablet() | ||
| 714 | + | ||
| 715 | +/// 画面の短辺が720より大きい場合にtrueを返す | ||
| 716 | +context.isLargeTablet() | ||
| 717 | + | ||
| 718 | +/// デバイスがタブレットの場合にtrueを返す | ||
| 719 | +context.isTablet() | ||
| 720 | + | ||
| 721 | +/// 画面サイズに合わせて value<T> を返す | ||
| 722 | +/// たとえば: | ||
| 723 | +/// 短辺が300より小さい → watchパラメーターの値を返す | ||
| 724 | +/// 短辺が600より小さい → mobileパラメーターの値を返す | ||
| 725 | +/// 短辺が1200より小さい → tabletパラメーターの値を返す | ||
| 726 | +/// 横幅が1200より大きい → desktopパラメーターの値を返す | ||
| 727 | +context.responsiveValue<T>() | ||
| 728 | +``` | ||
| 729 | + | ||
| 730 | +### オプションのグローバル設定と手動設定 | ||
| 731 | + | ||
| 732 | +GetMaterialApp はすべてあなたの代わりに設定してくれますが、手動で設定を施したい場合は MaterialApp の navigatorKey と navigatorObservers の値を指定してください。 | ||
| 733 | + | ||
| 734 | +```dart | ||
| 735 | +MaterialApp( | ||
| 736 | + navigatorKey: Get.key, | ||
| 737 | + navigatorObservers: [GetObserver()], | ||
| 738 | +); | ||
| 739 | +``` | ||
| 740 | + | ||
| 741 | +`GetObserver`内で独自のミドルウェアを使用することもできます。これは他に影響を及ぼすことはありません。 | ||
| 742 | + | ||
| 743 | +```dart | ||
| 744 | +MaterialApp( | ||
| 745 | + navigatorKey: Get.key, | ||
| 746 | + navigatorObservers: [ | ||
| 747 | + GetObserver(MiddleWare.observer) // ここ | ||
| 748 | + ], | ||
| 749 | +); | ||
| 750 | +``` | ||
| 751 | + | ||
| 752 | +`Get` クラスに_グローバル設定_を施すことができます。Routeをプッシュする前のコードに `Get.config` を追加するだけです。もしくは、`GetMaterialApp` 内で直接設定することもできます。 | ||
| 753 | + | ||
| 754 | +```dart | ||
| 755 | +GetMaterialApp( | ||
| 756 | + enableLog: true, | ||
| 757 | + defaultTransition: Transition.fade, | ||
| 758 | + opaqueRoute: Get.isOpaqueRouteDefault, | ||
| 759 | + popGesture: Get.isPopGestureEnable, | ||
| 760 | + transitionDuration: Get.defaultDurationTransition, | ||
| 761 | + defaultGlobalState: Get.defaultGlobalState, | ||
| 762 | +); | ||
| 763 | + | ||
| 764 | +Get.config( | ||
| 765 | + enableLog = true, | ||
| 766 | + defaultPopGesture = true, | ||
| 767 | + defaultTransition = Transitions.cupertino | ||
| 768 | +) | ||
| 769 | +``` | ||
| 770 | + | ||
| 771 | +オプションで、すべてのログメッセージを `Get` からリダイレクトさせることができます。 | ||
| 772 | +お好みのロギングパッケージを使ってログを取得したい場合はこのようにしてください。 | ||
| 773 | + | ||
| 774 | +```dart | ||
| 775 | +GetMaterialApp( | ||
| 776 | + enableLog: true, | ||
| 777 | + logWriterCallback: localLogWriter, | ||
| 778 | +); | ||
| 779 | + | ||
| 780 | +void localLogWriter(String text, {bool isError = false}) { | ||
| 781 | + // ここでお好みのロギングパッケージにメッセージを渡してください | ||
| 782 | + // enableLog: false にしても、ログメッセージはこのコールバックでプッシュされる点ご注意を | ||
| 783 | + // ログが有効かどうかのチェックは Get.isLogEnable で可能 | ||
| 784 | +} | ||
| 785 | + | ||
| 786 | +``` | ||
| 787 | + | ||
| 788 | +### ローカルステートWidget | ||
| 789 | + | ||
| 790 | +ローカルステートWidgetは、1つの変数の状態を一時的かつローカルに管理したい場合に便利です。 | ||
| 791 | +シンプルなValueBuilderとリアクティブなObxValueの2種類があります。 | ||
| 792 | +たとえば、`TextField` Widgetの obscureText プロパティを切り替えたり、折りたたみ可能なパネルをカスタムで作成したり、`BottomNavigation` の現在のインデックス値を変更して内容を変更したりといった用途に最適です。 | ||
| 793 | + | ||
| 794 | +#### ValueBuilder | ||
| 795 | + | ||
| 796 | +setStateでお馴染みの `StatefulWidget` をシンプルにしたビルダーWidgetです。 | ||
| 797 | + | ||
| 798 | +```dart | ||
| 799 | +ValueBuilder<bool>( | ||
| 800 | + initialValue: false, | ||
| 801 | + builder: (value, updateFn) => Switch( | ||
| 802 | + value: value, | ||
| 803 | + onChanged: updateFn, // ( newValue ) => updateFn( newValue ) も可 | ||
| 804 | + ), | ||
| 805 | + // builderメソッドの外で何か実行する場合 | ||
| 806 | + onUpdate: (value) => print("Value updated: $value"), | ||
| 807 | + onDispose: () => print("Widget unmounted"), | ||
| 808 | +), | ||
| 809 | +``` | ||
| 810 | + | ||
| 811 | +#### ObxValue | ||
| 812 | + | ||
| 813 | +[`ValueBuilder`](#valuebuilder)に似ていますが、これはそのリアクティブバージョンです。Rxインスタンス(.obsを付けたときに戻る値です)を渡すと自動で更新されます。すごいでしょ？ | ||
| 814 | + | ||
| 815 | +```dart | ||
| 816 | +ObxValue((data) => Switch( | ||
| 817 | + value: data.value, | ||
| 818 | + onChanged: data, | ||
| 819 | + // Rxには_呼び出し可能な_関数が備わっているのでこれだけでOK | ||
| 820 | + // (flag) => data.value = flag も可能 | ||
| 821 | + ), | ||
| 822 | + false.obs, | ||
| 823 | +), | ||
| 824 | +``` | ||
| 825 | + | ||
| 826 | +## お役立ちTIPS | ||
| 827 | + | ||
| 828 | +`.obs`が付いた型(_Rx_型とも呼ばれる)には、さまざまな内部メソッドや演算子が用意されています。 | ||
| 829 | + | ||
| 830 | +> `.obs`が付いたプロパティが **実際の値** だと信じてしまいがちですが...間違えないように！ | ||
| 831 | +> 我々がcontrollerにおける変数の型宣言を省略してvarとしているのはDartのコンパイラが賢い上に、 | ||
| 832 | +> そのほうがコードがすっきる見えるからですが… | ||
| 833 | + | ||
| 834 | +```dart | ||
| 835 | +var message = 'Hello world'.obs; | ||
| 836 | +print( 'Message "$message" has Type ${message.runtimeType}'); | ||
| 837 | +``` | ||
| 838 | + | ||
| 839 | +`message`を _print_ することで実際の文字列が取り出されはしますが、型は **RxString** です！ | ||
| 840 | + | ||
| 841 | +そのため `message.substring( 0, 4 )` などといったことはできません。 | ||
| 842 | +Stringのメソッドにアクセスするには _observable_ の中にある実際の値 `value` にアクセスします。 | ||
| 843 | +アクセスには `.value`を使うのが通常ですが、他の方法もあるのでご紹介します。 | ||
| 844 | + | ||
| 845 | +```dart | ||
| 846 | +final name = 'GetX'.obs; | ||
| 847 | +// 新しい値が現在のものと異なる場合のみ Stream が更新されます。 | ||
| 848 | +name.value = 'Hey'; | ||
| 849 | + | ||
| 850 | +// すべてのRxプロパティは「呼び出し可能」で、valueを返してくれます。 | ||
| 851 | +// ただし `null` は受付不可。nullの場合はUIが更新されない。 | ||
| 852 | +name('Hello'); | ||
| 853 | + | ||
| 854 | +// これはgetterみたいなものです。'Hello' を返します。 | ||
| 855 | +name() ; | ||
| 856 | + | ||
| 857 | +/// num型の場合 | ||
| 858 | + | ||
| 859 | +final count = 0.obs; | ||
| 860 | + | ||
| 861 | +// num型の非破壊的な演算子はすべて使えます。 | ||
| 862 | +count + 1; | ||
| 863 | + | ||
| 864 | +// 注意！ この場合は`count`がfinalなら有効ではないです。varなら有効。 | ||
| 865 | +count += 1; | ||
| 866 | + | ||
| 867 | +// 比較演算子も使用可能 | ||
| 868 | +count > 2; | ||
| 869 | + | ||
| 870 | +/// bool型の場合 | ||
| 871 | + | ||
| 872 | +final flag = false.obs; | ||
| 873 | + | ||
| 874 | +// true/false を入れ替えることができます。 | ||
| 875 | +flag.toggle(); | ||
| 876 | + | ||
| 877 | + | ||
| 878 | +/// すべての型 | ||
| 879 | + | ||
| 880 | +// `value` を null にセット。 | ||
| 881 | +flag.nil(); | ||
| 882 | + | ||
| 883 | +// toString(), toJson() などの操作はすべて `value` が対象になります。 | ||
| 884 | +print( count ); // RxIntの `toString()` が呼び出されて数字がprintされる。 | ||
| 885 | + | ||
| 886 | +final abc = [0,1,2].obs; | ||
| 887 | +// json配列に変換した値と、'RxList' がprintされます。 | ||
| 888 | +// JsonはすべてのRx型でサポートされています！ | ||
| 889 | +print('json: ${jsonEncode(abc)}, type: ${abc.runtimeType}'); | ||
| 890 | + | ||
| 891 | +// RxMap、RxList、RxSetはそれぞれの元の型を拡張した特別なRx型です。 | ||
| 892 | +// たとえばRxListは通常のListとして扱うことができる上にリアクティブです。 | ||
| 893 | +abc.add(12); // 12をListにプッシュし、Streamを更新してくれます。 | ||
| 894 | +abc[3]; // Listと同様にインデックス番号3の値を取得してくれます。 | ||
| 895 | + | ||
| 896 | + | ||
| 897 | +// 等価演算子はRx型と元の型でも動作しますが、.hashCode は常にvalueから取得します。 | ||
| 898 | +final number = 12.obs; | ||
| 899 | +print( number == 12 ); // true | ||
| 900 | + | ||
| 901 | +/// カスタムのRxモデル | ||
| 902 | + | ||
| 903 | +// toJson()やtoString()をモデルクラスに設定すれば、.obsからでもprintされるように実装可能。 | ||
| 904 | + | ||
| 905 | +class User { | ||
| 906 | + String name, last; | ||
| 907 | + int age; | ||
| 908 | + User({this.name, this.last, this.age}); | ||
| 909 | + | ||
| 910 | + @override | ||
| 911 | + String toString() => '$name $last, $age years old'; | ||
| 912 | +} | ||
| 913 | + | ||
| 914 | +final user = User(name: 'John', last: 'Doe', age: 33).obs; | ||
| 915 | + | ||
| 916 | +// `user` 自体はリアクティブですが、その中のプロパティはリアクティブではありません。 | ||
| 917 | +// そのため、このようにプロパティの値を変更してもWidgetは更新されません。 | ||
| 918 | +user.value.name = 'Roi'; | ||
| 919 | +// `Rx` には自ら変更を検知する手段がないからです。 | ||
| 920 | +// そのため、カスタムクラスの場合はこのようにWidgetに変更を知らせる必要があります。 | ||
| 921 | +user.refresh(); | ||
| 922 | + | ||
| 923 | +// もしくは `update()` メソッドを使用してください。 | ||
| 924 | +user.update((value){ | ||
| 925 | + value.name='Roi'; | ||
| 926 | +}); | ||
| 927 | + | ||
| 928 | +print( user ); | ||
| 929 | +``` | ||
| 930 | +#### StateMixin | ||
| 931 | + | ||
| 932 | +`UI`の状態を管理するもう一つの手法として、`StateMixin<T>`を利用する方法があります。 | ||
| 933 | +controllerクラスに`with`を使って`StateMixin<T>`を追加することで実装可能です。 | ||
| 934 | + | ||
| 935 | +``` dart | ||
| 936 | +class Controller extends GetController with StateMixin<User>{} | ||
| 937 | +``` | ||
| 938 | + | ||
| 939 | +`change()`メソッドにより好きなタイミングで状態を変更することができます。 | ||
| 940 | +このようにデータと状態を渡すだけです。 | ||
| 941 | + | ||
| 942 | +```dart | ||
| 943 | +change(data, status: RxStatus.success()); | ||
| 944 | +``` | ||
| 945 | + | ||
| 946 | +RxStatus には以下のステータスが存在します。 | ||
| 947 | + | ||
| 948 | +``` dart | ||
| 949 | +RxStatus.loading(); | ||
| 950 | +RxStatus.success(); | ||
| 951 | +RxStatus.empty(); | ||
| 952 | +RxStatus.error('message'); | ||
| 953 | +``` | ||
| 954 | + | ||
| 955 | +ステータスごとにUIを設定するにはこのようにします。 | ||
| 956 | + | ||
| 957 | +```dart | ||
| 958 | +class OtherClass extends GetView<Controller> { | ||
| 959 | + @override | ||
| 960 | + Widget build(BuildContext context) { | ||
| 961 | + return Scaffold( | ||
| 962 | + | ||
| 963 | + body: controller.obx( | ||
| 964 | + (state)=>Text(state.name), | ||
| 965 | + | ||
| 966 | + // ローディング中はカスタムのインジケーターの設定も可能ですが、 | ||
| 967 | + // デフォルトで Center(child:CircularProgressIndicator()) となります。 | ||
| 968 | + onLoading: CustomLoadingIndicator(), | ||
| 969 | + onEmpty: Text('No data found'), | ||
| 970 | + | ||
| 971 | + // 同様にエラーWidgetはカスタム可能ですが、 | ||
| 972 | + // デフォルトは Center(child:Text(error)) です。 | ||
| 973 | + onError: (error)=>Text(error), | ||
| 974 | + ), | ||
| 975 | + ); | ||
| 976 | +} | ||
| 977 | +``` | ||
| 978 | + | ||
| 979 | +#### GetView | ||
| 980 | + | ||
| 981 | +このWidgetは私のお気に入りです。とてもシンプルで扱いやすいですよ！ | ||
| 982 | + | ||
| 983 | +このWidgetを一言で表現すると、「controllerをgetterに持つ `const` な StatelessWidget」です。 | ||
| 984 | + | ||
| 985 | +```dart | ||
| 986 | + class AwesomeController extends GetController { | ||
| 987 | + final String title = 'My Awesome View'; | ||
| 988 | + } | ||
| 989 | + | ||
| 990 | + // controllerの `型` を渡すのを忘れずに！ | ||
| 991 | + class AwesomeView extends GetView<AwesomeController> { | ||
| 992 | + @override | ||
| 993 | + Widget build(BuildContext context) { | ||
| 994 | + return Container( | ||
| 995 | + padding: EdgeInsets.all(20), | ||
| 996 | + child: Text(controller.title), // `controller.なんとか` でアクセス | ||
| 997 | + ); | ||
| 998 | + } | ||
| 999 | + } | ||
| 1000 | +``` | ||
| 1001 | + | ||
| 1002 | +#### GetResponsiveView | ||
| 1003 | + | ||
| 1004 | +GetViewをレスポンシブデザインに対応させたい場合はこのWidgetを継承してください。 | ||
| 1005 | +画面サイズやデバイスタイプなどの情報を持つ `screen` プロパティを保持しています。 | ||
| 1006 | + | ||
| 1007 | +##### 使い方 | ||
| 1008 | + | ||
| 1009 | +Widgetをビルドする方法は2つあります。 | ||
| 1010 | + | ||
| 1011 | +- `builder` メソッドを使う。 | ||
| 1012 | +- `desktop`, `tablet`, `phone`, `watch` メソッドを使う。 | ||
| 1013 | + 画面サイズ、デバイスタイプに応じたWidgetがビルドされます。 | ||
| 1014 | + たとえば画面が [ScreenType.Tablet] なら `tablet` メソッドが実行されます。 | ||
| 1015 | + **注:** `alwaysUseBuilder` プロパティをfalseにする必要があります。 | ||
| 1016 | + | ||
| 1017 | +`settings` プロパティでブレイクポイントを設定することもできます。 | ||
| 1018 | + | ||
| 1019 | + | ||
| 1020 | +この画面のコード | ||
| 1021 | +[コード](https://github.com/SchabanBo/get_page_example/blob/master/lib/pages/responsive_example/responsive_view.dart) | ||
| 1022 | + | ||
| 1023 | +#### GetWidget | ||
| 1024 | + | ||
| 1025 | +このWidgetはあまり知られておらず、使用するケースは稀です。 | ||
| 1026 | +GetViewとの違いは、Controllerを`キャッシュ`してくれる点です。 | ||
| 1027 | +このキャッシュがあるため `const` にはできません。 | ||
| 1028 | + | ||
| 1029 | +> それでは一体いつControllerをキャッシュする必要があるのかって？ | ||
| 1030 | + | ||
| 1031 | +それは **GetX** のこれまた使う機会の少ない `Get.create()` を使うときです。 | ||
| 1032 | + | ||
| 1033 | +`Get.create(()=>Controller())` は `Get.find<Controller>()` を実行するたびに | ||
| 1034 | +新しいControllerインスタンスを生成します。 | ||
| 1035 | + | ||
| 1036 | +そこで `GetWidget` の出番です。たとえば、Todoアイテムのリスト内容を保持したいとき。 | ||
| 1037 | +Widgetが更新されてもアイテムはControllerのキャッシュを参照してくれます。 | ||
| 1038 | + | ||
| 1039 | +#### GetxService | ||
| 1040 | + | ||
| 1041 | +このクラスは `GetxController` に似ており、同様のライフサイクル（`onInit()`, `onReady()`, `onClose()`）を共有しますが、そこに「ロジック」はありません。**GetX**の依存オブジェクト注入システムに、このサブクラスがメモリから **削除できない** ということを知らせるだけです。 | ||
| 1042 | + | ||
| 1043 | +そのため `Get.find()` で `ApiService`, `StorageService`, `CacheService` のようなサービス系クラスにいつでもアクセスできるようにしておくと非常に便利です。 | ||
| 1044 | + | ||
| 1045 | +```dart | ||
| 1046 | +Future<void> main() async { | ||
| 1047 | + await initServices(); /// サービスクラスの初期化をawait | ||
| 1048 | + runApp(SomeApp()); | ||
| 1049 | +} | ||
| 1050 | + | ||
| 1051 | +/// Flutterアプリ実行前にサービスクラスを初期化してフローをコントロールするのは賢いやり方です。 | ||
| 1052 | +/// たとえば GetMaterialAppを更新する必要がないようにUser別の | ||
| 1053 | +/// Theme、apiKey、言語設定などをApiサービス実行前にロードしたり。 | ||
| 1054 | +void initServices() async { | ||
| 1055 | + print('starting services ...'); | ||
| 1056 | + /// get_storage, hive, shared_pref の初期化はここで行います。 | ||
| 1057 | + /// あるいは moor の connection など非同期のメソッドならなんでも。 | ||
| 1058 | + await Get.putAsync(() => DbService().init()); | ||
| 1059 | + await Get.putAsync(SettingsService()).init(); | ||
| 1060 | + print('All services started...'); | ||
| 1061 | +} | ||
| 1062 | + | ||
| 1063 | +class DbService extends GetxService { | ||
| 1064 | + Future<DbService> init() async { | ||
| 1065 | + print('$runtimeType delays 2 sec'); | ||
| 1066 | + await 2.delay(); | ||
| 1067 | + print('$runtimeType ready!'); | ||
| 1068 | + return this; | ||
| 1069 | + } | ||
| 1070 | +} | ||
| 1071 | + | ||
| 1072 | +class SettingsService extends GetxService { | ||
| 1073 | + void init() async { | ||
| 1074 | + print('$runtimeType delays 1 sec'); | ||
| 1075 | + await 1.delay(); | ||
| 1076 | + print('$runtimeType ready!'); | ||
| 1077 | + } | ||
| 1078 | +} | ||
| 1079 | + | ||
| 1080 | +``` | ||
| 1081 | + | ||
| 1082 | +`GetxService` を破棄する唯一の方法は `Get.reset()` メソッドを使うことです。 | ||
| 1083 | +これはアプリにおける「ホットリブート」のようなものです。あるクラスのインスタンスを | ||
| 1084 | +ライフサイクルの間ずっと残しておきたい場合は `GetxService` を使うというのを覚えておいてください。 | ||
| 1085 | + | ||
| 1086 | + | ||
| 1087 | +## テストの実行 | ||
| 1088 | + | ||
| 1089 | +Controllerのライフサイクル含め、他のクラスと同様にテストを実行することができます。 | ||
| 1090 | + | ||
| 1091 | +```dart | ||
| 1092 | +class Controller extends GetxController { | ||
| 1093 | + @override | ||
| 1094 | + void onInit() { | ||
| 1095 | + super.onInit(); | ||
| 1096 | + // 値を name2 に変更 | ||
| 1097 | + name.value = 'name2'; | ||
| 1098 | + } | ||
| 1099 | + | ||
| 1100 | + @override | ||
| 1101 | + void onClose() { | ||
| 1102 | + name.value = ''; | ||
| 1103 | + super.onClose(); | ||
| 1104 | + } | ||
| 1105 | + | ||
| 1106 | + final name = 'name1'.obs; | ||
| 1107 | + | ||
| 1108 | + void changeName() => name.value = 'name3'; | ||
| 1109 | +} | ||
| 1110 | + | ||
| 1111 | +void main() { | ||
| 1112 | + test(''' | ||
| 1113 | +Test the state of the reactive variable "name" across all of its lifecycles''', | ||
| 1114 | + () { | ||
| 1115 | + /// ライフサイクルごとのテストは必ずしも行う必要はありませんが、 | ||
| 1116 | + /// GetXの依存オブジェクト注入機能を使用しているのであれば実行をおすすめします。 | ||
| 1117 | + final controller = Controller(); | ||
| 1118 | + expect(controller.name.value, 'name1'); | ||
| 1119 | + | ||
| 1120 | + /// このようにライフサイクル経過ごとの状態をテスト可能です。 | ||
| 1121 | + Get.put(controller); // onInit が実行される | ||
| 1122 | + expect(controller.name.value, 'name2'); | ||
| 1123 | + | ||
| 1124 | + /// 関数もテストしましょう | ||
| 1125 | + controller.changeName(); | ||
| 1126 | + expect(controller.name.value, 'name3'); | ||
| 1127 | + | ||
| 1128 | + /// onClose が実行される | ||
| 1129 | + Get.delete<Controller>(); | ||
| 1130 | + | ||
| 1131 | + expect(controller.name.value, ''); | ||
| 1132 | + }); | ||
| 1133 | +} | ||
| 1134 | +``` | ||
| 1135 | + | ||
| 1136 | +#### mockitoやmocktailを使う場合 | ||
| 1137 | +GetxController/GetxService をモックする場合 Mock をミックスインしてください。 | ||
| 1138 | + | ||
| 1139 | +```dart | ||
| 1140 | +class NotificationServiceMock extends GetxService with Mock implements NotificationService {} | ||
| 1141 | +``` | ||
| 1142 | + | ||
| 1143 | +#### Get.reset() | ||
| 1144 | +WidgetやGroupのテスト時に、テストの最後かtearDownの中で Get.reset() を実行することで設定をリセットすることができます。 | ||
| 1145 | + | ||
| 1146 | +#### Get.testMode | ||
| 1147 | +Controllerの中でナビゲーションを使用している場合は、`Get.testMode = true`をmainの開始で実行してください。 | ||
| 1148 | + | ||
| 1149 | + | ||
| 1150 | +# バージョン2.0からの破壊的変更 | ||
| 1151 | + | ||
| 1152 | +1- Rx型の名称 | ||
| 1153 | + | ||
| 1154 | +| 変更前 | 変更後 | | ||
| 1155 | +| ------- | ---------- | | ||
| 1156 | +| StringX | `RxString` | | ||
| 1157 | +| IntX | `RxInt` | | ||
| 1158 | +| MapX | `RxMap` | | ||
| 1159 | +| ListX | `RxList` | | ||
| 1160 | +| NumX | `RxNum` | | ||
| 1161 | +| DoubleX | `RxDouble` | | ||
| 1162 | + | ||
| 1163 | +RxControllerとGetBuilderが統合され、Controllerにどれを使うか覚えておく必要がなくなりました。GetxControllerを使うだけで、リアクティブと非リアクティブな状態管理の両方に対応できるようになりました。 | ||
| 1164 | + | ||
| 1165 | +2- 名前付きRoute | ||
| 1166 | +変更前: | ||
| 1167 | + | ||
| 1168 | +```dart | ||
| 1169 | +GetMaterialApp( | ||
| 1170 | + namedRoutes: { | ||
| 1171 | + '/': GetRoute(page: Home()), | ||
| 1172 | + } | ||
| 1173 | +) | ||
| 1174 | +``` | ||
| 1175 | + | ||
| 1176 | +変更後: | ||
| 1177 | + | ||
| 1178 | +```dart | ||
| 1179 | +GetMaterialApp( | ||
| 1180 | + getPages: [ | ||
| 1181 | + GetPage(name: '/', page: () => Home()), | ||
| 1182 | + ] | ||
| 1183 | +) | ||
| 1184 | +``` | ||
| 1185 | + | ||
| 1186 | +変更の効果: | ||
| 1187 | +ページ表示にはパラメータやログイントークンを起点にする方法もありますが、以前のアプローチではこれができず、柔軟性に欠けていました。 | ||
| 1188 | +ページを関数から取得するよう変更したことで、このようなアプローチを可能にし、アプリ起動直後にRouteがメモリに割り当てられることもないため、RAMの消費量を大幅に削減することもできました。 | ||
| 1189 | + | ||
| 1190 | +```dart | ||
| 1191 | + | ||
| 1192 | +GetStorage box = GetStorage(); | ||
| 1193 | + | ||
| 1194 | +GetMaterialApp( | ||
| 1195 | + getPages: [ | ||
| 1196 | + GetPage(name: '/', page:(){ | ||
| 1197 | + return box.hasData('token') ? Home() : Login(); | ||
| 1198 | + }) | ||
| 1199 | + ] | ||
| 1200 | +) | ||
| 1201 | +``` | ||
| 1202 | + | ||
| 1203 | +# なぜGetXなのか | ||
| 1204 | + | ||
| 1205 | +1- Flutterのアップデートが重なると、依存パッケージがうまく動かなくなることがあります。コンパイルエラーを起こしたり、その時点で解決方法がないようなエラーが発生したり。開発者はそのエラーを追跡し、該当リポジトリにissueを提起し、問題が解決されるのを待つ必要があります。Getは開発に必要な主要リソース（状態管理、依存オブジェクト管理、Route管理）を一元化し、Pubspecにパッケージを1つ追加するだけでコーディングを開始することができます。Flutterがアップデートしたときに必要なことは、Getも併せてアップデートすることだけです。それですぐに作業を再開できます。またGetはパッケージ間の互換性の問題も解消します。互いに依存するパッケージAの最新バージョンとBの最新バージョンの間に互換性がない、ということが何度あったでしょうか。Getを使えばすべてが同じパッケージ内にあるため、互換性の心配はありません。 | ||
| 1206 | + | ||
| 1207 | +2- Flutterは手軽で素晴らしいフレームワークですが、`Navigator.of(context).push (context, builder [...]`のように、ほとんどの開発者にとって不要な定型文が一部にあります。Getを使えばそのような定型文を簡素化できます。Routeを呼ぶためだけに8行のコードを書く代わりに、`Get.to(Home())`を実行すれば、次の画面に遷移することができるのです。またウェブURLを動的なものにすることは現在Flutterでは本当に骨の折れる作業ですが、GetXを使えば非常に簡単です。そしてFlutterにおける状態管理と依存オブジェクト管理については、たくさんのパターンやパッケージがあるので多くの議論を生んでいます。しかしGetXのアプローチは大変シンプルです。これは一例ですが、変数の最後に「.obs」を追加して「Obx()」の中にWidgetを配置するだけで、その変数の状態変化が自動でWidgetに反映されます。 | ||
| 1208 | + | ||
| 1209 | +3- GetXではパフォーマンスのことをあまり気にせず開発ができます。Flutterのパフォーマンスはそれだけで素晴らしいものですが、状態管理と併せて BLoC / データストア / Controller などを届けるためのサービスロケーターを使用することを想像してみてください。そのインスタンスが必要ないときはリソースを解放するイベントを明示的に呼び出さなければなりません。そんなとき、使用されなくなったら自動でメモリから削除してくれればいいのに、と考えたことはありませんか？それを実現してくれるのがGetXです。SmartManagement機能により未使用のリソースはすべて自動でメモリから破棄されるので、本来の開発作業に集中することができます。メモリ管理のためのロジックを作らなくても、常に必要最小限のリソースを使っていることが保証されるのです。 | ||
| 1210 | + | ||
| 1211 | +4- コードのデカップリング（分離）がしやすい。「ビューをビジネスロジックから分離する」というコンセプトを聞いたことがあるかもしれません。これはなにもBLoC、MVC、MVVMに限ったことではなく、どのアーキテクチャパターンもこのコンセプトが考え方の基本にあると言っていいでしょう。しかし、Flutterではcontextの使用によりこのコンセプトが薄まってしまいがちです。 | ||
| 1212 | +InheritedWidgetを参照するためにcontextが必要なとき、ビューの中でそれを使用するか、引数としてcontextを渡しますよね？私はこの方法は美しくないと感じます。常にビュー内のビジネスロジックに依存しなければならないのは、特にチームで仕事をする場面においては不便だと感じます。GetXによるアプローチでは、StatefulWidgetやinitStateなどの使用を禁止しているわけではありませんが、それらよりもずっとスッキリ書けるようになっています。Controller自体にライフサイクルがあるため、たとえばREST APIのリクエストを行うときも、ビューの中の何かに依存するということがありません。Controllerのライフサイクルの一つである onInit を使用してhttpを呼び出し、データが到着すると変数にセットされます。GetXはリアクティブな変数を扱うことができるので、インスタンス変数が変わりし次第、その変数に依存するWidgetがすべて自動更新されます。これによりUIの担当者はWidgetの見た目に注力することができ、ボタンクリックなどのユーザーイベント以外のものをビジネスロジックに渡す必要がなくなります。その一方でビジネスロジックの担当者はビジネスロジックだけに集中し、個別のテストを簡単に行うことができます。 | ||
| 1213 | + | ||
| 1214 | +GetXライブラリは今後も更新され続け、新しい機能を実装していきます。気軽にプルリクエストを出していただき、ライブラリの成長に貢献していただけるとうれしいです。 | ||
| 1215 | + | ||
| 1216 | +# コミュニティ | ||
| 1217 | + | ||
| 1218 | +## コミュニティチャンネル | ||
| 1219 | + | ||
| 1220 | +GetXコミュニティは非常に活発で有益な情報であふれています。ご質問がある場合や、このフレームワークの使用に関して支援が必要な場合は、ぜひコミュニティチャンネルにご参加ください。このリポジトリは、issueの提起およびリクエスト専用ですが、気軽にコミュニティにご参加いただければ幸いです。 | ||
| 1221 | + | ||
| 1222 | +| **Slack** | **Discord** | **Telegram** | | ||
| 1223 | +| :-------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | | ||
| 1224 | +| [](https://communityinviter.com/apps/getxworkspace/getx) | [](https://discord.com/invite/9Hpt99N) | [](https://t.me/joinchat/PhdbJRmsZNpAqSLJL6bH7g) | | ||
| 1225 | + | ||
| 1226 | +## コントリビュート方法 | ||
| 1227 | + | ||
| 1228 | +_GetXプロジェクトに貢献してみませんか？あなたをコントリビューターの一人としてご紹介できるのを楽しみにしています。GetおよびFlutterをより良いものにするためのコントリビュート例をご紹介します。_ | ||
| 1229 | + | ||
| 1230 | +- Readmeの多言語対応。 | ||
| 1231 | +- Readmeの追加ドキュメント執筆 (ドキュメントで触れられていない機能がまだまだたくさんあります)。 | ||
| 1232 | +- Getの使い方を紹介する記事やビデオの作成（Readmeに掲載させていただきます。将来的にWikiができればそこにも掲載予定）。 | ||
| 1233 | +- コードやテストのプルリクエスト。 | ||
| 1234 | +- 新機能の提案。 | ||
| 1235 | + | ||
| 1236 | +どのような形の貢献であれ歓迎しますので、ぜひコミュニティにご参加ください！ | ||
| 1237 | + | ||
| 1238 | +## GetXに関する記事と動画 | ||
| 1239 | + | ||
| 1240 | +- [Flutter Getx EcoSystem package for arabic people](https://www.youtube.com/playlist?list=PLV1fXIAyjeuZ6M8m56zajMUwu4uE3-SL0) - Tutorial by [Pesa Coder](https://github.com/UsamaElgendy). | ||
| 1241 | +- [Dynamic Themes in 3 lines using GetX™](https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3) - Tutorial by [Rod Brown](https://github.com/RodBr). | ||
| 1242 | +- [Complete GetX™ Navigation](https://www.youtube.com/watch?v=RaqPIoJSTtI) - Route management video by Amateur Coder. | ||
| 1243 | +- [Complete GetX State Management](https://www.youtube.com/watch?v=CNpXbeI_slw) - State management video by Amateur Coder. | ||
| 1244 | +- [GetX™ Other Features](https://youtu.be/ttQtlX_Q0eU) - Utils, storage, bindings and other features video by Amateur Coder. | ||
| 1245 | +- [Firestore User with GetX | Todo App](https://www.youtube.com/watch?v=BiV0DcXgk58) - Video by Amateur Coder. | ||
| 1246 | +- [Firebase Auth with GetX | Todo App](https://www.youtube.com/watch?v=-H-T_BSgfOE) - Video by Amateur Coder. | ||
| 1247 | +- [The Flutter GetX™ Ecosystem ~ State Management](https://medium.com/flutter-community/the-flutter-getx-ecosystem-state-management-881c7235511d) - State management by [Aachman Garg](https://github.com/imaachman). | ||
| 1248 | +- [The Flutter GetX™ Ecosystem ~ Dependency Injection](https://medium.com/flutter-community/the-flutter-getx-ecosystem-dependency-injection-8e763d0ec6b9) - Dependency Injection by [Aachman Garg](https://github.com/imaachman). | ||
| 1249 | +- [GetX, the all-in-one Flutter package](https://www.youtube.com/watch?v=IYQgtu9TM74) - A brief tutorial covering State Management and Navigation by Thad Carnevalli. | ||
| 1250 | +- [Build a To-do List App from scratch using Flutter and GetX](https://www.youtube.com/watch?v=EcnqFasHf18) - UI + State Management + Storage video by Thad Carnevalli. | ||
| 1251 | +- [GetX Flutter Firebase Auth Example](https://medium.com/@jeffmcmorris/getx-flutter-firebase-auth-example-b383c1dd1de2) - Article by Jeff McMorris. | ||
| 1252 | +- [Flutter State Management with GetX – Complete App](https://www.appwithflutter.com/flutter-state-management-with-getx/) - by App With Flutter. | ||
| 1253 | +- [Flutter Routing with Animation using Get Package](https://www.appwithflutter.com/flutter-routing-using-get-package/) - by App With Flutter. | ||
| 1254 | +- [A minimal example on dartpad](https://dartpad.dev/2b3d0d6f9d4e312c5fdbefc414c1727e?) - by [Roi Peker](https://github.com/roipeker) |
documentation/ja_JP/dependency_management.md
0 → 100644
| 1 | +# 依存オブジェクト管理 | ||
| 2 | +- [依存オブジェクト管理](#依存オブジェクト管理) | ||
| 3 | + - [インスタンス化に使用するメソッド](#インスタンス化に使用するメソッド) | ||
| 4 | + - [Get.put()](#getput) | ||
| 5 | + - [Get.lazyPut()](#getlazyput) | ||
| 6 | + - [Get.putAsync()](#getputasync) | ||
| 7 | + - [Get.create()](#getcreate) | ||
| 8 | + - [インスタンス化したクラスを使う](#インスタンス化したクラスを使う) | ||
| 9 | + - [依存オブジェクトの置換](#依存オブジェクトの置換) | ||
| 10 | + - [各メソッドの違い](#各メソッドの違い) | ||
| 11 | + - [Bindings（Routeと依存オブジェクトの結束）](#Bindings（Routeと依存オブジェクトの結束）) | ||
| 12 | + - [Bindingsクラス](#bindingsクラス) | ||
| 13 | + - [BindingsBuilder](#bindingsbuilder) | ||
| 14 | + - [SmartManagement](#smartmanagement) | ||
| 15 | + - [設定の変更方法](#設定の変更方法) | ||
| 16 | + - [SmartManagement.full](#smartmanagementfull) | ||
| 17 | + - [SmartManagement.onlyBuilder](#smartmanagementonlybuilder) | ||
| 18 | + - [SmartManagement.keepFactory](#smartmanagementkeepfactory) | ||
| 19 | + - [Bindingsの仕組み](#Bindingsの仕組み) | ||
| 20 | + - [補足](#補足) | ||
| 21 | + | ||
| 22 | +Getにはシンプルで強力な依存オブジェクト管理機能があります。たった1行のコードで、Provider contextやinheritedWidgetを使うことなく、BlocもしくはControllerのインスタンスを取得することができます。 | ||
| 23 | + | ||
| 24 | +```dart | ||
| 25 | +Controller controller = Get.put(Controller()); // Controller controller = Controller() の代わりに | ||
| 26 | +``` | ||
| 27 | + | ||
| 28 | +UIクラスの中でControllerクラスをインスタンス化する代わりに、Getインスタンスの中でインスタンス化することで、アプリ全体でControllerを利用できるようになります。 | ||
| 29 | + | ||
| 30 | +- 注: Getの状態管理機能を使用する場合は、[Bindings](#bindings)の使用も検討してください。Bindingsを使うことでビューにControllerを結合させることができます。 | ||
| 31 | +- 注²: Getの依存オブジェクト管理機能は、パッケージの他の部分から独立しています。そのため、たとえばあなたのアプリが既に他の状態管理ライブラリを使用している場合（どんなものでも）、何の問題もなく2つを組み合わせることができます。 | ||
| 32 | + | ||
| 33 | +## インスタンス化に使用するメソッド | ||
| 34 | +Controllerを初期化するのに使用するメソッドとその設定パラメーターについてご説明します。 | ||
| 35 | + | ||
| 36 | +### Get.put() | ||
| 37 | + | ||
| 38 | +依存オブジェクトを注入するための最も基本のメソッド。たとえば、ビューで使用するControllerに使います。 | ||
| 39 | + | ||
| 40 | +```dart | ||
| 41 | +Get.put<SomeClass>(SomeClass()); | ||
| 42 | +Get.put<LoginController>(LoginController(), permanent: true); | ||
| 43 | +Get.put<ListItemController>(ListItemController, tag: "some unique string"); | ||
| 44 | +``` | ||
| 45 | + | ||
| 46 | +以下が put() を使用する際に設定できるパラメーターです。 | ||
| 47 | +```dart | ||
| 48 | +Get.put<S>( | ||
| 49 | + // 必須。インスタンスを保存しておきたいControllerなどを設定 | ||
| 50 | + // 注: "S" 型はジェネリクスで、どんな型でもOK | ||
| 51 | + S dependency | ||
| 52 | + | ||
| 53 | + // オプション。これは同じ型のControllerインスタンスが複数存在する場合に、 | ||
| 54 | + // タグIDにより識別したい場合に使用します。 | ||
| 55 | + // Get.find<Controller>(tag: ) でこのputで設定したインスタンスを探します。 | ||
| 56 | + // tag はユニークなStringである必要があります。 | ||
| 57 | + String tag, | ||
| 58 | + | ||
| 59 | + // オプション。デフォルトでは使用されなくなったインスタンスは破棄されますが、 | ||
| 60 | + // （たとえばビューが閉じられた場合など） SharedPreferencesのインスタンスなど、 | ||
| 61 | + // アプリ全体を通して生かしておきたい場合があるかと思います。 | ||
| 62 | + // その場合はこれをtrueにしてください。デフォルトはfalseです。 | ||
| 63 | + bool permanent = false, | ||
| 64 | + | ||
| 65 | + // オプション。テストで抽象クラスを使用した後、別クラスに置換してテストを追うことができます。 | ||
| 66 | + // デフォルトはfalseです。 | ||
| 67 | + bool overrideAbstract = false, | ||
| 68 | + | ||
| 69 | + // オプション: 依存オブジェクトを関数を使って作ることができます。 | ||
| 70 | + // 使用頻度は低いと思います。 | ||
| 71 | + InstanceBuilderCallback<S> builder, | ||
| 72 | +) | ||
| 73 | +``` | ||
| 74 | + | ||
| 75 | +### Get.lazyPut() | ||
| 76 | +依存オブジェクトをすぐにロードする代わりに、lazy（遅延、消極的）ロードすることができます。実際に使用されるときに初めてインスタンス化されます。計算量の多いクラスや、Bindingsを使って複数のControllerをまとめてインスタンス化したいが、その時点ではすぐにそれらを使用しないことがわかっている場合などに非常に便利です。 | ||
| 77 | + | ||
| 78 | +```dart | ||
| 79 | +/// この場合のApiMockは Get.find<ApiMock> を使用した時点でインスタンス化されます。 | ||
| 80 | +Get.lazyPut<ApiMock>(() => ApiMock()); | ||
| 81 | + | ||
| 82 | +Get.lazyPut<FirebaseAuth>( | ||
| 83 | + () { | ||
| 84 | + // 必要ならここに何かのロジック | ||
| 85 | + return FirebaseAuth(); | ||
| 86 | + }, | ||
| 87 | + tag: Math.random().toString(), | ||
| 88 | + fenix: true | ||
| 89 | +) | ||
| 90 | + | ||
| 91 | +Get.lazyPut<Controller>( () => Controller() ) | ||
| 92 | +``` | ||
| 93 | + | ||
| 94 | +これが .lazyPut で設定できるパラメーターです。 | ||
| 95 | +```dart | ||
| 96 | +Get.lazyPut<S>( | ||
| 97 | + // 必須。クラスSが初めてfindの対象になったときに実行されるメソッド | ||
| 98 | + InstanceBuilderCallback builder, | ||
| 99 | + | ||
| 100 | + // オプション。Get.put()のtagと同様に同じクラスの異なるインスタンスが必要なときに使用 | ||
| 101 | + // ユニークな値を指定 | ||
| 102 | + String tag, | ||
| 103 | + | ||
| 104 | + // オプション。"permanent" に似ていますが、使用されていないときはインスタンスが | ||
| 105 | + // 破棄され、再び使用するときにGetがインスタンスを再び作成する点が異なります。 | ||
| 106 | + // Bindings APIの "SmartManagement.keepFactory " と同じです。 | ||
| 107 | + // デフォルトはfalse | ||
| 108 | + bool fenix = false | ||
| 109 | + | ||
| 110 | +) | ||
| 111 | +``` | ||
| 112 | + | ||
| 113 | +### Get.putAsync() | ||
| 114 | +SharedPreferencesなど、非同期のインスタンスを登録したいときに使います。 | ||
| 115 | + | ||
| 116 | +```dart | ||
| 117 | +Get.putAsync<SharedPreferences>(() async { | ||
| 118 | + final prefs = await SharedPreferences.getInstance(); | ||
| 119 | + await prefs.setInt('counter', 12345); | ||
| 120 | + return prefs; | ||
| 121 | +}); | ||
| 122 | + | ||
| 123 | +Get.putAsync<YourAsyncClass>( () async => await YourAsyncClass() ) | ||
| 124 | +``` | ||
| 125 | + | ||
| 126 | +これが .putAsync で設定できるパラメーターです。 | ||
| 127 | +```dart | ||
| 128 | +Get.putAsync<S>( | ||
| 129 | + | ||
| 130 | + // 必須。クラスをインスタンス化するための非同期メソッドを指定 | ||
| 131 | + AsyncInstanceBuilderCallback<S> builder, | ||
| 132 | + | ||
| 133 | + // オプション。Get.put() と同じです。同じクラスの異なるインスタンスを作りたいときに使用 | ||
| 134 | + // ユニークな値を指定 | ||
| 135 | + String tag, | ||
| 136 | + | ||
| 137 | + // オプション。Get.put() と同じです。アプリ全体を通して生かしておきたい場合に使用 | ||
| 138 | + // デフォルトはfalse | ||
| 139 | + bool permanent = false | ||
| 140 | +) | ||
| 141 | +``` | ||
| 142 | + | ||
| 143 | +### Get.create() | ||
| 144 | + | ||
| 145 | +これは使いどころに迷うかもしれません。他のものとの違いなど詳細な説明は「[各メソッドの違い](#各メソッドの違い)」のセクションをご一読ください。 | ||
| 146 | + | ||
| 147 | +```dart | ||
| 148 | +Get.Create<SomeClass>(() => SomeClass()); | ||
| 149 | +Get.Create<LoginController>(() => LoginController()); | ||
| 150 | +``` | ||
| 151 | + | ||
| 152 | +これが .create で設定できるパラメーターです。 | ||
| 153 | + | ||
| 154 | +```dart | ||
| 155 | +Get.create<S>( | ||
| 156 | + // 必須。Get.find() が呼ばれるたびにインスタンスがこの関数で新たに組み立てられる。 | ||
| 157 | + // 例: Get.create<YourClass>(() => YourClass()) | ||
| 158 | + FcBuilderFunc<S> builder, | ||
| 159 | + | ||
| 160 | + // オプション。Get.put() のtagと同様で、同じクラスによる | ||
| 161 | + // 複数インスタンスを扱うときに使用します。 | ||
| 162 | + // リストのアイテムにそれぞれコントローラが必要な場合に便利です。 | ||
| 163 | + // 文字列はユニークである必要があります。 | ||
| 164 | + String name, | ||
| 165 | + | ||
| 166 | + // オプション。Get.put() と同様アプリ全体でインスタンスを維持するときに使用。 | ||
| 167 | + // 唯一の違いは Get.create() のpermanentはデフォルトでtrueということだけです。 | ||
| 168 | + bool permanent = true | ||
| 169 | +``` | ||
| 170 | + | ||
| 171 | +## インスタンス化したクラスを使う | ||
| 172 | + | ||
| 173 | +いくつかのRouteを渡り歩いた後、以前のControllerに残してきたデータが必要になったとしたら、Provider や Get_it と組み合わせる必要がありますよね？Getの場合は違います。GetにControllerの「検索」を依頼するだけで追加の依存オブジェクトの注入は必要ありません。 | ||
| 174 | + | ||
| 175 | +```dart | ||
| 176 | +final controller = Get.find<Controller>(); | ||
| 177 | +// もしくは | ||
| 178 | +Controller controller = Get.find(); | ||
| 179 | + | ||
| 180 | +// マジックみたいですよね。でも実際にGetはControllerのインスタンスを探して届けてくれます。 | ||
| 181 | +// 100万ものControllerをインスタンス化していても、Getは常に正しいControllerを探してくれます。 | ||
| 182 | +``` | ||
| 183 | + | ||
| 184 | +そしてそのControllerが以前取得したデータをあなたは復元することができます。 | ||
| 185 | + | ||
| 186 | +```dart | ||
| 187 | +Text(controller.textFromApi); | ||
| 188 | +``` | ||
| 189 | + | ||
| 190 | +戻り値は通常のクラスなので、そのクラスで可能なことは何でもできます。 | ||
| 191 | +```dart | ||
| 192 | +int count = Get.find<SharedPreferences>().getInt('counter'); | ||
| 193 | +print(count); // 出力: 12345 | ||
| 194 | +``` | ||
| 195 | + | ||
| 196 | +インスタンスを明示的に削除したい場合はこのようにしてください。 | ||
| 197 | + | ||
| 198 | +```dart | ||
| 199 | +Get.delete<Controller>(); // 通常であれば、GetXは未使用Controllerを自動削除するので、この作業は必要ありません。 | ||
| 200 | +``` | ||
| 201 | + | ||
| 202 | +## 依存オブジェクトの置換 | ||
| 203 | + | ||
| 204 | +注入されている依存オブジェクトは `replace` または `lazyReplace` メソッドを使って、子クラスなど関連クラスのインスタンスに置き換えることができます。これは元の抽象クラスを型指定することで取得することができます。 | ||
| 205 | + | ||
| 206 | +```dart | ||
| 207 | +abstract class BaseClass {} | ||
| 208 | +class ParentClass extends BaseClass {} | ||
| 209 | + | ||
| 210 | +class ChildClass extends ParentClass { | ||
| 211 | + bool isChild = true; | ||
| 212 | +} | ||
| 213 | + | ||
| 214 | + | ||
| 215 | +Get.put<BaseClass>(ParentClass()); | ||
| 216 | + | ||
| 217 | +Get.replace<BaseClass>(ChildClass()); | ||
| 218 | + | ||
| 219 | +final instance = Get.find<BaseClass>(); | ||
| 220 | +print(instance is ChildClass); //true | ||
| 221 | + | ||
| 222 | + | ||
| 223 | +class OtherClass extends BaseClass {} | ||
| 224 | +Get.lazyReplace<BaseClass>(() => OtherClass()); | ||
| 225 | + | ||
| 226 | +final instance = Get.find<BaseClass>(); | ||
| 227 | +print(instance is ChildClass); // false | ||
| 228 | +print(instance is OtherClass); //true | ||
| 229 | +``` | ||
| 230 | + | ||
| 231 | +## Differences between methods | ||
| 232 | + | ||
| 233 | +まずは Get.lazyPut の `fenix` プロパティと、他メソッドの `permanent` プロパティの違いについてご説明します。 | ||
| 234 | + | ||
| 235 | +`permanent` と `fenix` の根本的な違いは、インスタンスをどのように保持したいかという点に尽きます。 | ||
| 236 | + | ||
| 237 | +しつこいようですが、GetXでは使われていないインスタンスは削除されるのがデフォルトの動作です。 | ||
| 238 | +これはもし画面AがController A、画面BがController Bを持っている場合において、画面Bに遷移するときに画面Aをスタックから削除した場合（`Get.off()` や `Get.offNamed()` を使うなどして）、Controller Aは消えてなくなるということです。 | ||
| 239 | + | ||
| 240 | +しかし Get.put() する際に `permanent:true` としていれば、Controller Aはこの画面削除により失われることはありません。これはアプリケーション全体を通してControllerを残しておきたい場合に大変便利です。 | ||
| 241 | + | ||
| 242 | +一方の `fenix` は、画面削除に伴っていったんはControllerが消去されますが、再び使いたいと思ったときに復活させることができます。つまり基本的には未使用の Controller / サービス / その他クラス は消去されますが、必要なときは新しいインスタンスを「燃えカス」から作り直すことができるのです。 | ||
| 243 | + | ||
| 244 | +各メソッドを使用する際のプロセスの違いをご説明します。 | ||
| 245 | + | ||
| 246 | +- Get.put と Get.putAsync はインスタンスを作成して初期化するプロセスは同じですが、後者は非同期メソッドを使用するという違いがあります。この2つのメソッドは内部に保有するメソッド `insert` に `permanent: false` と `isSingleton: true` という引数を渡して、メモリに直接インスタンスを挿入します (この isSingleton が行っていることは、依存オブジェクトを `dependency` と `builder` プロパティのどちらから拝借するかを判断することだけです)。その後に `Get.find()` が呼ばれると、メモリ上にあるインスタンスを即座に初期化するというプロセスをたどります。 | ||
| 247 | + | ||
| 248 | +- Get.create はその名の通り、依存オブジェクトを「クリエイト」します。Get.put() と同様に内部メソッドである `insert` を呼び出してインスタンス化します。違いは `permanent: true` で `isSingleton: false` である点です (依存オブジェクトを「クリエイト」しているため、シングルトンにはなりません。それが false になっている理由です)。また `permanent: true` となっているので、デフォルトでは画面の破棄などでインスタンスを失わないというメリットがあります。また `Get.find()` はすぐに呼ばれず、画面内で実際に使用されてから呼ばれます。これは `permanent` の特性を活かすための設計ですが、それゆえ `Get.create()` は共有しないけど破棄もされないインスタンスを作成する目的で作られたと言えます。たとえば、ListViewの中のボタンアイテムに使うControllerインスタンスのように、そのリスト内でしか使わないけどリストアイテムごとに固有のインスタンスが必要なケースなどが考えられます。そのため、Get.create は GetWidget との併用がマストです。 | ||
| 249 | + | ||
| 250 | +- Get.lazyPut は初期化をlazy（遅延、消極的）に行います。実行されるとインスタンスは作成されますが、すぐに使用できるように初期化はされず、待機状態になります。また他のメソッドと異なり `insert` メソッドは呼び出されません。その代わり、インスタンスはメモリの別の部分に挿入されます。この部分を「ファクトリー」と呼ぶことにしましょう。「ファクトリー」は、そのインスタンスが再生成できるかどうかを決める役割を持っています。これは後で使う予定のものを、現在進行形で使われているものと混ざらないようにするための工夫です。ここで `fenix` によるマジックが登場します。デフォルトの `fenix: false` のままにしており、かつ `SmartManagement` が `keepFactory` ではない場合において `Get.find` を使用すると、インスタンスは「ファクトリー」から共有メモリ領域に移動します。その直後にインスタンスは「ファクトリー」から削除されます。しかし `fenix: true` としていた場合、インスタンスは「ファクトリー」に残るため、共有メモリ領域から削除されても再び呼び出すことができるのです。 | ||
| 251 | + | ||
| 252 | +## Bindings（Routeと依存オブジェクトの結束） | ||
| 253 | + | ||
| 254 | +このパッケージの一番の差別化要素は、Route管理 / 状態管理 / 依存オブジェクト管理 を統合したことにあると思っています。 | ||
| 255 | +スタックからRouteが削除されれば、関係するController、変数、オブジェクトのインスタンスがすべてメモリから削除されます。たとえばStreamやTimerを使用している場合も同様ですので、開発者は何も心配する必要はありません。 | ||
| 256 | +Getはバージョン2.10からBindings APIをフル実装しました。 | ||
| 257 | +Bindingsを使用すれば init でControllerを起動する必要はありません。またControllerの型を指定する必要もありません。Controllerやサービスは各々適切な場所で起動することができるようになりました。 | ||
| 258 | +Bindingsは依存オブジェクトの注入をビューから切り離すことができるクラスです。それに加え、状態と依存オブジェクトの管理機能をRouteに「結束（bind）」してくれます。 | ||
| 259 | +これによりGetは、あるControllerが使用されたときにどの画面UIが表示されているかを知ることができます。つまり、そのControllerをどのタイミングでどう処分するかを判断することができるということです。 | ||
| 260 | +さらにBindingsでは SmartManager の制御により、依存オブジェクトをどのタイミング（スタックからRouteを削除したときか、それに依存するWidgetを表示したときか、いずれでもないか）で整理するかを設定することができます。インテリジェントな依存オブジェクトの自動管理機能を持ちつつ、自分の好きなように設定できるのです。 | ||
| 261 | + | ||
| 262 | +### Bindingsクラス | ||
| 263 | + | ||
| 264 | +- Bindings機能を実装したクラスを作成することができます。 | ||
| 265 | + | ||
| 266 | +```dart | ||
| 267 | +class HomeBinding implements Bindings {} | ||
| 268 | +``` | ||
| 269 | + | ||
| 270 | +"dependencies" メソッドをオーバーライドするようIDEに自動で指摘されます。表示をクリックしてメソッドを override し、そのRoute内で使用するすべてのクラスを挿入してください。 | ||
| 271 | + | ||
| 272 | +```dart | ||
| 273 | +class HomeBinding implements Bindings { | ||
| 274 | + @override | ||
| 275 | + void dependencies() { | ||
| 276 | + Get.lazyPut<HomeController>(() => HomeController()); | ||
| 277 | + Get.put<Service>(()=> Api()); | ||
| 278 | + } | ||
| 279 | +} | ||
| 280 | + | ||
| 281 | +class DetailsBinding implements Bindings { | ||
| 282 | + @override | ||
| 283 | + void dependencies() { | ||
| 284 | + Get.lazyPut<DetailsController>(() => DetailsController()); | ||
| 285 | + } | ||
| 286 | +} | ||
| 287 | +``` | ||
| 288 | + | ||
| 289 | +Bindingsを設定したら、このクラスが Route管理 / 依存オブジェクト管理 / 状態管理 を互いに接続する目的で使用されるものだということをRouteに知らせてあげます。 | ||
| 290 | + | ||
| 291 | +- 名前付きRouteを使う場合 | ||
| 292 | + | ||
| 293 | +```dart | ||
| 294 | +getPages: [ | ||
| 295 | + GetPage( | ||
| 296 | + name: '/', | ||
| 297 | + page: () => HomeView(), | ||
| 298 | + binding: HomeBinding(), | ||
| 299 | + ), | ||
| 300 | + GetPage( | ||
| 301 | + name: '/details', | ||
| 302 | + page: () => DetailsView(), | ||
| 303 | + binding: DetailsBinding(), | ||
| 304 | + ), | ||
| 305 | +]; | ||
| 306 | +``` | ||
| 307 | + | ||
| 308 | +- 通常のRouteを使う場合 | ||
| 309 | + | ||
| 310 | +```dart | ||
| 311 | +Get.to(Home(), binding: HomeBinding()); | ||
| 312 | +Get.to(DetailsView(), binding: DetailsBinding()) | ||
| 313 | +``` | ||
| 314 | + | ||
| 315 | +これでアプリケーションのメモリ管理を気にする必要がなくなります。Getがすべてやってくれます。 | ||
| 316 | + | ||
| 317 | +BindingsクラスはRouteの呼び出しと同時に呼び出されます。また、すべてに共通の依存オブジェクトを挿入するためには GetMaterialApp の initialBinding プロパティを使用してください。 | ||
| 318 | + | ||
| 319 | +```dart | ||
| 320 | +GetMaterialApp( | ||
| 321 | + initialBinding: SampleBind(), | ||
| 322 | + home: Home(), | ||
| 323 | +); | ||
| 324 | +``` | ||
| 325 | + | ||
| 326 | +### BindingsBuilder | ||
| 327 | + | ||
| 328 | +Bindingsを作成する一般的な方法は Bindings を実装したクラスを作成することですが、`BindingsBuilder` コールバックを使う方法もあります。 | ||
| 329 | + | ||
| 330 | +Example: | ||
| 331 | + | ||
| 332 | +```dart | ||
| 333 | +getPages: [ | ||
| 334 | + GetPage( | ||
| 335 | + name: '/', | ||
| 336 | + page: () => HomeView(), | ||
| 337 | + binding: BindingsBuilder(() { | ||
| 338 | + Get.lazyPut<ControllerX>(() => ControllerX()); | ||
| 339 | + Get.put<Service>(()=> Api()); | ||
| 340 | + }), | ||
| 341 | + ), | ||
| 342 | + GetPage( | ||
| 343 | + name: '/details', | ||
| 344 | + page: () => DetailsView(), | ||
| 345 | + binding: BindingsBuilder(() { | ||
| 346 | + Get.lazyPut<DetailsController>(() => DetailsController()); | ||
| 347 | + }), | ||
| 348 | + ), | ||
| 349 | +]; | ||
| 350 | +``` | ||
| 351 | + | ||
| 352 | +この方法ならRouteごとにBindingsクラスを作る必要はありません。 | ||
| 353 | + | ||
| 354 | +どちらの方法でも効果は変わりませんのでお好みの方法を使ってください。 | ||
| 355 | + | ||
| 356 | +### SmartManagement | ||
| 357 | + | ||
| 358 | +エラーが発生してControllerを使用するWidgetが正しく破棄されなかった場合でも、Controllerが未使用になればGetXはデフォルトの動作通りそれをメモリから削除します。 | ||
| 359 | +これがいわゆる依存オブジェクト管理機能の `full` モードと呼ばれるものです。 | ||
| 360 | +しかしもしGetXによるオブジェクト破棄の方法をコントロールしたい場合は、`SmartManagement`クラスを使って設定してください。 | ||
| 361 | + | ||
| 362 | +#### 設定の変更方法 | ||
| 363 | + | ||
| 364 | +この設定は通常変更する必要はありませんが、変更されたい場合はこのようにしてください。 | ||
| 365 | + | ||
| 366 | +```dart | ||
| 367 | +void main () { | ||
| 368 | + runApp( | ||
| 369 | + GetMaterialApp( | ||
| 370 | + smartManagement: SmartManagement.onlyBuilder // ここで設定 | ||
| 371 | + home: Home(), | ||
| 372 | + ) | ||
| 373 | + ) | ||
| 374 | +} | ||
| 375 | +``` | ||
| 376 | + | ||
| 377 | +#### SmartManagement.full | ||
| 378 | + | ||
| 379 | +これがデフォルトのモードです。使用されていない、かつ `permanent: true` が設定されていないオブジェクトを自動で破棄してくれます。特殊な事情がない限り、この設定は触らない方がいいでしょう。GetXを使って間がない場合は特に。 | ||
| 380 | + | ||
| 381 | +#### SmartManagement.onlyBuilder | ||
| 382 | +`init:` もしくはBindings内で `Get.lazyPut()` により設定したビルダー製のオブジェクトだけを破棄するモードです。 | ||
| 383 | + | ||
| 384 | +もしそれが `Get.put()` や `Get.putAsync()` などのアプローチで生成したオブジェクトだとしたら、SmartManagement は勝手にメモリから除外することはできません。 | ||
| 385 | + | ||
| 386 | +それに対してデフォルトのモードでは `Get.put()` で生成したオブジェクトも破棄します。 | ||
| 387 | + | ||
| 388 | +#### SmartManagement.keepFactory | ||
| 389 | + | ||
| 390 | +SmartManagement.full と同じように、オブジェクトが使用されていない状態になれば破棄します。ただし、前述の「ファクトリー」に存在するものだけは残します。つまりそのインスタンスが再び必要になった際は依存オブジェクトを再度生成するということです。 | ||
| 391 | + | ||
| 392 | +### Bindingsの仕組み | ||
| 393 | +Bindingsは「一過性のファクトリー」のようなものを作成します。これはそのRouteに画面遷移した瞬間に作成され、そこから画面移動するアニメーションが発生した瞬間に破棄されます。 | ||
| 394 | +この動作は非常に高速で行われるので、アナライザーでは捕捉できないほどです。 | ||
| 395 | +再び元の画面に戻ると新しい「一過性のファクトリー」が呼び出されます。そのためこれは SmartManagement.keepFactory を使用するよりも多くの場合好ましいですが、Bindingsを作成したくない場合やすべての依存オブジェクトを同じBindingsに持っておきたい場合は SmartManagement.keepFactory を使うといいでしょう。 | ||
| 396 | +ファクトリーのメモリ使用量は少なく、インスタンスを保持することはありません。その代わりにそのクラスのインスタンスを形作る関数を保持します。 | ||
| 397 | +メモリコストは非常に低いのですが、最小リソースで最大パフォーマンスを得ることが目的のGetではデフォルトでファクトリーを削除します。 | ||
| 398 | +どちらか都合に合う方ををお使いいただければと思います。 | ||
| 399 | + | ||
| 400 | +## 補足 | ||
| 401 | + | ||
| 402 | +- 複数のBindingsを使う場合は SmartManagement.keepFactory は**使わない**でください。これは Bindings を使わないケースや、GetMaterialAppのinitialBindingに設定された単独のBindingと一緒に使うケースを想定されて作られました。 | ||
| 403 | + | ||
| 404 | +- Bindingsを使うことは必須ではありません。`Get.put()` と `Get.find()` だけでも全く問題ありません。 | ||
| 405 | +ただし、サービスやその他抽象度の高いクラスをアプリに取り入れる場合はコード整理のために使うことをおすすめします。 |
documentation/ja_JP/route_management.md
0 → 100644
| 1 | +- [Route管理](#Route管理) | ||
| 2 | + - [使い方](#使い方) | ||
| 3 | + - [通常Routeによるナビゲーション](#通常Routeによるナビゲーション) | ||
| 4 | + - [名前付きRouteによるナビゲーション](#名前付きRouteによるナビゲーション) | ||
| 5 | + - [名前付きRouteにデータを送る](#名前付きRouteにデータを送る) | ||
| 6 | + - [動的URLの生成](#動的URLの生成) | ||
| 7 | + - [ミドルウェアの使用](#ミドルウェアの使用) | ||
| 8 | + - [contextを使わないナビゲーション](#contextを使わないナビゲーション) | ||
| 9 | + - [SnackBar](#snackbar) | ||
| 10 | + - [Dialog](#dialog) | ||
| 11 | + - [BottomSheet](#bottomsheet) | ||
| 12 | + - [ネスト構造のナビゲーション](#ネスト構造のナビゲーション) | ||
| 13 | + | ||
| 14 | +# Route管理 | ||
| 15 | + | ||
| 16 | +このドキュメントではGetXにおけるRoute管理のすべてをご説明します。 | ||
| 17 | + | ||
| 18 | +## How to use | ||
| 19 | + | ||
| 20 | +次の3文字を pubspec.yaml ファイルに追加してください。 | ||
| 21 | + | ||
| 22 | +```yaml | ||
| 23 | +dependencies: | ||
| 24 | + get: | ||
| 25 | +``` | ||
| 26 | + | ||
| 27 | +Route / SnackBar / Dialog / BottomSheet をcontextなしで、あるいは高レベルのGet APIを使用するには MaterialApp の前に「Get」を追加してください。それだけで GetMaterialApp の機能が使用できます。 | ||
| 28 | + | ||
| 29 | +```dart | ||
| 30 | +GetMaterialApp( // 変更前: MaterialApp( | ||
| 31 | + home: MyHome(), | ||
| 32 | +) | ||
| 33 | +``` | ||
| 34 | + | ||
| 35 | +## 名前付きRouteによる画面遷移 | ||
| 36 | + | ||
| 37 | +次の画面に遷移するには Get.to を使ってください。 | ||
| 38 | + | ||
| 39 | +```dart | ||
| 40 | +Get.to(NextScreen()); | ||
| 41 | +``` | ||
| 42 | + | ||
| 43 | +SnackBar / Dialog / BottomSheet など Navigator.pop(context) で閉じるものと同じものを閉じるには Get.back を使います。 | ||
| 44 | + | ||
| 45 | +```dart | ||
| 46 | +Get.back(); | ||
| 47 | +``` | ||
| 48 | + | ||
| 49 | +次の画面に遷移しつつ、前の画面に戻れないようにするには Get.off を使います（スプラッシュスクリーンやログイン画面などで使用)。 | ||
| 50 | + | ||
| 51 | +```dart | ||
| 52 | +Get.off(NextScreen()); | ||
| 53 | +``` | ||
| 54 | + | ||
| 55 | +次の画面に遷移して、それ以前のRouteはすべて破棄するには Get.offAll を使います（ショッピングカート、投票、テストなどで使用) | ||
| 56 | + | ||
| 57 | +```dart | ||
| 58 | +Get.offAll(NextScreen()); | ||
| 59 | +``` | ||
| 60 | + | ||
| 61 | +次の画面に遷移して、戻ったらデータを受け取る方法はこちら。 | ||
| 62 | + | ||
| 63 | +```dart | ||
| 64 | +var data = await Get.to(Payment()); | ||
| 65 | +``` | ||
| 66 | + | ||
| 67 | +次の画面では、このようにデータを前の画面に送る必要があります。 | ||
| 68 | + | ||
| 69 | +```dart | ||
| 70 | +Get.back(result: 'success'); | ||
| 71 | +``` | ||
| 72 | + | ||
| 73 | +そして使いましょう。 | ||
| 74 | + | ||
| 75 | +ex: | ||
| 76 | + | ||
| 77 | +```dart | ||
| 78 | +if(data == 'success') madeAnything(); | ||
| 79 | +``` | ||
| 80 | + | ||
| 81 | +どのようなシンタックスがあるかもっと知りたいですか？ | ||
| 82 | +いつもの Navigator ではなく navigator と入れてみてください。通常のNavigatorで使えるプロパティがcontextなしで使えるようになっているかと思います。 | ||
| 83 | + | ||
| 84 | +```dart | ||
| 85 | + | ||
| 86 | +// 通常のFlutterによるNavigator | ||
| 87 | +Navigator.of(context).push( | ||
| 88 | + context, | ||
| 89 | + MaterialPageRoute( | ||
| 90 | + builder: (BuildContext context) { | ||
| 91 | + return HomePage(); | ||
| 92 | + }, | ||
| 93 | + ), | ||
| 94 | +); | ||
| 95 | + | ||
| 96 | +// GetではFlutterのシンタックスをcontextなしで使えます | ||
| 97 | +navigator.push( | ||
| 98 | + MaterialPageRoute( | ||
| 99 | + builder: (_) { | ||
| 100 | + return HomePage(); | ||
| 101 | + }, | ||
| 102 | + ), | ||
| 103 | +); | ||
| 104 | + | ||
| 105 | +// Getのシンタックス（上記よりかなり短いですね） | ||
| 106 | +Get.to(HomePage()); | ||
| 107 | + | ||
| 108 | + | ||
| 109 | +``` | ||
| 110 | + | ||
| 111 | +## 名前付きRouteによる画面遷移 | ||
| 112 | + | ||
| 113 | +- Getは名前付きRouteによる遷移もサポートしています。 | ||
| 114 | + | ||
| 115 | +次の画面への遷移はこう。 | ||
| 116 | + | ||
| 117 | +```dart | ||
| 118 | +Get.toNamed("/NextScreen"); | ||
| 119 | +``` | ||
| 120 | + | ||
| 121 | +Get.off の名前付きRoute版。 | ||
| 122 | + | ||
| 123 | +```dart | ||
| 124 | +Get.offNamed("/NextScreen"); | ||
| 125 | +``` | ||
| 126 | + | ||
| 127 | +Get.offAll の名前付きRoute版。 | ||
| 128 | + | ||
| 129 | +```dart | ||
| 130 | +Get.offAllNamed("/NextScreen"); | ||
| 131 | +``` | ||
| 132 | + | ||
| 133 | +Routeを定義するにはGetMaterialAppを使ってください。 | ||
| 134 | + | ||
| 135 | +```dart | ||
| 136 | +void main() { | ||
| 137 | + runApp( | ||
| 138 | + GetMaterialApp( | ||
| 139 | + initialRoute: '/', | ||
| 140 | + getPages: [ | ||
| 141 | + GetPage(name: '/', page: () => MyHomePage()), | ||
| 142 | + GetPage(name: '/second', page: () => Second()), | ||
| 143 | + GetPage( | ||
| 144 | + name: '/third', | ||
| 145 | + page: () => Third(), | ||
| 146 | + transition: Transition.zoom | ||
| 147 | + ), | ||
| 148 | + ], | ||
| 149 | + ) | ||
| 150 | + ); | ||
| 151 | +} | ||
| 152 | +``` | ||
| 153 | + | ||
| 154 | +未定義Route（404エラー）に遷移させるには、GetMaterialAppで unknownRoute を設定してください。 | ||
| 155 | + | ||
| 156 | +```dart | ||
| 157 | +void main() { | ||
| 158 | + runApp( | ||
| 159 | + GetMaterialApp( | ||
| 160 | + unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()), | ||
| 161 | + initialRoute: '/', | ||
| 162 | + getPages: [ | ||
| 163 | + GetPage(name: '/', page: () => MyHomePage()), | ||
| 164 | + GetPage(name: '/second', page: () => Second()), | ||
| 165 | + ], | ||
| 166 | + ) | ||
| 167 | + ); | ||
| 168 | +} | ||
| 169 | +``` | ||
| 170 | + | ||
| 171 | +### 名前付きRouteにデータを送る | ||
| 172 | + | ||
| 173 | +次の画面に渡すデータは arguments で引数を設定します。Getでは引数にどんなものでも指定できます。StringでもMapでもListでも、クラスのインスタンスでも大丈夫です。 | ||
| 174 | + | ||
| 175 | +```dart | ||
| 176 | +Get.toNamed("/NextScreen", arguments: 'Get is the best'); | ||
| 177 | +``` | ||
| 178 | + | ||
| 179 | +ビュー側のクラスやControllerで値を使うにはこうしてください。 | ||
| 180 | + | ||
| 181 | +```dart | ||
| 182 | +print(Get.arguments); | ||
| 183 | +// Get is the best が表示される | ||
| 184 | +``` | ||
| 185 | + | ||
| 186 | +### 動的URLの生成 | ||
| 187 | + | ||
| 188 | +Getはウェブのような高度な動的URLを提供します。ウェブ開発者はFlutterにこの機能が提供されることを待ち望んでいたことでしょう。この機能の提供を謳うパッケージは存在しますが、ウェブ上のURLとは全く異なるシンタックスが表示されているのを見たことがあるかもしれません。Getはこの点も解決します。 | ||
| 189 | + | ||
| 190 | +```dart | ||
| 191 | +Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo"); | ||
| 192 | +``` | ||
| 193 | + | ||
| 194 | +ビュー側のクラスやControllerで値を使う方法。 | ||
| 195 | + | ||
| 196 | +```dart | ||
| 197 | +print(Get.parameters['id']); | ||
| 198 | +// 出力: 354 | ||
| 199 | +print(Get.parameters['name']); | ||
| 200 | +// 出力: Enzo | ||
| 201 | +``` | ||
| 202 | + | ||
| 203 | +この名前付きパラメーターはこのように簡単に受け取ることもできます。 | ||
| 204 | + | ||
| 205 | +```dart | ||
| 206 | +void main() { | ||
| 207 | + runApp( | ||
| 208 | + GetMaterialApp( | ||
| 209 | + initialRoute: '/', | ||
| 210 | + getPages: [ | ||
| 211 | + GetPage( | ||
| 212 | + name: '/', | ||
| 213 | + page: () => MyHomePage(), | ||
| 214 | + ), | ||
| 215 | + GetPage( | ||
| 216 | + name: '/profile/', | ||
| 217 | + page: () => MyProfile(), | ||
| 218 | + ), | ||
| 219 | + // 引数userを使う場合と使わない場合で別ページを定義することが可能です。 | ||
| 220 | + // ただ、そのためにはスラッシュ '/' をベースのRoute名の後に入れる必要があります。 | ||
| 221 | + GetPage( | ||
| 222 | + name: '/profile/:user', | ||
| 223 | + page: () => UserProfile(), | ||
| 224 | + ), | ||
| 225 | + GetPage( | ||
| 226 | + name: '/third', | ||
| 227 | + page: () => Third(), | ||
| 228 | + transition: Transition.cupertino | ||
| 229 | + ), | ||
| 230 | + ], | ||
| 231 | + ) | ||
| 232 | + ); | ||
| 233 | +} | ||
| 234 | +``` | ||
| 235 | + | ||
| 236 | +Route名を使ってデータを送る方法。 | ||
| 237 | + | ||
| 238 | +```dart | ||
| 239 | +Get.toNamed("/profile/34954"); | ||
| 240 | +``` | ||
| 241 | + | ||
| 242 | +次の画面でデータを受け取る方法。 | ||
| 243 | + | ||
| 244 | +```dart | ||
| 245 | +print(Get.parameters['user']); | ||
| 246 | +// out: 34954 | ||
| 247 | +``` | ||
| 248 | + | ||
| 249 | +複数のパラメーターを送信するにはこちら。 | ||
| 250 | + | ||
| 251 | +```dart | ||
| 252 | +Get.toNamed("/profile/34954?flag=true&country=italy"); | ||
| 253 | +``` | ||
| 254 | +もしくは | ||
| 255 | +```dart | ||
| 256 | +var parameters = <String, String>{"flag": "true","country": "italy",}; | ||
| 257 | +Get.toNamed("/profile/34954", parameters: parameters); | ||
| 258 | +``` | ||
| 259 | + | ||
| 260 | +次の画面でデータを受け取る方法。 | ||
| 261 | + | ||
| 262 | +```dart | ||
| 263 | +print(Get.parameters['user']); | ||
| 264 | +print(Get.parameters['flag']); | ||
| 265 | +print(Get.parameters['country']); | ||
| 266 | +// 出力: 34954 true italy | ||
| 267 | +``` | ||
| 268 | + | ||
| 269 | + | ||
| 270 | + | ||
| 271 | +あとは Get.toNamed() を使い、名前付きRouteを指定するだけです（contextを使わないので BLoC や Controller から直接Routeを呼び出すことができます）。ウェブアプリとしてコンパイルされると、Routeが正しくURLに表示されます。 | ||
| 272 | + | ||
| 273 | +### ミドルウェアの使用 | ||
| 274 | + | ||
| 275 | +何かのアクションのトリガーとなるイベントを取得したい場合は、routingCallbackを使用してください。 | ||
| 276 | + | ||
| 277 | +```dart | ||
| 278 | +GetMaterialApp( | ||
| 279 | + routingCallback: (routing) { | ||
| 280 | + if(routing.current == '/second'){ | ||
| 281 | + openAds(); | ||
| 282 | + } | ||
| 283 | + } | ||
| 284 | +) | ||
| 285 | +``` | ||
| 286 | + | ||
| 287 | +GetMaterialAppを使用しない場合は、手動のAPIを使ってミドルウェアオブザーバーを設定してください。 | ||
| 288 | + | ||
| 289 | +```dart | ||
| 290 | +void main() { | ||
| 291 | + runApp( | ||
| 292 | + MaterialApp( | ||
| 293 | + onGenerateRoute: Router.generateRoute, | ||
| 294 | + initialRoute: "/", | ||
| 295 | + navigatorKey: Get.key, | ||
| 296 | + navigatorObservers: [ | ||
| 297 | + GetObserver(MiddleWare.observer), // ここ | ||
| 298 | + ], | ||
| 299 | + ), | ||
| 300 | + ); | ||
| 301 | +} | ||
| 302 | +``` | ||
| 303 | + | ||
| 304 | +ミドルウェアクラスを作成する | ||
| 305 | + | ||
| 306 | +```dart | ||
| 307 | +class MiddleWare { | ||
| 308 | + static observer(Routing routing) { | ||
| 309 | + /// Routeの他に SnackBar / Dialog / BottomSheet のイベントも監視することができます。 | ||
| 310 | + /// また、ここで直接この3つのいずれかを表示したい場合は、 | ||
| 311 | + /// イベント自身が「それではない」ことを事前にチェックする必要があります。 | ||
| 312 | + if (routing.current == '/second' && !routing.isSnackbar) { | ||
| 313 | + Get.snackbar("Hi", "You are on second route"); | ||
| 314 | + } else if (routing.current =='/third'){ | ||
| 315 | + print('last route called'); | ||
| 316 | + } | ||
| 317 | + } | ||
| 318 | +} | ||
| 319 | +``` | ||
| 320 | + | ||
| 321 | +それではGetをコードで使ってみましょう。 | ||
| 322 | + | ||
| 323 | +```dart | ||
| 324 | +class First extends StatelessWidget { | ||
| 325 | + @override | ||
| 326 | + Widget build(BuildContext context) { | ||
| 327 | + return Scaffold( | ||
| 328 | + appBar: AppBar( | ||
| 329 | + leading: IconButton( | ||
| 330 | + icon: Icon(Icons.add), | ||
| 331 | + onPressed: () { | ||
| 332 | + Get.snackbar("hi", "i am a modern snackbar"); | ||
| 333 | + }, | ||
| 334 | + ), | ||
| 335 | + title: Text('First Route'), | ||
| 336 | + ), | ||
| 337 | + body: Center( | ||
| 338 | + child: ElevatedButton( | ||
| 339 | + child: Text('Open route'), | ||
| 340 | + onPressed: () { | ||
| 341 | + Get.toNamed("/second"); | ||
| 342 | + }, | ||
| 343 | + ), | ||
| 344 | + ), | ||
| 345 | + ); | ||
| 346 | + } | ||
| 347 | +} | ||
| 348 | + | ||
| 349 | +class Second extends StatelessWidget { | ||
| 350 | + @override | ||
| 351 | + Widget build(BuildContext context) { | ||
| 352 | + return Scaffold( | ||
| 353 | + appBar: AppBar( | ||
| 354 | + leading: IconButton( | ||
| 355 | + icon: Icon(Icons.add), | ||
| 356 | + onPressed: () { | ||
| 357 | + Get.snackbar("hi", "i am a modern snackbar"); | ||
| 358 | + }, | ||
| 359 | + ), | ||
| 360 | + title: Text('second Route'), | ||
| 361 | + ), | ||
| 362 | + body: Center( | ||
| 363 | + child: ElevatedButton( | ||
| 364 | + child: Text('Open route'), | ||
| 365 | + onPressed: () { | ||
| 366 | + Get.toNamed("/third"); | ||
| 367 | + }, | ||
| 368 | + ), | ||
| 369 | + ), | ||
| 370 | + ); | ||
| 371 | + } | ||
| 372 | +} | ||
| 373 | + | ||
| 374 | +class Third extends StatelessWidget { | ||
| 375 | + @override | ||
| 376 | + Widget build(BuildContext context) { | ||
| 377 | + return Scaffold( | ||
| 378 | + appBar: AppBar( | ||
| 379 | + title: Text("Third Route"), | ||
| 380 | + ), | ||
| 381 | + body: Center( | ||
| 382 | + child: ElevatedButton( | ||
| 383 | + onPressed: () { | ||
| 384 | + Get.back(); | ||
| 385 | + }, | ||
| 386 | + child: Text('Go back!'), | ||
| 387 | + ), | ||
| 388 | + ), | ||
| 389 | + ); | ||
| 390 | + } | ||
| 391 | +} | ||
| 392 | +``` | ||
| 393 | + | ||
| 394 | +## contextを使わないナビゲーション | ||
| 395 | + | ||
| 396 | +### SnackBar | ||
| 397 | + | ||
| 398 | +FlutterでシンプルなSnackBarを表示したいとき、Scaffoldのcontextか、GlobalKeyを取得する必要があります。 | ||
| 399 | + | ||
| 400 | +```dart | ||
| 401 | +final snackBar = SnackBar( | ||
| 402 | + content: Text('Hi!'), | ||
| 403 | + action: SnackBarAction( | ||
| 404 | + label: 'I am a old and ugly snackbar :(', | ||
| 405 | + onPressed: (){} | ||
| 406 | + ), | ||
| 407 | +); | ||
| 408 | +// WidgetツリーでScaffoldを探し、それをSnackBar表示に使用します。 | ||
| 409 | +Scaffold.of(context).showSnackBar(snackBar); | ||
| 410 | +``` | ||
| 411 | + | ||
| 412 | +Getならこうなります。 | ||
| 413 | + | ||
| 414 | +```dart | ||
| 415 | +Get.snackbar('Hi', 'i am a modern snackbar'); | ||
| 416 | +``` | ||
| 417 | + | ||
| 418 | +コードのどこにいようと、Get.snackbar を呼ぶだけでいいのです。カスタマイズも自由自在です。 | ||
| 419 | + | ||
| 420 | +```dart | ||
| 421 | +Get.snackbar( | ||
| 422 | + "Hey i'm a Get SnackBar!", // タイトル | ||
| 423 | + "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // 本文 | ||
| 424 | + icon: Icon(Icons.alarm), | ||
| 425 | + shouldIconPulse: true, | ||
| 426 | + onTap:(){}, | ||
| 427 | + barBlur: 20, | ||
| 428 | + isDismissible: true, | ||
| 429 | + duration: Duration(seconds: 3), | ||
| 430 | +); | ||
| 431 | + | ||
| 432 | + | ||
| 433 | + ////////// すべてのプロパティ ////////// | ||
| 434 | + // Color colorText, | ||
| 435 | + // Duration duration, | ||
| 436 | + // SnackPosition snackPosition, | ||
| 437 | + // Widget titleText, | ||
| 438 | + // Widget messageText, | ||
| 439 | + // bool instantInit, | ||
| 440 | + // Widget icon, | ||
| 441 | + // bool shouldIconPulse, | ||
| 442 | + // double maxWidth, | ||
| 443 | + // EdgeInsets margin, | ||
| 444 | + // EdgeInsets padding, | ||
| 445 | + // double borderRadius, | ||
| 446 | + // Color borderColor, | ||
| 447 | + // double borderWidth, | ||
| 448 | + // Color backgroundColor, | ||
| 449 | + // Color leftBarIndicatorColor, | ||
| 450 | + // List<BoxShadow> boxShadows, | ||
| 451 | + // Gradient backgroundGradient, | ||
| 452 | + // TextButton mainButton, | ||
| 453 | + // OnTap onTap, | ||
| 454 | + // bool isDismissible, | ||
| 455 | + // bool showProgressIndicator, | ||
| 456 | + // AnimationController progressIndicatorController, | ||
| 457 | + // Color progressIndicatorBackgroundColor, | ||
| 458 | + // Animation<Color> progressIndicatorValueColor, | ||
| 459 | + // SnackStyle snackStyle, | ||
| 460 | + // Curve forwardAnimationCurve, | ||
| 461 | + // Curve reverseAnimationCurve, | ||
| 462 | + // Duration animationDuration, | ||
| 463 | + // double barBlur, | ||
| 464 | + // double overlayBlur, | ||
| 465 | + // Color overlayColor, | ||
| 466 | + // Form userInputForm | ||
| 467 | + /////////////////////////////////// | ||
| 468 | +``` | ||
| 469 | + | ||
| 470 | +従来の SnackBar がお好みの場合や、ゼロからカスタマイズしたい場合 (たとえば Get.snackbar ではタイトルと本文が必須項目となっています)は `Get.rawSnackbar();` を使ってください。SnackBarの元々のAPIを取得できます。 | ||
| 471 | + | ||
| 472 | +### Dialog | ||
| 473 | + | ||
| 474 | +ダイアログを表示する方法。 | ||
| 475 | + | ||
| 476 | +```dart | ||
| 477 | +Get.dialog(YourDialogWidget()); | ||
| 478 | +``` | ||
| 479 | + | ||
| 480 | +デフォルトのダイアログを表示する方法。 | ||
| 481 | + | ||
| 482 | +```dart | ||
| 483 | +Get.defaultDialog( | ||
| 484 | + onConfirm: () => print("Ok"), | ||
| 485 | + middleText: "Dialog made in 3 lines of code" | ||
| 486 | +); | ||
| 487 | +``` | ||
| 488 | + | ||
| 489 | +また showGeneralDialog の代わりに Get.generalDialog が使えます。 | ||
| 490 | + | ||
| 491 | +Overlayを使用するCupertino含むその他のFlutterのダイアログについては、contextの代わりに Get.overlayContext を使うことでコードのどこでもダイアログを表示することができます。 | ||
| 492 | +Overlayを使わないWidgetについては、Get.context が使えます。 | ||
| 493 | +これら2つのcontextはほとんどのケースでUIのcontextを代替することができるでしょう。ただし、ナビゲーションのcontextを使用せずInheritedWidgetが使われているケースは例外です。 | ||
| 494 | + | ||
| 495 | +### BottomSheet | ||
| 496 | + | ||
| 497 | +Get.bottomSheet は showModalBottomSheet に似ていますが、contextが不要です。 | ||
| 498 | + | ||
| 499 | +```dart | ||
| 500 | +Get.bottomSheet( | ||
| 501 | + Container( | ||
| 502 | + child: Wrap( | ||
| 503 | + children: <Widget>[ | ||
| 504 | + ListTile( | ||
| 505 | + leading: Icon(Icons.music_note), | ||
| 506 | + title: Text('Music'), | ||
| 507 | + onTap: () {} | ||
| 508 | + ), | ||
| 509 | + ListTile( | ||
| 510 | + leading: Icon(Icons.videocam), | ||
| 511 | + title: Text('Video'), | ||
| 512 | + onTap: () {}, | ||
| 513 | + ), | ||
| 514 | + ], | ||
| 515 | + ), | ||
| 516 | + ) | ||
| 517 | +); | ||
| 518 | +``` | ||
| 519 | + | ||
| 520 | +## ネスト構造のナビゲーション | ||
| 521 | + | ||
| 522 | +GetはFlutterのネスト構造のナビゲーションの扱いも簡単にしてくれます。 | ||
| 523 | +contextを必要とせず、IDによりナビゲーションのスタックを見つけることができます。 | ||
| 524 | + | ||
| 525 | +- 注: 並列のナビゲーションスタックを作成することは危険です。ネスト構造のNavigatorを使用しないか、使用を控えめにするのが理想です。必要なら使っていただいても問題ありませんが、複数のナビゲーションのスタックを保持することはRAM消費の面で好ましくないということは覚えておいてください。 | ||
| 526 | + | ||
| 527 | +こんなに簡単にできます。 | ||
| 528 | + | ||
| 529 | +```dart | ||
| 530 | +Navigator( | ||
| 531 | + key: Get.nestedKey(1), // インデックス指定でkey作成 | ||
| 532 | + initialRoute: '/', | ||
| 533 | + onGenerateRoute: (settings) { | ||
| 534 | + if (settings.name == '/') { | ||
| 535 | + return GetPageRoute( | ||
| 536 | + page: () => Scaffold( | ||
| 537 | + appBar: AppBar( | ||
| 538 | + title: Text("Main"), | ||
| 539 | + ), | ||
| 540 | + body: Center( | ||
| 541 | + child: TextButton( | ||
| 542 | + color: Colors.blue, | ||
| 543 | + onPressed: () { | ||
| 544 | + Get.toNamed('/second', id:1); // インデックス指定でネスト型Routeに遷移 | ||
| 545 | + }, | ||
| 546 | + child: Text("Go to second"), | ||
| 547 | + ), | ||
| 548 | + ), | ||
| 549 | + ), | ||
| 550 | + ); | ||
| 551 | + } else if (settings.name == '/second') { | ||
| 552 | + return GetPageRoute( | ||
| 553 | + page: () => Center( | ||
| 554 | + child: Scaffold( | ||
| 555 | + appBar: AppBar( | ||
| 556 | + title: Text("Main"), | ||
| 557 | + ), | ||
| 558 | + body: Center( | ||
| 559 | + child: Text("second") | ||
| 560 | + ), | ||
| 561 | + ), | ||
| 562 | + ), | ||
| 563 | + ); | ||
| 564 | + } | ||
| 565 | + } | ||
| 566 | +), | ||
| 567 | +``` |
documentation/ja_JP/state_management.md
0 → 100644
| 1 | +* [状態管理](#状態管理) | ||
| 2 | + + [リアクティブな状態管理](#リアクティブな状態管理) | ||
| 3 | + - [利点](#利点) | ||
| 4 | + - [パフォーマンスの最大化](#パフォーマンスの最大化) | ||
| 5 | + - [リアクティブな変数の宣言](#リアクティブな変数の宣言) | ||
| 6 | + - [初期値の設定](#初期値の設定) | ||
| 7 | + - [Observableの値をビュー内で使う](#Observableの値をビュー内で使う) | ||
| 8 | + - [更新条件を設定](#更新条件を設定) | ||
| 9 | + - [.obsの使いどころ](#.obsの使いどころ) | ||
| 10 | + - [List(Rx)に関する補足](#List(Rx)に関する補足) | ||
| 11 | + - [なぜ「.value」を使う必要があるのか](#なぜ「.value」を使う必要があるのか) | ||
| 12 | + - [Obx()](#obx) | ||
| 13 | + - [Worker](#worker) | ||
| 14 | + + [非リアクティブな状態管理](#非リアクティブな状態管理) | ||
| 15 | + - [利点](#利点) | ||
| 16 | + - [使用例](#使用例) | ||
| 17 | + - [Controllerインスタンスの扱い](#Controllerインスタンスの扱い) | ||
| 18 | + - [StatefulWidgetsはもういらない](#StatefulWidgetsはもういらない) | ||
| 19 | + - [Getの目的](#Getの目的) | ||
| 20 | + - [Controllerの様々な使用方法](#Controllerの様々な使用方法) | ||
| 21 | + - [ユニークIDの設定](#ユニークIDの設定) | ||
| 22 | + + [状態管理ソリューションを混在させる](#状態管理ソリューションを混在させる) | ||
| 23 | + + [StateMixin](#StateMixin) | ||
| 24 | + + [GetBuilder VS GetX VS Obx VS MixinBuilder](#GetBuilder-VS-GetX-VS-Obx-VS-MixinBuilder) | ||
| 25 | + | ||
| 26 | +# 状態管理 | ||
| 27 | + | ||
| 28 | +GetXは他の状態管理ライブラリのように Stream や ChangeNotifier を使用する必要がありません。なぜか？私たちは応答時間とRAM消費量を改善するために GetValueとGetStream という低遅延のソリューションを開発しましたが、状態管理機能を含むGetXのリソースはすべてこれをベースに作られているためです。このソリューションはより低い運用コストと高いパフォーマンスを実現します。GetXを使えばAndroid、iOS、Web、Linux、macOS用のアプリケーションを作成するだけでなく、Flutter/GetXと同じシンタックスでサーバーアプリケーションを作ることができます。 | ||
| 29 | + | ||
| 30 | +* _バカみたいにシンプル_: 他の状態管理アプローチの中には、複雑で多くのボイラープレートコードを書かなければいけないものもあります。この問題により少なくない人たちがFlutterを見限りましたが、今ようやく、バカみたいにシンプルなソリューションを手に入れることができました。GetXを使えば、非常にすっきりとした、記述量の少ないコードでより多くのことができるようになります。イベントごとにクラスを定義する必要もありません。 | ||
| 31 | +* _コード生成にサヨナラ_: 開発時間の半分はアプリケーションロジックの作成に費やします。それにも関わらず、状態管理ライブラリの中には、ミニマルなコードを作るためにコード生成ツールに依存しているものがあります。変数を変更して build_runner を実行するのは非生産的ですし、flutter clean 後の待ち時間もコーヒーをたくさん飲まなければならないほど長くなることもあります。 | ||
| 32 | + | ||
| 33 | +GetXはすべてがリアクティブであり、コード生成ツールに依存しないため、開発のあらゆる面において生産性が向上します。 | ||
| 34 | + | ||
| 35 | +* _context依存にサヨナラ_: ビューとビジネスロジックを連携させるため、ビューのcontextをControllerに送る必要に迫られた。contextがないところで依存オブジェクトの注入をする必要があり、contextを方々のクラスや関数からなんとか渡した。これらの経験、誰もが通ってきた道かと思います。しかし、GetXではこのような経験をすることはありません。contextなしで、Controllerの中から別のControllerにアクセスすることができます。パラメーターを通じて無駄にcontextを送る必要はもうありません。 | ||
| 36 | +* _細かいコントロール_: 多くの状態管理ソリューションは、ChangeNotifierをベースにしています。ChangeNotifierは、notifyListenerが呼ばれたときに、依存するすべてのWidgetに通知します。画面に40個のWidgetがあるとしましょう。それらがすべてChangeNotifierの変数に依存している場合、変数を1つでも更新すれば、すべてのWidgetが更新されます。 | ||
| 37 | + | ||
| 38 | +GetXを使えばネストされたWidgetさえも的確にビルドを処理することができます。ListViewを担当するObxと、ListViewの中のチェックボックスを担当するObxがあれば、チェックボックスの値を変更した場合はチェックボックスWidgetだけが更新され、Listの値を変更した場合はListViewだけが更新されます。 | ||
| 39 | + | ||
| 40 | +* _変数が本当に変わったときだけ更新する_: GetXはデータの流れをコントロールします。つまり、Textに紐づいたObservable(監視可能)変数の値 'Paola' を、同じ 'Paola' に変更してもWidgetは更新されません。これは、GetXがTextに'Paola'がすでに表示されていることをわかっているためです。 | ||
| 41 | + | ||
| 42 | +多くの状態管理ソリューションは、この場合更新を行います。 | ||
| 43 | + | ||
| 44 | +## リアクティブな状態管理 | ||
| 45 | + | ||
| 46 | +リアクティブプログラミングは複雑であると言われがちなためか、多くの人に敬遠されています。しかし、GetXはリアクティブプログラミングを非常にシンプルなものにしてくれます。 | ||
| 47 | + | ||
| 48 | +* StreamControllerを作る必要はありません。 | ||
| 49 | +* 変数ごとにStreamBuilderをセットする必要はありません。 | ||
| 50 | +* 状態ごとにクラスを作る必要はありません。 | ||
| 51 | +* 初期値のためにgetを準備する必要はありません。 | ||
| 52 | + | ||
| 53 | +Getによるリアクティブプログラミングは、setState並に簡単です。 | ||
| 54 | + | ||
| 55 | +たとえば name という変数があり、それを変更するたびに変数に依存するすべてのWidgetを自動更新したいとします。 | ||
| 56 | + | ||
| 57 | +これがその name 変数です。 | ||
| 58 | + | ||
| 59 | +``` dart | ||
| 60 | +var name = 'Jonatas Borges'; | ||
| 61 | +``` | ||
| 62 | + | ||
| 63 | +これをObservable(監視可能)にするには、値の末尾に ".obs" を付け足すだけです。 | ||
| 64 | + | ||
| 65 | +``` dart | ||
| 66 | +var name = 'Jonatas Borges'.obs; | ||
| 67 | +``` | ||
| 68 | + | ||
| 69 | +これで終わりです。*こんなに* 簡単なんですよ。 | ||
| 70 | + | ||
| 71 | +(以後、このリアクティブな ".obs" 変数、Observable(監視可能)を _Rx_ と呼ぶことがあります。) | ||
| 72 | + | ||
| 73 | +内部ではこのような処理を行っています: `String`の`Stream`を作成し、初期値`"Jonatas Borges"`を割り当て、`"Jonatas Borges"`に依存するすべてのWidgetに、あなたは今この変数の影響下にあるから、_Rx_の値が変更されたときには、あなたも同様に変更する必要がある旨を通知。 | ||
| 74 | + | ||
| 75 | +これがDartの機能のおかげで実現できた **GetX マジック** です。 | ||
| 76 | + | ||
| 77 | +しかし皆さんご存知の通り、`Widget` は関数の中にいなければ自らを更新できません。静的クラスには「自動更新」の機能がないからです。 | ||
| 78 | + | ||
| 79 | +それなら、同じスコープ内で複数の変数に依存してWidgetをビルドする場合は、複数の `StreamBuilder` をネストして変数の変化を監視する必要がありますね。 | ||
| 80 | + | ||
| 81 | +いいえ、**GetX** なら `StreamBuilder` すら不要です。 | ||
| 82 | + | ||
| 83 | +またWidgetを更新する際のボイラープレートコードについても、**GetX**では忘れてください。 | ||
| 84 | + | ||
| 85 | +`StreamBuilder( ... )` ? `initialValue: ...` ? `builder: ...` ? これらはすべて不要で、対象のWidgetを `Obx()` の中に入れるだけです。 | ||
| 86 | + | ||
| 87 | +``` dart | ||
| 88 | +Obx (() => Text (controller.name)); | ||
| 89 | +``` | ||
| 90 | + | ||
| 91 | +_覚えること？_ それは `Obx(() =>` だけです。 | ||
| 92 | + | ||
| 93 | +そのWidgetをアロー関数を通じて `Obx()`（_Rx_のObserver(監視者)）に渡すだけです。 | ||
| 94 | + | ||
| 95 | +`Obx` は非常に賢く、`controller.name` の値が本当に変わったときにのみ、Widgetの更新をかけます。 | ||
| 96 | + | ||
| 97 | +`name` が `"John"` だとして、それを `"John"` ( `name.value = "John"` ) に変更しても、以前と同じ `value` のため画面上では何も変化しません。`Obx` はリソースを節約するために値を無視し、Widgetを更新しません。**すごいでしょ？** | ||
| 98 | + | ||
| 99 | +> では、もしも `Obx` の中に_Rx_（Observable）変数が5つあったらどうでしょう？ | ||
| 100 | + | ||
| 101 | +5つの**いずれかに**値の変化があればWidgetは更新されます。 | ||
| 102 | + | ||
| 103 | +> また、1つのControllerクラスに30もの変数がある場合、1つの変数を更新したら変数に関わるWidgetが**すべて**更新されてしまうのでしょうか？ | ||
| 104 | + | ||
| 105 | +いいえ、_Rx_ 変数を使う特定のWidgetだけが更新されます。 | ||
| 106 | + | ||
| 107 | +言い換えるなら、**GetX**は _Rx_ 変数の値が変化したときだけ画面更新をしてくれるということです。 | ||
| 108 | + | ||
| 109 | +```dart | ||
| 110 | + | ||
| 111 | +final isOpen = false.obs; | ||
| 112 | + | ||
| 113 | +// 同じ値なので何も起きません。 | ||
| 114 | +void onButtonTap() => isOpen.value=false; | ||
| 115 | +``` | ||
| 116 | + | ||
| 117 | +### 利点 | ||
| 118 | + | ||
| 119 | +**GetX()**は何を更新して何をしないのか、の**細かい**コントロールが可能です。 | ||
| 120 | + | ||
| 121 | +すべての更新するのでそのようなコントロールが不要な場合は、`GetBuilder` を検討してください。 | ||
| 122 | +これはわずか数行のコードで作られた、状態更新のためのシンプルなビルダーです。（`setState()`のようにブロックで） | ||
| 123 | +CPUへの影響を最小限にするために作られており、単一の目的(_状態_ の再構築)を果たすため、可能な限りリソース消費を抑えました。 | ||
| 124 | + | ||
| 125 | +**強力な** 状態管理のソリューションを求めているなら、**GetX**で間違いはありません。 | ||
| 126 | + | ||
| 127 | +変数をそのまま扱うことはできませんが、内部では `Stream` としてデータが扱われています。 | ||
| 128 | + | ||
| 129 | +すべてが `Stream` なので、_RxDart_ を組み合わせることも可能ですし、 | ||
| 130 | +"_Rx_ 変数" のイベントや状態を監視することも可能です。 | ||
| 131 | + | ||
| 132 | +GetXは _MobX_ より簡単で、コード自動生成や記述量を減らした_BLoC_ 型アプローチと言えるかもしれません。 | ||
| 133 | +値の末尾に `.obs` を付けるだけで**なんでも** _"Observable(監視可能)"_ にできるのです。 | ||
| 134 | + | ||
| 135 | +### パフォーマンスの最大化 | ||
| 136 | + | ||
| 137 | +ビルドを最小限に抑えるための賢いアルゴリズムに加えて、 | ||
| 138 | +**GetX**はコンパレーターを使用して状態が変更されたことを確認します。 | ||
| 139 | + | ||
| 140 | +アプリでなにかしらのエラーが発生し、状態が変更された情報を | ||
| 141 | +二重に送信してしまったとしても**GetX**はクラッシュを防いでくれます。 | ||
| 142 | + | ||
| 143 | +**GetX**では値が変化したときにはじめて「状態」が変化するためです。 | ||
| 144 | +これが **GetX** と _MobX の `computed`_ を使う際の主な違いです。 | ||
| 145 | +2つの __Observable__ を組み合わせて一つが変化したとき、それを監視しているオブジェクトも変化します。 | ||
| 146 | + | ||
| 147 | +これは `GetX()` (`Observer()`のようなもの) において2つの変数を組み合わせた場合においても、 | ||
| 148 | +それが本当に状態の変化を意味するときだけWidgetの更新が行われるということでもあります。 | ||
| 149 | + | ||
| 150 | +### リアクティブな変数の宣言 | ||
| 151 | + | ||
| 152 | +変数を "Observable" にする方法は3つあります。 | ||
| 153 | + | ||
| 154 | +1 - **`Rx{Type}`** を使用する | ||
| 155 | + | ||
| 156 | +``` dart | ||
| 157 | +// 初期値を入れることを推奨しますが、必須ではありません | ||
| 158 | +final name = RxString(''); | ||
| 159 | +final isLogged = RxBool(false); | ||
| 160 | +final count = RxInt(0); | ||
| 161 | +final balance = RxDouble(0.0); | ||
| 162 | +final items = RxList<String>([]); | ||
| 163 | +final myMap = RxMap<String, int>({}); | ||
| 164 | +``` | ||
| 165 | + | ||
| 166 | +2 - **`Rx`** とジェネリクスによる型指定の組み合わせ | ||
| 167 | + | ||
| 168 | +``` dart | ||
| 169 | +final name = Rx<String>(''); | ||
| 170 | +final isLogged = Rx<Bool>(false); | ||
| 171 | +final count = Rx<Int>(0); | ||
| 172 | +final balance = Rx<Double>(0.0); | ||
| 173 | +final number = Rx<Num>(0); | ||
| 174 | +final items = Rx<List<String>>([]); | ||
| 175 | +final myMap = Rx<Map<String, int>>({}); | ||
| 176 | + | ||
| 177 | +// 任意の型を指定可能 - どんなクラスでもOK | ||
| 178 | +final user = Rx<User>(); | ||
| 179 | +``` | ||
| 180 | + | ||
| 181 | +3 - 最も実用的で簡単な方法として、**`.obs`** を値に付ける | ||
| 182 | + | ||
| 183 | +``` dart | ||
| 184 | +final name = ''.obs; | ||
| 185 | +final isLogged = false.obs; | ||
| 186 | +final count = 0.obs; | ||
| 187 | +final balance = 0.0.obs; | ||
| 188 | +final number = 0.obs; | ||
| 189 | +final items = <String>[].obs; | ||
| 190 | +final myMap = <String, int>{}.obs; | ||
| 191 | + | ||
| 192 | +// カスタムクラスのインスタンスにも付けられます | ||
| 193 | +final user = User().obs; | ||
| 194 | +``` | ||
| 195 | + | ||
| 196 | +##### 初期値の設定 | ||
| 197 | + | ||
| 198 | +ご存知の通り、_Dart_ は現在 _null safety_ へ移行しているところです。 | ||
| 199 | +それに備えるために今後は _Rx_ 変数は常に**初期値**を設定してください。 | ||
| 200 | + | ||
| 201 | +> **GetX** で変数を _Observable_ にしつつ _初期値_ を設定するのはとても簡単です。 | ||
| 202 | + | ||
| 203 | +変数の末尾に `.obs` を付ける。**それだけ。** | ||
| 204 | +めでたく Observable とそのプロパティ `.value` (つまり _初期値_)ができました。 | ||
| 205 | + | ||
| 206 | +### Observableの値をビュー内で使う | ||
| 207 | + | ||
| 208 | +``` dart | ||
| 209 | +// Controllerクラス | ||
| 210 | +final count1 = 0.obs; | ||
| 211 | +final count2 = 0.obs; | ||
| 212 | +int get sum => count1.value + count2.value; | ||
| 213 | +``` | ||
| 214 | + | ||
| 215 | +``` dart | ||
| 216 | +// ビュークラス | ||
| 217 | +GetX<Controller>( | ||
| 218 | + builder: (controller) { | ||
| 219 | + print("count 1 rebuild"); | ||
| 220 | + return Text('${controller.count1.value}'); | ||
| 221 | + }, | ||
| 222 | +), | ||
| 223 | +GetX<Controller>( | ||
| 224 | + builder: (controller) { | ||
| 225 | + print("count 2 rebuild"); | ||
| 226 | + return Text('${controller.count2.value}'); | ||
| 227 | + }, | ||
| 228 | +), | ||
| 229 | +GetX<Controller>( | ||
| 230 | + builder: (controller) { | ||
| 231 | + print("count 3 rebuild"); | ||
| 232 | + return Text('${controller.sum}'); | ||
| 233 | + }, | ||
| 234 | +), | ||
| 235 | +``` | ||
| 236 | + | ||
| 237 | +`count1.value++` を実行すると、以下の通りprintされます。 | ||
| 238 | + | ||
| 239 | +* `count 1 rebuild` | ||
| 240 | + | ||
| 241 | +* `count 3 rebuild` | ||
| 242 | + | ||
| 243 | +なぜなら `count1` の値が `1` に変わり、それに伴ってgetter `sum` の値にも `1 + 0 = 1` と変化が起こるからです。 | ||
| 244 | + | ||
| 245 | +今度は `count2.value++` を実行してみましょう。 | ||
| 246 | + | ||
| 247 | +* `count 2 rebuild` | ||
| 248 | + | ||
| 249 | +* `count 3 rebuild` | ||
| 250 | + | ||
| 251 | +もうおわかりですね。これは `count2.value` が変わり、その結果 `sum` が `2` になったからです。 | ||
| 252 | + | ||
| 253 | +* 注: デフォルト仕様では、`value` に変化がなかったとしても、それが最初のイベントであればWidgetを更新します。 | ||
| 254 | + | ||
| 255 | + この仕様はbool変数の性質から来るものです。 | ||
| 256 | + | ||
| 257 | +たとえばこの場合を想像してみてください。 | ||
| 258 | + | ||
| 259 | +``` dart | ||
| 260 | +var isLogged = false.obs; | ||
| 261 | +``` | ||
| 262 | + | ||
| 263 | +そして、isLogged(ユーザーがログインしたかどうか)の変化をトリガーにever関数内のコールバックfireRouteを呼び出したいとします。 | ||
| 264 | + | ||
| 265 | +``` dart | ||
| 266 | +@override | ||
| 267 | +onInit() async { | ||
| 268 | + // everは引数1が変化するたびに引数2を実行するリスナー | ||
| 269 | + ever(isLogged, fireRoute); | ||
| 270 | + isLogged.value = await Preferences.hasToken(); | ||
| 271 | +} | ||
| 272 | + | ||
| 273 | +fireRoute(logged) { | ||
| 274 | + if (logged) { | ||
| 275 | + Get.off(Home()); | ||
| 276 | + } else { | ||
| 277 | + Get.off(Login()); | ||
| 278 | + } | ||
| 279 | +} | ||
| 280 | +``` | ||
| 281 | + | ||
| 282 | +もし `hasToken` が `false` なら `isLogged` に変化はありません。すると `ever()` のコールバックは永遠に呼び出されないことになります。 | ||
| 283 | +このような挙動を防ぐために _Observable_ への最初の更新は、それがたとえ同じ `.value` だったとしても | ||
| 284 | +常にイベントを引き起こすようにしています。 | ||
| 285 | + | ||
| 286 | +ご参考までに、この仕様は以下の設定で解除することができます。 | ||
| 287 | + `isLogged.firstRebuild = false;` | ||
| 288 | + | ||
| 289 | +### 更新条件を設定 | ||
| 290 | + | ||
| 291 | +Getにはさらに洗練された「状態」のコントロール方法があります。イベント(Listへのオブジェクト追加など)に対して条件を付けることが可能です。 | ||
| 292 | + | ||
| 293 | +``` dart | ||
| 294 | +// 引数1: Listにオブジェクトを加える条件。trueかfalseを返すこと | ||
| 295 | +// 引数2: 条件がtrueの場合に加える新しいオブジェクト | ||
| 296 | +list.addIf(item < limit, item); | ||
| 297 | +``` | ||
| 298 | + | ||
| 299 | +最低限のコードで、コード生成ツールも使わず、とても簡単ですね :smile: | ||
| 300 | + | ||
| 301 | +カウンターアプリもこのようにシンプルに実現できます。 | ||
| 302 | + | ||
| 303 | +``` dart | ||
| 304 | +class CountController extends GetxController { | ||
| 305 | + final count = 0.obs; | ||
| 306 | +} | ||
| 307 | +``` | ||
| 308 | + | ||
| 309 | +Controllerを設定して、下記を実行するだけ。 | ||
| 310 | + | ||
| 311 | +``` dart | ||
| 312 | +controller.count.value++ | ||
| 313 | +``` | ||
| 314 | + | ||
| 315 | +UIの数字が置き換わりましたね。このようにアプリのどこであっても更新をかけることができます。 | ||
| 316 | + | ||
| 317 | +### .obsの使いどころ | ||
| 318 | + | ||
| 319 | +.obs を使うことでどんなものもObservableにすることができます。方法は2つ。 | ||
| 320 | + | ||
| 321 | +* クラスのインスタンス変数をobsに変換する | ||
| 322 | + | ||
| 323 | +``` dart | ||
| 324 | +class RxUser { | ||
| 325 | + final name = "Camila".obs; | ||
| 326 | + final age = 18.obs; | ||
| 327 | +} | ||
| 328 | +``` | ||
| 329 | + | ||
| 330 | +* クラスのインスタンスを丸々obsに変換する | ||
| 331 | + | ||
| 332 | +``` dart | ||
| 333 | +class User { | ||
| 334 | + User({String name, int age}); | ||
| 335 | + var name; | ||
| 336 | + var age; | ||
| 337 | +} | ||
| 338 | + | ||
| 339 | +// インスタンス化の際 | ||
| 340 | +final user = User(name: "Camila", age: 18).obs; | ||
| 341 | +``` | ||
| 342 | + | ||
| 343 | +### List(Rx)に関する補足 | ||
| 344 | + | ||
| 345 | +List(Rx)はその中のオブジェクトと同様、監視可能(Observable)です。そのためオブジェクトを追加すると、List(Rx)に依存するWidgetは自動更新されます。 | ||
| 346 | + | ||
| 347 | +またList(Rx)をListとするために ".value" を使う必要はありません。DartのAPIがこれを可能にしてくれました。ただ、残念ながら他のStringやintのようなプリミティブ型は拡張ができないため、.value を使う必要があります。getterやsetterを活用するのであればあまり問題になりませんが。 | ||
| 348 | + | ||
| 349 | +``` dart | ||
| 350 | +// Controllerクラス | ||
| 351 | +final String title = 'User Info:'.obs | ||
| 352 | +final list = List<User>().obs; | ||
| 353 | + | ||
| 354 | +// ビュークラス | ||
| 355 | +Text(controller.title.value), // Stringの場合は .value が必要 | ||
| 356 | +ListView.builder ( | ||
| 357 | + itemCount: controller.list.length // Listの場合は不要 | ||
| 358 | +) | ||
| 359 | +``` | ||
| 360 | + | ||
| 361 | +カスタムのクラスをObservableにした場合は、様々な方法で値を更新することができます。 | ||
| 362 | + | ||
| 363 | +``` dart | ||
| 364 | +// モデルクラス | ||
| 365 | +// 属性をobsにするやり方ではなく、クラス全体をobsにする方法を採ります | ||
| 366 | +class User() { | ||
| 367 | + User({this.name = '', this.age = 0}); | ||
| 368 | + String name; | ||
| 369 | + int age; | ||
| 370 | +} | ||
| 371 | + | ||
| 372 | +// Controllerクラス | ||
| 373 | +final user = User().obs; | ||
| 374 | +// user変数を更新するときはこのようなメソッドを作ります | ||
| 375 | +user.update( (user) { // このパラメーターは更新するオブジェクトそのもの | ||
| 376 | +user.name = 'Jonny'; | ||
| 377 | +user.age = 18; | ||
| 378 | +}); | ||
| 379 | +// あるいは、この方法でも。変数名は呼び出し可能です。 | ||
| 380 | +user(User(name: 'João', age: 35)); | ||
| 381 | + | ||
| 382 | +// ビュークラス | ||
| 383 | +Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}")) | ||
| 384 | +// .value を使わずにモデルのプロパティにアクセスすることも可能です | ||
| 385 | +user().name; // userがUserではないことに注目。user()でUserを受け取れます。 | ||
| 386 | +``` | ||
| 387 | + | ||
| 388 | +ListのsetAllやsetRangeメソッドの代わりに、"assign" "assignAll" APIを使っていただくことも可能です。 | ||
| 389 | +"assign" APIはListの内容をクリアした後に、指定した単独のオブジェクトを追加してくれます。 | ||
| 390 | +"assignAll" APIはそのIterable版です。 | ||
| 391 | + | ||
| 392 | +### なぜ「.value」を使う必要があるのか | ||
| 393 | + | ||
| 394 | +ちょっとしたアノテーションとコード生成ツールを使って`String`や`int`で `.value` を使わなくて済むようにもすることはできますが、このライブラリの目的は「外部依存パッケージを減らす」ことです。私たちは、外部パッケージを必要としない、必須ツール（Route、依存オブジェクト、状態の管理）が揃った開発環境を軽量かつシンプルな方法で提供したいと考えています。 | ||
| 395 | + | ||
| 396 | +まさに pubspecに3文字（get）とコロンを加えて、プログラミングを始めることができるのです。Route管理から状態管理まで、必要なソリューションが標準装備されています。GetXはシンプルさ、生産性、高いパフォーマンスを目指します。 | ||
| 397 | + | ||
| 398 | +これほど多機能であるにも関わらず、このライブラリの総容量は他の多くの状態管理ライブラリよりも少ないです。その点をご理解いただけるとうれしいです。 | ||
| 399 | + | ||
| 400 | +`.value` が嫌でコード生成ツールを使いたいという方には、MobXは素晴らしいライブラリだと思いますし、Getと併用することもできます。逆に多くの外部パッケージに依存したくない方、パッケージ間の互換性を気にしたくない方、状態管理ツールや依存オブジェクトから状態更新エラーが出ているかどうかを気にせずプログラミングをしたい方、依存するControllerクラスのインスタンスがあるかどうかを都度都度心配したくない方にとってはGetはまさに最適です。 | ||
| 401 | + | ||
| 402 | +MobXのコード生成や、BLoCのボイラープレートコードが気にならないのであれば、Route管理にだけでもGetをお使いいただけるとうれしいです。GetのSEMとRSMは必要に迫られて生まれたものです。私の会社で以前、90以上のControllerを持つプロジェクトがあり、それなりの性能のマシンでflutter cleanを行った後でさえ、コード生成ツールがタスクを完了するのに30分以上かかりました。もしあなたが大きなプロジェクトに関わっており、コード生成ツールが問題になっているのであれば、Getを検討してみてください。 | ||
| 403 | + | ||
| 404 | +もちろん、コード生成ツールをGetXに導入したい方が実際にツールを作成してプロジェクトに貢献した場合は、このReadMeに代替ソリューションとして掲載させていただきます。私はすべての開発者のニーズをかなえたいわけではありませんが、今はこの質問に対しては、「すでにMobXのように同様のことを実現してくれる良いソリューションがある」とだけ言わせてください。 | ||
| 405 | + | ||
| 406 | +### Obx() | ||
| 407 | + | ||
| 408 | +GetX()の代わりにObx()を使用することもできます。ObxはWidgetを生成する匿名関数をパラメーターに持ちます。複数のControllerに対応することができますが、自身はControllerのインスタンスを持たず、型指定もできません。そのため別途Controllerのインスタンスを作るか、`Get.find<Controller>()` でインスタンスを探しておく必要があります。 | ||
| 409 | + | ||
| 410 | +### Worker | ||
| 411 | + | ||
| 412 | +Worker はイベント発生に伴って指定したコールバックを呼び出すことができます。 | ||
| 413 | + | ||
| 414 | +``` dart | ||
| 415 | +/// `count1` が更新されるたびに第2引数のコールバックが実行される | ||
| 416 | +ever(count1, (_) => print("$_ has been changed")); | ||
| 417 | + | ||
| 418 | +/// `count1` の最初の更新時のみ実行される | ||
| 419 | +once(count1, (_) => print("$_ was changed once")); | ||
| 420 | + | ||
| 421 | +/// DDoS攻撃対策に最適。たとえば、ユーザーが打鍵やクリックを止めて1秒後に実行など | ||
| 422 | +debounce(count1, (_) => print("debouce$_"), time: Duration(seconds: 1)); | ||
| 423 | + | ||
| 424 | +/// 1秒以内の連続更新はすべて無視して実行しない | ||
| 425 | +interval(count1, (_) => print("interval $_"), time: Duration(seconds: 1)); | ||
| 426 | +``` | ||
| 427 | + | ||
| 428 | +すべてのWorker(`debounce` 以外) は `condition` パラメーターを持ちます。`condition` は `bool` でも `bool` を返すコールバックでも構いません。 | ||
| 429 | +この `condition` が Worker のコールバックを実行するかどうかを決めています。 | ||
| 430 | + | ||
| 431 | +また Worker は `Worker` インスタンスを返します。これは `dispose()` などを通じて Worker を破棄するときに使用します。 | ||
| 432 | + | ||
| 433 | + | ||
| 434 | +* **`ever`** | ||
| 435 | + | ||
| 436 | + は _Rx_ 変数が新しい値になるたびに呼ばれます。 | ||
| 437 | + | ||
| 438 | +* **`everAll`** | ||
| 439 | + | ||
| 440 | + `ever` とほぼ同じですが、_Rx_ 変数の `List` を受け取ります。いずれかの値が更新されれば、その更新後の値を受け取ってコールバックが実行されます。 | ||
| 441 | + | ||
| 442 | +* **`once`** | ||
| 443 | + | ||
| 444 | +変数が最初に更新されたときのみに呼ばれます。 | ||
| 445 | + | ||
| 446 | +* **`debounce`** | ||
| 447 | + | ||
| 448 | +'debounce' は検索機能などで導入するととても有益です。たとえば、ユーザーがタイピングを止めたときにのみAPIを呼び出したいときに使います。ユーザーが "Jonny" と入れたときに 5回も APIに問い合わせを行うのは避けたいですよね。Getなら "debounce" があるので大丈夫です。 | ||
| 449 | + | ||
| 450 | +* **`interval`** | ||
| 451 | + | ||
| 452 | +`interval` は debounce とは異なります。ユーザーが1秒間に1000回変数に変更を加えた場合、debounceが一定期間経過後（デフォルトは800ミリ秒）に最後の変更イベントだけ送信するのに対して、intervalは代わりに一定期間の間のユーザーによるアクションをすべて無視します。intervalは1秒ごとにイベントを送信しており、3秒に設定した場合は1分間に20個のイベントを送信します。これはユーザーがキーやマウスを連打することで何かしらの報酬を得られる場合に、その悪用を避けるために使用できます(ユーザーが何かをクリックしてコインを獲得できるとします。たとえ何秒かかったとしても300回クリックすれば300枚のコインを得ることができてしまいます。intervalを使用してインターバルを3秒に設定した場合は、何回クリックしようが1分間で得られるコインの上限は20枚になります)。一方のdebounceはアンチDDosや、検索のように変更を加えるたびにonChangeからAPI問い合わせが発生するような機能に適しています。ユーザーが入力し終わるのを待ってリクエストを送信するのです。debounceを前述のコイン獲得のケースで使用した場合、ユーザーはコインを1枚しか獲得できません。これは指定した期間、ユーザーが動作を「一時停止」したときにのみ実行されるからです。 | ||
| 453 | + | ||
| 454 | +* 注: Workerを使用する場合は、Controllerなどを起動するときに次のいずれかの方法で登録する必要があります。onInit（推奨）内、クラスのコンストラクタ、またはStatefulWidgetのinitState内（この方法は推奨しませんが、副作用はないはずです）。 | ||
| 455 | + | ||
| 456 | +## 非リアクティブな状態管理 | ||
| 457 | + | ||
| 458 | +GetはChangeNotifierを使わない軽量かつシンプルな状態管理機能を有しています。特にFlutterに慣れていない方のニーズを満たし、大規模なアプリケーションでも問題を起こすことがないと信じています。 | ||
| 459 | + | ||
| 460 | +GetBuilderは複数の状態を扱う場面で使われることを想定して作られました。たとえばショッピングカートに30個の商品があるとします。そしてあなたが商品を一つ削除すると同時に、カートのリストが更新され、合計金額が更新され、アイテム数を示すバッジが更新されます。GetBuilderはこのようなユースケースに最適です。というのも、GetBuilderは状態をControllerで束ねてそのControllerに依存するすべてのWidgetを一度に更新させることができるからです。 | ||
| 461 | + | ||
| 462 | +それらとは独立したControllerが必要な場合は、GetBuilderのidプロパティに専用IDを割り当てるか、GetXを使ってください。ケースバイケースですが、そのような「独立した」Widetが多いほど GetX() のパフォーマンスが際立ち、複数の状態変化がありそれに伴うWidgetの更新が多いほど GetBuilder() のパフォーマンスが勝ることを覚えておいてください。 | ||
| 463 | + | ||
| 464 | +### 利点 | ||
| 465 | + | ||
| 466 | +1. 必要なWidgetのみ更新される。 | ||
| 467 | + | ||
| 468 | +2. ChangeNotifierを使わず、メモリ使用量が少ない。 | ||
| 469 | + | ||
| 470 | +3. StatefulWidgetのことはもう忘れましょう。Getでは必要ありません。他の状態管理ライブラリではStatefulWidgetを使用することがあるでしょう。しかしAppBarやScaffoldなどクラス内のほとんどのWidgetがStatelessであるにも関わらず、StatefulなWidgetの状態だけを保持する代わりに、クラス全体の状態を保持しているのはなぜでしょうか？Getならクラス全体をStatelessにすることができます。更新が必要なコンポーネントは GetBuilder などで囲むことで「状態」が保持されます。 | ||
| 471 | + | ||
| 472 | +4. プロジェクトを整理しましょう！ControllerはUIの中にあってはいけません。TextEditControllerなどの類はすべてControllerクラスに配置してしまいましょう。 | ||
| 473 | + | ||
| 474 | +5. Widgetのレンダリングが開始されると同時にイベントを実行してWidgetを更新させる必要がありますか？GetBuilderにはStatefulWidgetと同様の「initState」プロパティがあり、そこからControllerのイベントを直接呼び出すことができます。initStateを使用する必要はもうありません。 | ||
| 475 | + | ||
| 476 | +6. StreamやTimerのインスタンスを破棄したい場合はGetBuilderのdisposeプロパティを利用してください。Widgetが破棄されると同時にイベントを呼び出すことができます。 | ||
| 477 | + | ||
| 478 | +7. GetXとStreamController / StreamBuilderを組み合わせるなどしてStreamを普通に使っていただいても問題ありませんが、必要なときに限って使うことをおすすめします。Streamのメモリ消費は適度であり、リアクティブプログラミングは美しいですが、たとえば30ものStreamを同時に立ち上げることを考えてみてください。これはChangeNotifierを使うよりもよくないことのように思います。 | ||
| 479 | + | ||
| 480 | +8. 必要以上にRAMを使わずWidgetを更新します。GetはGetBuilderのクリエーターIDのみを保存し、必要に応じてGetBuilderを更新します。何千ものGetBuilderを作成したとしても、ID保存のためのメモリ消費量は非常に少ないです。GetBuilderを新規に作成するということは、実際にはクリエーターIDを持つ GetBuilder の状態を共有しているに過ぎないためです。GetBuilderごとに状態が新たに作成されるわけではないため、特に大規模なアプリケーションでは多くのRAMを節約できます。基本的にGetXで作成するアプリケーションは全体的にStatelessであり、いくつかのStatefulなWidget(GetBuilder内のWidget)は単一の状態を持っているため、一つを更新すればすべてが更新されます。 | ||
| 481 | + | ||
| 482 | +9. Getはアプリ全体の流れをよく把握しており、Controllerをメモリから破棄するタイミングを正確に知っています。実際の破棄はGetがやってくれるため、開発者が心配する必要はありません。 | ||
| 483 | + | ||
| 484 | +### 使用例 | ||
| 485 | + | ||
| 486 | +``` dart | ||
| 487 | +// Controllerクラスを作成してGetxControllerを継承しましょう | ||
| 488 | +class Controller extends GetxController { | ||
| 489 | + int counter = 0; | ||
| 490 | + void increment() { | ||
| 491 | + counter++; | ||
| 492 | + update(); | ||
| 493 | + // increment 実行時にcounter変数に依存するUIを更新。 | ||
| 494 | + // GetBuilderを使うWidgetの場合はupdate()が必要。 | ||
| 495 | + } | ||
| 496 | +} | ||
| 497 | +// ビュー側のクラスでGetBuilderを使ってcounter変数を組み込む | ||
| 498 | +GetBuilder<Controller>( | ||
| 499 | + init: Controller(), // 最初に使用するときのみ初期化 | ||
| 500 | + builder: (_) => Text( | ||
| 501 | + '${_.counter}', | ||
| 502 | + ), | ||
| 503 | +) | ||
| 504 | +// Controllerの初期化は最初の1回だけ行ってください。同じControllerを再度 GetBuilder / GetX で使用する場合は初期化する必要はありません。コントローラは、それを「init」とマークしたウィジェットがデプロイされると同時に、自動的にメモリから削除されます。Getがすべて自動で行ってくれるので、何も心配することはありません。同じControllerを2つ立ち上げることがないよう、それだけご注意ください。 | ||
| 505 | +``` | ||
| 506 | + | ||
| 507 | +**最後に** | ||
| 508 | + | ||
| 509 | +* 以上、Getを使った状態管理の手法をご説明させていただきました。 | ||
| 510 | + | ||
| 511 | +* 注: もっと柔軟に管理する手法として、initプロパティを使わない方法もあります。Bindingsを継承したクラスを作成し、dependenciesメソッドをoverrideしてその中でGet.put()でControllerを注入してください(複数可)。このクラスとUI側のクラスを紐づけることでControllerをそのRoute内で使用できます。そしてそのControllerを初めて使用するとき、Getはdependencies内を見て初期化を実行してくれます。このlazy(遅延、消極的)ロードを維持しつつ、不要になったControllerは破棄し続けます。具体的な仕組みについてはpub.devの例をご参照ください。 | ||
| 512 | + | ||
| 513 | +Routeを移動して以前使用したControllerのデータが必要になった場合は、再度GetBuilderを使用してください。initする必要はありません。 | ||
| 514 | + | ||
| 515 | +``` dart | ||
| 516 | +class OtherClass extends StatelessWidget { | ||
| 517 | + @override | ||
| 518 | + Widget build(BuildContext context) { | ||
| 519 | + return Scaffold( | ||
| 520 | + body: Center( | ||
| 521 | + child: GetBuilder<Controller>( | ||
| 522 | + builder: (s) => Text('${s.counter}'), | ||
| 523 | + ), | ||
| 524 | + ), | ||
| 525 | + ); | ||
| 526 | + } | ||
| 527 | + | ||
| 528 | +``` | ||
| 529 | + | ||
| 530 | +GetBuilderの外でControllerを使用する場合は、Controller内にgetterを作成しておくと便利です。Controller.to で呼び出しましょう。(もしくは `Get.find<Controller>()` を使うのもありです) | ||
| 531 | + | ||
| 532 | +``` dart | ||
| 533 | +class Controller extends GetxController { | ||
| 534 | + | ||
| 535 | + /// 記述量を省くためにstaticメソッドにすることをおすすめします。 | ||
| 536 | + /// staticメソッド使う場合 → Controller.to.increment(); | ||
| 537 | + /// 使わない場合 → Get.find<Controller>().increment(); | ||
| 538 | + /// どちらを使ってもパフォーマンスに影響があったり副作用が出たりはしません。前者は型の指定が不要という違いがあるだけです | ||
| 539 | + static Controller get to => Get.find(); // これを追加 | ||
| 540 | + | ||
| 541 | + int counter = 0; | ||
| 542 | + void increment() { | ||
| 543 | + counter++; | ||
| 544 | + update(); | ||
| 545 | + } | ||
| 546 | +} | ||
| 547 | +``` | ||
| 548 | + | ||
| 549 | +これで以下のようにControllerに直接アクセスできます。 | ||
| 550 | + | ||
| 551 | +``` dart | ||
| 552 | +FloatingActionButton( | ||
| 553 | + onPressed: () { | ||
| 554 | + Controller.to.increment(), | ||
| 555 | + } // とっても簡単ですね！ | ||
| 556 | + child: Text("${Controller.to.counter}"), | ||
| 557 | +), | ||
| 558 | +``` | ||
| 559 | + | ||
| 560 | +FloatingActionButton を押すと counter変数 に依存するWidgetがすべて自動的に更新されます。 | ||
| 561 | + | ||
| 562 | +### Controllerインスタンスの扱い | ||
| 563 | + | ||
| 564 | +次のような画面の流れがあるとします。 | ||
| 565 | + | ||
| 566 | + `画面A => 画面B (Controller X を使用) => 画面C (Controller X を使用)` | ||
| 567 | + | ||
| 568 | +画面Aの段階ではまだ未使用なので、Controllerはメモリにありません(Getは基本lazyロードなので)。画面Bに遷移すると、Controllerがメモリ内に保存されます。画面Cでは画面Bと同じControllerを使用しているため、GetはBとCでControllerの状態を共有し、同じControllerがメモリ内に引き続きいることになります。画面Cを閉じてさらに画面Bを閉じ、画面Aに戻ったとしましょう。そこではControllerが使われていないため、GetはControllerをメモリから出してリソースを解放します。そこで再度画面Bに遷移すると、Controllerは再度メモリに保存されます。そして今度は画面Cに行かずに画面Aに戻ります。Getは同様にControllerをメモリから破棄してくれます。また、仮に画面CがControllerを使っておらず画面Cにいたとして、画面BをRouteスタックから削除したとしましょう。するとControllerを使用している画面(クラス)はなくなりますので、同様にメモリから破棄されます。Getが正常動作しないと考えられる唯一の例外は、画面Cにいるときに画面Bを誤ってRouteスタックから削除してしまい、Controllerの使用を試みたときです。この場合は、画面Bで作成されたControllerのクリエーターIDが削除されてしまったことが原因です(GetはクリエーターIDのないControllerはメモリから破棄するようプログラムされています)。もし意図があってこの事例に対応したい場合は、画面BのGetBuilderに "autoRemove: false" フラグを追加した上で、CクラスのGetBuilderに "adoptID: true" を追加してください。 | ||
| 569 | + | ||
| 570 | +### StatefulWidgetsはもういらない | ||
| 571 | + | ||
| 572 | +StatefulWidgetsを使用すると、画面全体の状態を不必要に保存することになります。ウィジェットを最小限に再構築する必要がある場合は、Consumer/Observer/BlocProvider/GetBuilder/GetX/Obxの中に埋め込むことになりますが、それは別のStatefulWidgetになります。 | ||
| 573 | +StatefulWidgetはStatelessWidgetよりも多くのRAMが割り当てられます。これは1つや2つのStatefulWidgetでは大きな違いは産まないかもしれませんが、それが100もあった場合は確実に違いが出ます。 | ||
| 574 | +TickerProviderStateMixinのようなMixinを使用する必要がない限り、GetでStatefulWidgetを使用する必要はありません。 | ||
| 575 | + | ||
| 576 | +たとえばinitState()やdispose()メソッドなど、StatefulWidgetのメソッドをGetBuilderから直接呼び出すことも可能です。 | ||
| 577 | + | ||
| 578 | +``` dart | ||
| 579 | +GetBuilder<Controller>( | ||
| 580 | + initState: (_) => Controller.to.fetchApi(), | ||
| 581 | + dispose: (_) => Controller.to.closeStreams(), | ||
| 582 | + builder: (s) => Text('${s.username}'), | ||
| 583 | +), | ||
| 584 | +``` | ||
| 585 | + | ||
| 586 | +しかし、これよりもベターなアプローチはControllerの中で直接 onInit() や onClose() メソッドを呼び出すことです。 | ||
| 587 | + | ||
| 588 | +``` dart | ||
| 589 | +@override | ||
| 590 | +void onInit() { | ||
| 591 | + fetchApi(); | ||
| 592 | + super.onInit(); | ||
| 593 | +} | ||
| 594 | +``` | ||
| 595 | + | ||
| 596 | +* 注: コンストラクタを通じてControllerを立ち上げる必要はありません。このようなプラクティスは、パフォーマンス重視であるGetのControllerの作成や割り当ての原理、考え方から外れてしまいます（コンストラクタ経由でインスタンスを作成すれば、実際に使用される前の段階でControllerを生成し、メモリを割り当てることになります）。onInit() と onClose() メソッドはこのために作られたもので、Controllerのインスタンスが作成されたとき、または初めて使用されたときに呼び出されます（Get.lazyPutを使用しているか否か次第）。たとえば、データを取得するためにAPIを呼び出したい場合は initState/dispose の代わりに onInit() を使用し、Streamを閉じるなどのコマンドを実行する必要がある場合は onClose() を使用してください。 | ||
| 597 | + | ||
| 598 | +### Getの目的 | ||
| 599 | + | ||
| 600 | +このパッケージの目的は、Routeのナビゲーション、依存オブジェクトと状態の管理のための完全なソリューションを、開発者が外部パッケージに極力依存せずに済むような形で提供し、高度なコード分離性（デカップリング）を実現することです。それを確実なものとするため、Getはあらゆる高レベルおよび低レベルのFlutter APIを取り込んでいます。これによりビューとロジックを切り分けることが容易になり、UIチームにはWidgetの構築に集中してもらい、ビジネスロジック担当チームにはロジックに集中してもらうことができます。Getを使うことでよりクリーンな作業環境を構築することができるのです。 | ||
| 601 | + | ||
| 602 | +要するに、initState内でメソッドを呼び出してパラメーターを通じてControllerにデータを送信する必要も、そのためにControllerのコンストラクタを使用する必要もありません。Getには必要なタイミングでサービスを呼び出してくれう onInit() メソッドがあります。 | ||
| 603 | +Controllerが不要になれば、onClose() メソッドがジャストなタイミングでメモリから破棄してくれます。これにより、ビューとビジネスロジックを分離することができるのです。 | ||
| 604 | + | ||
| 605 | +GetxController 内に dispose() メソッドがあっても何も起こらないので記述しないでください。ControllerはWidgetではないので「dispose」できません。たとえばController内でStreamを使用していてそれを閉じたい場合は、以下のように onClose() メソッドにコードを記述してください。 | ||
| 606 | + | ||
| 607 | +``` dart | ||
| 608 | +class Controller extends GetxController { | ||
| 609 | + StreamController<User> user = StreamController<User>(); | ||
| 610 | + StreamController<String> name = StreamController<String>(); | ||
| 611 | + | ||
| 612 | + /// Streamを閉じる場合は dispose() ではなく onClose() | ||
| 613 | + @override | ||
| 614 | + void onClose() { | ||
| 615 | + user.close(); | ||
| 616 | + name.close(); | ||
| 617 | + super.onClose(); | ||
| 618 | + } | ||
| 619 | +} | ||
| 620 | +``` | ||
| 621 | + | ||
| 622 | +Controllerのライフサイクルについて。 | ||
| 623 | + | ||
| 624 | +* onInit() はControllerが作成されたタイミングで実行されます。 | ||
| 625 | +* onClose() は onDelete() メソッドが実行される直前のタイミングで実行されます。 | ||
| 626 | +* Controllerが削除されるとそのAPIにアクセスすることはできません。文字通りメモリからの削除だからです。削除のトレースログも残りません。 | ||
| 627 | + | ||
| 628 | +### Controllerの様々な使用方法 | ||
| 629 | + | ||
| 630 | +ControllerインスタンスはGetBuilderのvalueを通じて使用することができます。 | ||
| 631 | + | ||
| 632 | +``` dart | ||
| 633 | +GetBuilder<Controller>( | ||
| 634 | + init: Controller(), | ||
| 635 | + builder: (value) => Text( | ||
| 636 | + '${value.counter}', // ここ | ||
| 637 | + ), | ||
| 638 | +), | ||
| 639 | +``` | ||
| 640 | + | ||
| 641 | +GetBuilderの外でControllerインスタンスを使う場合は、このアプローチをおすすめします。 | ||
| 642 | + | ||
| 643 | +``` dart | ||
| 644 | +class Controller extends GetxController { | ||
| 645 | + static Controller get to => Get.find(); | ||
| 646 | +[...] | ||
| 647 | +} | ||
| 648 | +// ビュー側で | ||
| 649 | +GetBuilder<Controller>( | ||
| 650 | + init: Controller(), // 最初に使うときだけ必要 | ||
| 651 | + builder: (_) => Text( | ||
| 652 | + '${Controller.to.counter}', // ここ | ||
| 653 | + ) | ||
| 654 | +), | ||
| 655 | +``` | ||
| 656 | + | ||
| 657 | +もしくは | ||
| 658 | + | ||
| 659 | +``` dart | ||
| 660 | +class Controller extends GetxController { | ||
| 661 | + // static get を省き、 | ||
| 662 | +[...] | ||
| 663 | +} | ||
| 664 | +// ビュー側で | ||
| 665 | +GetBuilder<Controller>( | ||
| 666 | + init: Controller(), // 最初に使うときだけ必要 | ||
| 667 | + builder: (_) => Text( | ||
| 668 | + '${Get.find<Controller>().counter}', // ここ | ||
| 669 | + ), | ||
| 670 | +), | ||
| 671 | +``` | ||
| 672 | + | ||
| 673 | +* get_it や modular など他の依存オブジェクト管理ライブラリを使用しているため、単にControllerのインスタンスを渡したいだけの場合は、このような「非正規」な方法もあります。 | ||
| 674 | + | ||
| 675 | +``` dart | ||
| 676 | +Controller controller = Controller(); | ||
| 677 | +[...] | ||
| 678 | +GetBuilder<Controller>( | ||
| 679 | + init: controller, // ここ | ||
| 680 | + builder: (_) => Text( | ||
| 681 | + '${controller.counter}', // ここ | ||
| 682 | + ), | ||
| 683 | +), | ||
| 684 | + | ||
| 685 | +``` | ||
| 686 | + | ||
| 687 | +### ユニークIDの設定 | ||
| 688 | + | ||
| 689 | +GetBuilderを使ってWidgetの更新をコントロールしたい場合は、このようにユニークIDを振ってください。 | ||
| 690 | + | ||
| 691 | +``` dart | ||
| 692 | +GetBuilder<Controller>( | ||
| 693 | + id: 'text' | ||
| 694 | + init: Controller(), // 最初に使うときだけ必要 | ||
| 695 | + builder: (_) => Text( | ||
| 696 | + '${Get.find<Controller>().counter}', // ここ | ||
| 697 | + ), | ||
| 698 | +), | ||
| 699 | +``` | ||
| 700 | + | ||
| 701 | +そして以下のようにWidgetを更新します。 | ||
| 702 | + | ||
| 703 | +``` dart | ||
| 704 | +update(['text']); | ||
| 705 | +``` | ||
| 706 | + | ||
| 707 | +さらに更新に条件を設けることができます。 | ||
| 708 | + | ||
| 709 | +``` dart | ||
| 710 | +update(['text'], counter < 10); | ||
| 711 | +``` | ||
| 712 | + | ||
| 713 | +GetXはこの更新を自動で行ってくれます。指定したIDを持ち、その変数に依存するWidgetのみを更新します。また変数を前の値と同じ値に変更しても、それが状態の変化を意味しない場合はメモリとCPUサイクルを節約するためにWidgetを更新しません (画面に 3 が表示されているときに、変数を再び 3 に変更したとします。このような場合にWidgetを更新する状態管理ソリューションも存在しますが、GetXでは実際に状態が変更された場合にのみ更新されます）。 | ||
| 714 | + | ||
| 715 | +## 状態管理ソリューションを混在させる | ||
| 716 | + | ||
| 717 | +MixinBuilderはObxとGetBuilderを併用したいというリクエストから発想して作られました。これは ".obs" 変数の変更によるリアクティブな更新と、update() メソッドによるメカニカルな更新の両方を混在可能にします。ただし、GetBuiler / GetX / Obx / MixinBuilder の4つの中で最もリソースを消費するWidgetです。というのも、Widgetからのイベントを検知するためのSubscriptionに加えて、Controller自身のupdateメソッドも購読する必要があるからです。 | ||
| 718 | + | ||
| 719 | +MixinBuilderに使用するControllerクラスには、変数を `.obs`（Observable）とするかどうかに関わらず、GetxControllerを継承したものを使用してください。GetxControllerにはライフサイクルがあり、onInit() および onClose() メソッドでイベントを「開始」したり「終了」したりすることができます。 | ||
| 720 | + | ||
| 721 | +## StateMixin | ||
| 722 | + | ||
| 723 | +`StateMixin<T>` を使うことでさらに `UI` の「状態」を便利に扱うことができます。 | ||
| 724 | +`with` を使って `StateMixin<T>` をControllerにミックスインしてください。Tにはモデルのクラス名が入ります。 | ||
| 725 | + | ||
| 726 | +``` dart | ||
| 727 | +class Controller extends GetController with StateMixin<User>{} | ||
| 728 | +``` | ||
| 729 | + | ||
| 730 | +状態を変更するには `change()` メソッドを使ってください。 | ||
| 731 | +パラメーターにはビューに渡すデータと「状態」をセットします。 | ||
| 732 | + | ||
| 733 | +```dart | ||
| 734 | +change(data, status: RxStatus.success()); | ||
| 735 | +``` | ||
| 736 | + | ||
| 737 | +RxStatus の「状態」は以下の4つです。 | ||
| 738 | + | ||
| 739 | +``` dart | ||
| 740 | +RxStatus.loading(); // ロード中 | ||
| 741 | +RxStatus.success(); // ロード成功 | ||
| 742 | +RxStatus.empty(); // データが空 | ||
| 743 | +RxStatus.error('message'); // エラー | ||
| 744 | +``` | ||
| 745 | + | ||
| 746 | +それぞれの「状態」をUIで表すには以下のようにします。 | ||
| 747 | + | ||
| 748 | +```dart | ||
| 749 | +class OtherClass extends GetView<Controller> { | ||
| 750 | + @override | ||
| 751 | + Widget build(BuildContext context) { | ||
| 752 | + return Scaffold( | ||
| 753 | + | ||
| 754 | + body: controller.obx( | ||
| 755 | + (state)=>Text(state.name), | ||
| 756 | + | ||
| 757 | + // ここはカスタムのロードインジケーターでも可能ですが、 | ||
| 758 | + // デフォルトは Center(child:CircularProgressIndicator()) | ||
| 759 | + onLoading: CustomLoadingIndicator(), | ||
| 760 | + onEmpty: Text('No data found'), | ||
| 761 | + | ||
| 762 | + // ここもカスタムのエラーWidgetでも構いませんが、 | ||
| 763 | + // デフォルトは Center(child:Text(error)) | ||
| 764 | + onError: (error)=>Text(error), | ||
| 765 | + ), | ||
| 766 | + ); | ||
| 767 | +} | ||
| 768 | +``` | ||
| 769 | + | ||
| 770 | +## GetBuilder VS GetX VS Obx VS MixinBuilder | ||
| 771 | + | ||
| 772 | +私は10年間プログラミングに携わってきて、いくつか貴重な教訓を得ることができました。 | ||
| 773 | + | ||
| 774 | +リアクティブプログラミングに初めて触れたとき、「おお、これはすごい」と感嘆せずにはいられませんでしたし、実際にすごいものでした。 | ||
| 775 | +しかし、リアクティブプログラミングはすべての状況に適しているわけではありません。多くの場合、必要なのは2,3のWidgetの状態を同時に更新すること、またはローカルでの一時的な状態の変更であり、これらの場合はリアクティブである必要はありません。 | ||
| 776 | + | ||
| 777 | +リアクティブプログラミングのRAM消費量の多さは、必要なときだけ、かつ1つのWidgetだけ同時に更新するようすることである程度補うことができます。ただ、たとえば80ものオブジェクトを持つリストがあったとして、それぞれが複数のStreamを持つのは得策ではありません。Dartのインスペクターを開いて、StreamBuilderがどれだけRAMを消費しているか見てみてください。私が伝えたいことを理解してもらえると思います。 | ||
| 778 | + | ||
| 779 | +そのことを念頭に私はシンプルな状態管理ソリューションを作りました。このシンプルさに期待することは、リソース面で経済的である点、Widget単位ではなくブロック単位で状態を更新できる点であるべきです。 | ||
| 780 | + | ||
| 781 | +GetBuilderはRAM消費の面で最も経済的なソリューションだと信じています（もしあれば、ぜひ教えてください）。 | ||
| 782 | + | ||
| 783 | +しかし、GetBuilderは依然として update() により更新がかかるスタイルのメカニカルな状態管理ソリューションであり、notifyListeners() と呼び出し回数は変わりありません。 | ||
| 784 | + | ||
| 785 | +一方で、ここでリアクティブプログラミングを使わないのは車輪の再発明なんじゃないかと思えるような状況もあります。この点を考慮して、GetX() は先進的な状態管理の手法を提供するために作られました。必要なものを必要なときだけ更新し、エラーが発生してユーザーが300ものイベントを同時に送信したとしても、GetX() は状態の変化をフィルタリングして画面を更新してくれます。 | ||
| 786 | + | ||
| 787 | +GetX() は他のリアクティブな状態管理ソリューションに比べて経済的であることに変わりはありませんが、GetBuilder() よりは少しだけ多くのRAMを消費します。その点を考慮し、リソース消費を最大限活かすことを目指して Obx() は開発されました。GetX() や GetBuilder() と異なり、Obx() の中でControllerを初期化することはできません。Obx() は、子Widgetからの更新イベントを受け取る Stream購読Widgetでしかありません。GetX() よりは経済的ですが、GetBuilder() には負けます。GetBuilder() はWidgetのハッシュ値と状態のsetterを保持しているだけなので、これはある意味当然です。Obx() はControllerの型を指定する必要がなく、複数の異なるコントローラからの変更を聞くことができます。ただし、Obx() の外かBindingsで事前にControllerを初期化しておく必要があります。 |
-
Please register or login to post a comment