見出し画像

TWSNMP開発日誌:Flutterのページ遷移の学習、4Kモニターかウルトラワイドモニターかで悩む

浦和レッズ またも引き分け! 前半で3:0から追いついたので面白い試合でした。助手の猫が天から「わしのおかげ」と言ってそうです。
今朝は4時から開発開始です。頭のクリアな時間にTWLogAIANのマニュアルをZennに移植しました。

この記事をnoteから移植している時に、今使っているモニターの画面が狭く感じました。前から思っている4Kモニターかウルトラワイドモニタを買うかの悩みが再燃しました。調べているうちに

を見つけて読み込んでいるうちに1時間半経過しました。せっかく早起きしたのに、Fulutterの学習の時間がなくなりました。
一通り考えて4Kにする方向で落ち着きましたが、まだ買わないことにしました。
Flutterのページ遷移の学習をしました。

の記事のプログラムを写経して動かしみました。そのままコピペだと動きませんが修正方法に慣れてきたので10分ぐらいで、動かすことができました。
ちょっと欲がでて、ページ遷移する時にパラメータを渡す実験をしてみました。
Testページ1からTestページ2へ遷移する時にパラメータを渡して

Flutterのページ遷移でパラメータを渡す実験

のように遷移する実験です。
ステートフルとステートレスの違いがよく理解できました。
テストページ1側のソースコードは

import 'package:flutter/material.dart';
import 'package:navigator/test_page2.dart';

class TestPage1 extends StatelessWidget {
  const TestPage1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Test1"),
        ),
        body: Center(
            child: Column(children: <Widget>[
          TextButton(
              onPressed: () => {
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) {
                      return const TestPage2("1");
                    }))
                  },
              child: const Text("進む1", style: TextStyle(fontSize: 80))),
          TextButton(
              onPressed: () => {
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) {
                      return const TestPage2("2");
                    }))
                  },
              child: const Text("進む2", style: TextStyle(fontSize: 80))),
        ])));
  }
}

です。遷移先のテストページ2側のソースコードは、

import 'package:flutter/material.dart';
import 'package:navigator/test_page3.dart';

class TestPage2 extends StatefulWidget {
  @required
  final String title;
  const TestPage2(this.title, {Key? key}) : super(key: key);

  @override
  State<TestPage2> createState() {
    return _TestPage2State();
  }
}

class _TestPage2State extends State<TestPage2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Test2 ${widget.title}"),
        ),
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          TextButton(
              onPressed: () => {
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) {
                      return const TestPage3();
                    }))
                  },
              child: const Text("進む", style: TextStyle(fontSize: 80))),
          TextButton(
              onPressed: () => {Navigator.of(context).pop()},
              child: const Text("戻る", style: TextStyle(fontSize: 80)))
        ])));
  }
}

です。
楽しくなってきたところで時間切れです。モニターで悩んだためです。
明日に続く

開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。