GetXパッケージ(画面遷移・画面更新) ~初めてのFlutter+Dart体験記
画面遷移する場合には、FlutterではNavigatorを使うのが標準のようです。
また、画面更新がある場合はStatefulWidgetとsetStateを使うのが標準のようです。
が、かなり面倒なので、GetXパッケージを使うのをお勧めします。
GetXパッケージを使うと遥かに楽にStatelessWidgetを使って状態遷移(値変更で画面更新)が可能です。
また、画面遷移もNavigatorを使うよりも遥かに楽にでき、画面間のデータの受け渡しもできますし、トランジションも使えます。
/pubspec.yaml ファイルの変更
GetXパッケージを使用するために、以下のように記述します
name: flutter_application
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
get: ^4.1.4
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
GetXパッケージのインストール
コンソールから以下コマンドを入力するとインストールされますflutter pub get
/lib/main.dart ファイルの編集
以下サンプルソースコードを示します
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(
//GetMaterialAppを使ってページに名前を付ける
GetMaterialApp(
initialRoute: '/', //初期表示ページ
getPages: [
GetPage(
name: '/',
page: () => Home(),
),
GetPage(
name: '/page1',
page: () => Page1(),
//画面遷移時にトランジションが使える
//Transition.downToUp, Transition.zoom, Transition.fadeIn, Transition.fade,
//Transition.rightToLeft, Transition.leftToRightWithFade, Transition.native
//Transition.noTransition 等が使える
transition: Transition.rightToLeft,
transitionDuration: Duration(milliseconds: 500),
),
GetPage(
name: '/page2',
page: () => Page2(),
//画面遷移時にトランジションが使える
transition: Transition.leftToRightWithFade,
transitionDuration: Duration(milliseconds: 500),
),
],
)
);
}
class Controller extends GetxController {
//このクラス内でアプリ全体で保持したい変数を宣言しておく
//初期値に".obs"を付ける
var count = 0.obs; //RxInt型
var str = "".obs; //RxString型
//変数の値の変更関数
void increment(){
count.value++;
}
void setStr(String st) {
str.value = st;
}
}
//■最初に表示されるページ
class Home extends StatelessWidget {
@override
Widget build(context) {
//Get.put()関数の引数にGetXControllerを継承したクラスを設定するとインスタンス化される
final Controller c = Get.put(Controller());
c.setStr("ホーム");
return Scaffold(
//count変数が変更されるとObx関数の引数で指定された無名関数が呼び出されます
appBar: AppBar(
title: Obx(
() => Text("${c.str} クリック数: ${c.count}")
)
),
body: Column(
children: [
ElevatedButton(
child: Text("ページ1へ"),
style: ElevatedButton.styleFrom(
primary: Colors.orange,
onPrimary: Colors.white
),
//ボタンを押すと/page1に画面遷移する
onPressed: () => Get.toNamed('/page1')
),
ElevatedButton(
child: Text("ページ1へ(パラメータを渡す)"),
style: ElevatedButton.styleFrom(
primary: Colors.orange, onPrimary: Colors.white),
//以下の方法でパラメータを渡すこともできる
onPressed: () => Get.toNamed('/page1?flag=true&value=hoge'))
]
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed:
(){
c.increment();
c.setStr("ボタン押した");
}
)
);
}
}
//■次のページ
class Page1 extends StatelessWidget {
@override
Widget build(context) {
//既にGet.putされたコントローラーを探す
final Controller c = Get.find();
c.setStr("ページ1");
//渡されたパラメータを取得する
var flag = Get.parameters['flag'];
var value = Get.parameters['value'];
return Scaffold(
appBar: AppBar(
//更新された変数と渡されたパラメータを表示する
title: Obx(() => Text(
"${c.str} クリック数: ${c.count}(パラメータ:$flag,$value)"
))
),
body: Column(
children: [
ElevatedButton(
child: Text("ホームに戻る"),
//ボタンを押すと前ページに画面遷移する
onPressed: () => Get.back()
),
ElevatedButton(
child: Text("ページ2へ(引数を渡す場合)"),
style: ElevatedButton.styleFrom(
primary: Colors.orange,
onPrimary: Colors.white
),
//画面遷移時(/page2)に引数を渡す
onPressed: () => Get.toNamed(
//画面遷移先ページ
'/page2',
//Map型(連想配列みたいなもの)引数を渡す
arguments: {'arg1': '渡す引数1', 'arg2': '引数2'}),
),
]
)
);
}
}
//■次の次のページ
class Page2 extends StatelessWidget {
@override
Widget build(context) {
//既にGet.putされたコントローラーを探す
final Controller c = Get.find();
c.setStr("ページ2");
//画面遷移時に渡された引数を取得
var arg = Get.arguments;
return Scaffold(
appBar: AppBar(
title: Obx(() => Text(
//更新された変数と渡されたパラメータを表示する
"${c.str} クリック数: ${c.count}" + "(引数:${arg['arg1']},${arg['arg2']})"
))
),
body: Column(
children: [
ElevatedButton(
child: Text("ページ1に戻る"),
//ボタンを押すと前ページに画面遷移する
onPressed: () => Get.back()
)
]
)
);
}
}
「初めてのAndroid Studio体験記」に戻る