FlutterアプリケーションでのGetXパッケージの使用を開始する

公開: 2022-03-10

クイックサマリー↬GetXは、Flutterアプリケーションの状態、ナビゲーション、および依存関係を管理するための非常に軽量なソリューションです。この記事では、その利点、機能、およびFlutterアプリケーションでの使用を開始する方法について説明します。

Flutterは、真にクロスプラットフォームのネイティブアプリケーションを構築するための最速の方法の1つです。これは、開発者がユーザーにとって本当に美しいUIエクスペリエンスを構築できるようにする機能を提供します。

ただし、ほとんどの場合、画面への移動、状態管理、アラートの表示などを実現するには、多くの定型文が必要です。これらの定型文は、機能の構築と期限の遵守を試みる開発者の開発効率を低下させる傾向があります。

たとえば、Flutterアプリケーションの画面に移動するために必要なボイラープレートを考えてみましょう。 AboutScreenという画面に移動するとします。あなたは書く必要があります：

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

次のようなことを行う方が効率的で開発者にとって使いやすいでしょう。

 Get.to(AboutScreen());

Flutterの前のページに戻る必要がある場合は、次のように書く必要があります。

 Navigator.pop(context);

画面間を移動するのと同じくらいありふれたものについては、常にコンテキストプロパティに依存していることに気付くでしょう。代わりに、次のようなことができるとしたらどうでしょうか。

 Get.back();

上記の例は、Flutterでのアプリケーション開発を改善して、ボイラープレートを減らしてより直感的かつ効率的にする方法の一部です。シンプルさと機能やアイデアの構築を効率的に行うことを好むなら、FlutterではGetパッケージに興味があります。

ジャンプした後もっと！以下を読み続けてください↓

GetXとは

GetまたはGetXは、Flutterアプリケーションを構築するための高速で安定した超軽量のフレームワークです。

GetXは、高性能の状態管理、インテリジェントな依存性注入、およびルート管理を備えた、シンプルで実用的な方法ですぐに出荷されます。

GetXは、開発者がアプリケーションを構築する際に使用できるシンプルで直感的な構文を提供しながら、定型文を最小限に抑えることを目的としています。 GetXの中核には、次の3つの原則があります。

パフォーマンス
GetXは、可能な限り少ないリソースを消費する機能を実装することにより、アプリケーションのパフォーマンスに重点を置いています。
生産性
GetXは、開発者がその機能を使用してできるだけ早く生産性を高めることを望んでいます。これは、覚えやすい構文とプラクティスを採用することによって実現されます。たとえば、通常、開発者はコントローラーをメモリから削除する必要がありますが、GetXは、アプリケーション内のコントローラーを監視し、デフォルトで使用されていないときにコントローラーを削除するスマートな管理を提供します。
組織
GetXを使用すると、Flutterアプリケーションで、ビュー、プレゼンテーションロジック、ビジネスロジック、依存性注入、およびナビゲーションを分離できます。ルート間を移動するためにコンテキストは必要ないため、ナビゲーションをウィジェットツリーに依存する必要はありません。 inheritedWidgetされたウィジェットを介してコントローラー/ブロックにアクセスするためのコンテキストは必要ないため、プレゼンテーションロジックとビジネスロジックをビューレイヤーから完全に分離できます。 Controllers / Models /Blocsクラスをマルチプロバイダーを介してウィジェットツリーに注入する必要はありません。このGetXは独自の依存性注入機能を使用して、DIをビューから完全に分離します。

GetXの機能

GetXには、Flutterでの毎日のアプリ開発に必要な機能がいくつか付属しています。それらを見てみましょう：

状態管理

GetXの主力機能の1つは、直感的な状態管理機能です。 GetXの状態管理は、定型文をほとんどまたはまったく使用せずに実現できます。

ルート管理

GetXは、Flutterアプリケーション内をナビゲートするためのAPIを提供します。このAPIはシンプルで、必要なコードが少なくて済みます。

依存関係の管理

GetXは、ビューコントローラーなどのFlutterアプリケーションの依存関係を管理するためのスマートな方法を提供します。 GetXは、現在使用されていないコントローラーをメモリから削除します。これは開発者が手動で行う必要があるタスクでしたが、GetXは箱から出して自動的にそれを行います。

国際化

GetXは、すぐに使用できるi18nを提供し、さまざまな言語をサポートするアプリケーションを作成できるようにします。

検証

GetXは、Flutterアプリケーションで入力検証を実行するための検証メソッドを提供します。別の検証パッケージをインストールする必要がないため、これは非常に便利です。

保管所

GetXは、メモリ内に高速で非常に軽量な同期Key-Valueを提供し、各操作でデータをディスクにバックアップします。完全にDartで記述されており、コアのGetXパッケージと簡単に統合できます。

GetX入門

GetXとは何か、GetXが提供する機能と利点を確認したので、アプリケーションでGetXを設定する方法を見てみましょう。デモアプリを作成して、実際に言及したほとんどの機能を確認します。始めましょう。

まったく新しいFlutterアプリケーションを作成する

まず、FlutterCLIを使用して新しいFlutterアプリケーションを作成します。お使いのマシンは、Flutterを使用したアプリケーション開発用にすでにセットアップされていると思います。だから私たちは実行します：

 flutter create getx_demo

これにより、Flutterアプリケーションに必要な基本コードが生成されます。次に、選択したエディターで作成したプロジェクトを開きます（この記事ではVS Codeを使用します）。次に、プロジェクトを実行して、プロジェクトが正常に機能していることを確認します（デバイスが接続されているか、エミュレーター/シミュレーターが実行されていることを確認してください）。

アプリケーションが実行されると、新しいFlutterアプリケーションを作成するときにFlutterスキャフォールドとなるデフォルトのカウンターアプリケーションが表示されます。これから行うことは、まったく同じカウンターアプリケーションを実装することですが、GetXを使用してアプリの状態（カウント変数）を管理します。

main.dartをクリアし、次のコードスニペットのみを残すことから始めます。

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

MyHomePageウィジェットがなくなったため、アプリケーションは壊れていたはずです。それを修正しましょう。 GetXを使用すると、ステートフルウィジェットは必要ありません。また、UIをビジネスロジックから明確に分離できます。したがって、 lib/内に2つのディレクトリを作成します。これらのディレクトリは次のとおりです。

`views/`	アプリケーションで画面を保持します。
`controllers/`	アプリケーションの画面のすべてのコントローラーを保持します。

views/内にMyHomePageウィジェットを作成しましょう。ファイルの名前はmy_home_page.dartになります。作成したら、次のコードスニペットを追加します。

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

これでMyHomePageウィジェットができました。それをmain.dartにインポートしましょう。 import'package import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

これで、 main.dartファイルは次のようになります。

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

ここでアプリケーションを保存すると、すべてのエラーが修正され、アプリが実行されます。ただし、ボタンをもう一度クリックすると、カウンターは更新されません。 views/my_home_page.dartコードを見ると、テキストウィジェットの値として0をハードコーディングし、ボタンのonPressedハンドラーにnullを渡していることがわかります。 GetXを組み合わせて、アプリケーションを再び機能させるようにしましょう。

GetXのインストール

pub.devのGetXのインストールページに移動すると、GetXをインストールするためにpubspec.ymlファイルにコピーするコード行が表示されます。この記事を書いている時点で、GetXの現在のバージョンは3.23.1です。したがって、次の行をコピーします。

 get: ^3.23.1

次に、 pubspec.ymlファイルのdependenciesセクションに貼り付けます。ファイルを保存すると、getが自動的にインストールされます。または、ターミナルで手動で実行することもできます。

 flutter pub get

pubspec.ymlファイルの依存関係セクションは次のようになります。

 dependencies: flutter: sdk: flutter get: ^3.23.1

`GetxController`

GetXを使用すると、アプリケーションのUIをロジックから分離できることを説明しました。これは、アプリケーションのビューのコントローラークラスを作成するために継承できるGetxControllerクラスを提供することによって行われます。現在のアプリでは、ビューが1つあるため、そのビューのコントローラーを作成します。 controllers/ディレクトリに移動し、 my_home_page_controller.dartというファイルを作成します。これにより、 MyHomePageビューのコントローラーが保持されます。

ファイルを作成したら、最初にこれをファイルの先頭に追加してGetXパッケージをインポートします。

 import 'package:get/get.dart';

次に、その中にMyHomePageControllerというクラスを作成し、 GetxControllerクラスを拡張します。ファイルは次のようになります。

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

作成したクラスにカウント状態を追加しましょう。

 final count = 0;

GetXでは、変数を監視可能にするために—これは、変数が変更されたときに、それに依存するアプリケーションの他の部分に通知されることを意味します。これを行うには、変数の初期化に.obsを追加するだけです。したがって、上記のcount変数では、 .obsを0に追加します。したがって、上記の宣言は次のようになります。

 final count = 0.obs;

現時点でのコントローラーファイルは次のようになります。

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

MyHomePageControllerでまとめるために、 incrementメソッドを実装します。これを行うためのスニペットは次のとおりです。

 increment() => count.value++;

インクリメントするには、count変数に.valueを追加する必要があることに気付くでしょう。これを行ったのは、変数に.obsを追加すると、それが監視可能な変数になり、監視可能な変数の値を取得するには、 valueプロパティから取得するためです。

これでコントローラーは完成です。これで、countの値が変更されると、それを使用するアプリケーションのすべての部分が自動的に更新されます。

次に、ビューに移動して、作成したコントローラーについて通知します。これを行うには、GetX依存関係管理機能を使用してコントローラークラスをインスタンス化します。これにより、コントローラーが不要になったときにコントローラーがメモリに存在しないようになります。

views/my_home_page.dartで、Getパッケージと作成したコントローラーを次のようにインポートします。

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

次に、 MyHomePageクラス内で、 MyHomePageControllerをインスタンス化します。

 final MyHomePageController controller = Get.put(MyHomePageController());

これでMyHomePageControllerのインスタンスができたので、メソッドだけでなく状態変数も使用できます。したがって、状態から始めて、GetXで、状態変数が変更されたときに再構築されるUIの一部をマークするために、その部分をObxウィジェットでラップします。 GetXはこれを行う他の方法を提供しますが、この方法ははるかに単純でクリーンです。

カウントアプリケーションでは、テキストウィジェットを現在のカウントで更新する必要があります。したがって、TextウィジェットをObxウィジェットで次のようにラップします。

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

次に、静的文字列0をMyHomePageControllerのcount変数に次のように置き換えます。

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

最後に、 floatingActionButtonが次のように押されたときにincrementメソッドを呼び出します。

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

したがって、全体として、 MyHomePageビューファイルは次のようになります。

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

アプリケーションを保存するか、再実行すると、カウンターアプリは最初にアプリケーションを作成したときと同じように機能するはずです。

GetXを使用した状態管理がいかに直感的であるかをご存知だと思います。多くの定型文を作成する必要はありませんでした。アプリケーションが複雑になるにつれて、この単純さがより明白になります。また、ビューはステートを保持または維持しないため、ステートレスウィジェットになる可能性があります。ビューの頭脳は、ビューとメソッドの状態を保持するコントローラークラスになりました。

GetXでのナビゲーション

GetXでの状態管理を見てきました。 GetXがアプリケーション内のナビゲーションをどのようにサポートするかを見てみましょう。 GetXのナビゲーション機能をアクティブにするには、 main.dartに1つの変更を加えるだけで、 MaterialAppウィジェットをGetMaterialAppウィジェットに変えることができます。最初にgetをmain.dartの先頭にインポートしてそれを実行しましょう

import 'package:get/get.dart';

次に、 MaterialAppに変更を加えて、 main.dartファイルを次のようにします。

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

これで、GetXナビゲーションをサポートするようにアプリが設定されました。これをテストするために、 views/ディレクトリに別のビューを作成します。これをabout_page.dartで呼び出し、次のコードが含まれます。

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

次に、 MyHomePageに移動し、ボタンを追加して、押すとAboutPageに移動します。そのようです。ボタンはObxウィジェットの下にある必要があります。ここにあります：

 FlatButton(onPressed: () {}, child: Text('About GetX'))

また、 MyHomePageファイルの上にAboutPageをインポートする必要があります。

 import './about_page.dart';

GetXにAboutPageに移動するように指示するには、次の1行のコードが必要です。

 Get.to(AboutPage());

次のように、 FlatButtonウィジェットのonPressedコールバックに追加しましょう。

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

ここでアプリケーションを保存すると、 AboutPageに移動できるようになります。

MyHomePageビューをAboutPageに置き換えることもできます。これにより、ユーザーはデバイスの戻るボタンを押して前のページに戻ることができなくなります。これは、ログイン画面などの画面に役立ちます。これを行うには、 onPressedハンドラーのコンテンツを次のコードに置き換えます。

 Get.off(AboutPage());

これにより、 MyHomePageビューがポップされ、 AboutPageに置き換えられます。

AboutPageに移動できるようになったので、 MyHomePageに戻ってこれを行うことができるのはそれほど悪くないと思います。Paddingウィジェットの後にAboutPageにボタンを追加し、 onPressedハンドラーで呼び出しを行います。 Get.back()に移動して、 MyHomePageに戻ります。

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

スナックバー

スナックバーを表示するための従来のFlutterでは、次のように記述する必要があります。

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

まだcontextプロパティに依存していることがわかります。 GetXでこれを実現する方法を見てみましょう。 MyHomePageビューに移動し、最後に追加したボタンの下に別のFlatButtonウィジェットを追加します。ボタンのスニペットは次のとおりです。

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

メッセージを表示しましょう'Yay！素晴らしいGetXスナックバー」。 onPressedハンドラー関数内に、以下のコード行を追加します。

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

アプリケーションを実行し、「スナックバーを表示」ボタンをクリックすると、アプリケーションの上にスナックバーが表示されます。

Flutterアプリケーションでスナックバーを表示するために必要な行数をどのように減らしたかをご覧ください。スナックバーをさらにカスタマイズしてみましょう。アプリの下部に表示させましょう。コードを次のように変更します。

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

アプリケーションを保存して実行すると、アプリケーションの下部にスナックバーが表示されます。現時点では透明なスナックバーの背景色を変更してみませんか。 FlutterのColorsクラスからamberAccentカラーに変更します。コードを次のように更新します。

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

全体として、ボタンコードは次のようになります。

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

ダイアログ

GetXは、FlutterでAlertDialogを作成するための簡単な方法を提供します。実際の動作を見てみましょう。前のボタンの下に別のボタンを作成します。

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

GetXを呼び出して、アラートダイアログを表示してみましょう。

 Get.defaultDialog();

ダイアログの外側をタップすると閉じることができるデフォルトのアラートダイアログが表示されます。 1行のコードで、アラートダイアログが機能していることがわかります。少しカスタマイズしてみましょう。タイトルとメッセージを変更してみましょう。

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

アプリを保存して実行すると、[AlertDialogを表示]ボタンを押すと変更が表示されます。次のように、確認ボタンとキャンセルボタンを追加できます。

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

GetXダイアログをカスタマイズする方法はたくさんあり、APIは非常に直感的でシンプルです。

結論

GetXは、Flutter開発者が機能を構築する際の生産性を向上させるために作成されました。 GetXは、状態管理やナビゲーション管理などを行うために必要な定型文を検索する代わりに、パフォーマンスを犠牲にすることなくこれらのアクティビティを実現するためのシンプルで直感的なAPIを提供します。この記事では、GetXと、FlutterアプリケーションでGetXの使用を開始する方法を紹介します。

ここでデモを見つけることができます→