【Flutter】GetX具体例紹介

おしながき

前回の記事でGetXの機能についてざっくりと紹介をしました。この記事では、具体的にGetXをどのようにFlutterで活用するのか、具体例とともに紹介します！

具体例

この画像を見比べれば、Flutter標準のStateful WidgetとGetXのどういうところが違ってどういうところが同じなのかわかると思います！

補足

水色・・・main関数とMyAppクラスはどちらも同じです。

オレンジ・・・これがStatefulとGetXの一番の違いです！！Statefulでは、1つのページにつき1つのクラスでの状態管理しかできません。一方、GetXでは複数ページをまたいだ状態管理が簡単にできます！

黄色・・・GetXの変数は、ページに関するクラスとは別のクラスにあるので、継承してあげます。
GetXの管理用クラスの変数を使う時には、controller.countのように「controllerクラスのcount変数だよ～」という事を書きましょう。
GetXの管理用クラスの関数を使う時には、controller.increment()のように「controllerクラスのincrement()関数だよ～」という事を書きましょう。

赤・・・GetXで状態管理している変数を表示するときには、Obx(()=>Text(・・・))のように書きます。また、controller.countのように、「controllerクラスのcount変数だよ～」という風に指定してあげます。

黄緑・・・GetXで状態管理している変数に値を代入したり、GetXで状態管理している変数をほかの変数に代入するときには、.obxを付ける！！以上！