GetXパッケージの使用(画面遷移・画面更新) ~ 初めてのFlutter+Dart体験記

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()
          )
        ]
      )
    );
  }
}
  

「 初めてのFlutter+Dart体験記(Android,iOSアプリ作成)」に戻る

Copyright 2021 Mam