TWSNMP開発日誌:Flutterのページ遷移の学習、4Kモニターかウルトラワイドモニターかで悩む
浦和レッズ またも引き分け! 前半で3:0から追いついたので面白い試合でした。助手の猫が天から「わしのおかげ」と言ってそうです。
今朝は4時から開発開始です。頭のクリアな時間にTWLogAIANのマニュアルをZennに移植しました。
この記事をnoteから移植している時に、今使っているモニターの画面が狭く感じました。前から思っている4Kモニターかウルトラワイドモニタを買うかの悩みが再燃しました。調べているうちに
を見つけて読み込んでいるうちに1時間半経過しました。せっかく早起きしたのに、Fulutterの学習の時間がなくなりました。
一通り考えて4Kにする方向で落ち着きましたが、まだ買わないことにしました。
Flutterのページ遷移の学習をしました。
の記事のプログラムを写経して動かしみました。そのままコピペだと動きませんが修正方法に慣れてきたので10分ぐらいで、動かすことができました。
ちょっと欲がでて、ページ遷移する時にパラメータを渡す実験をしてみました。
Testページ1からTestページ2へ遷移する時にパラメータを渡して
のように遷移する実験です。
ステートフルとステートレスの違いがよく理解できました。
テストページ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の運営にも貢献できるのでよろしくお願います。