11月8日 進捗日記[自分用]

作業内容

今日は学習の日
学習の日は他人が作成したサンプルコードを読んだり実際に動かしたり、改変したりしながら今まで知らなかった書き方を学んでいく日。

学習した内容

画面遷移の方法
・タイトルバーのところにナビゲーション(戻るボタン)を表示させながら画面を遷移する方法(一般的に使う画面遷移手法)
・一つの画面に複数の画面を内包して切り替える手法

ナビゲーションを表示させながら画面遷移

基本的にはボタンなどを押した時の動作(onPressedの内部)などに記述する。

return Scaffold(
       appBar: AppBar(
         title: Text("Test1"),
       ),
       body: Center(
           child: TextButton(
               onPressed: () => {
                 Navigator.of(context)
                     .push(MaterialPageRoute(builder: (context) {
                   return TestPage2();
                 }))
               },
               child: Text("進む", style: TextStyle(fontSize: 80)))));

今回はTestPage2というクラスに遷移する。別途TestPage2は作成する必要がある。もちろん別のファイルに作成した場合はこのファイルにimportが必要
今回は同じ名前のファイルTestPage2にクラスTestPage2を作ったので以下のファイルをインポート

import 'package:beginner5/TestPage2.dart';

また画面を戻るボタンなどを作りたいときは以下のコードを実装する。ただし、タイトルバーに戻るボタンは自動的に作られるのでほとんど使うことはないだろう...

TextButton(
                 onPressed: () => {Navigator.of(context).pop()},
                 child: Text("戻る", style: TextStyle(fontSize: 80)))

1つのページに複数の画面を内包する方法

今回はスワイプして複数の画面を切り替える手法を学習した。

class _TestPage4State extends State<TestPage4>{
 PageController _pageController;
 int _selectedIndex = 0;

 // ボトムメニューの遷移先画面
 var _pages = [
   TestPage5(),
   TestPage6(),
   TestPage7(),
 ];
 @override
 void initState() {
   super.initState();
   _pageController = PageController(initialPage: _selectedIndex);
 }

 @override
 void dispose() {
   super.dispose();
   _pageController.dispose();
 }

 void _onPageChanged(int index) {
   setState(() {
     _selectedIndex = index;
   });
 }

 @override
 Widget build(BuildContext context) {

   return Scaffold(
       body: PageView(
           controller: _pageController,
           onPageChanged: _onPageChanged,
           children: _pages));
 }

}

参考ページ(本当にわかりやすい)

https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/beginner_page