Flutter入門3_入力と値渡し

Flutter3個目の投稿です。

備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。

今回はFlutterの入力と値渡しに関して記載します。


目次
-完成イメージ
-1.構成
-2.入力と値渡し①_second_page.dartに変数を宣言
-3.入力と値渡し②_first_page.dartから変数を渡す
-4.入力と値渡し③_second_page.dartにTextを配置
-5.入力と値渡し④_first_page.dartにTextFieldを配置
-6.入力と値渡し⑤_first_page.dartにTextFieldで入力した値を変数に入れる
-7.全体コード
-参考文献
-最後に




# 完成イメージ
・前回の記事からファースト画面に入力画面を作成する
　※下記前回記事

https://qiita.com/ds0743/items/39dea3bf6a64ec9b929f
 
 
・テキスト入力後、ファースト画面のボタンを押せばセカンド画面へ
    　入力したテキストが反映される
<img width="40%" alt="input_and_passing_by_value①_GIF.gif" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/4d6a3f67-129b-37d9-6997-139c8b4cd219.gif">


## 1.構成
・セカンド画面に変数（name）を作成し、
　セカンド画面遷移時に名前がないと無効になるようにする
・ファースト画面からセカンド画面へ行く処理内で変数(名前)を渡すようにする
・セカンド画面でTextを配置し、ファースト画面から渡された名前を表示する
・ファースト画面にTextFieldを配置し入力可能にする
・ファースト画面で入力した値を変数に入れ、セカンドページに反映するようにする


## 2.入力と値渡し①_second_page.dartに変数を宣言
・名前の変数（String name）を作成する
・セカンド画面を呼び出す時に引数（this.name）がないと無効になるように記載する
```php:second_page.dart
import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  SecondPage(this.name);
  final String name;
```

## 3.入力と値渡し②_first_page.dartから変数を渡す
・エラーが発生しているSecondPage()を引数を渡すように
　名前を入れて修正する
 　例：SecondPage()　→ SecondPage('daichi')

 
```php:first.page.dart
              ElevatedButton(
                onPressed: () {
                  //ボタンを押した時に呼ばれるコードを書く
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondPage('daichi'),//←ココ
                    ),
                  );
                },
                child: const Text('次の画面へ'),
              ),
```

## 4.入力と値渡し③_second_page.dartにTextを配置
・Center Widget内にColumnを作成
・mainAxisAligment.centerでボタンとTextを真ん中に配置
　※mainAxisAligment.start＝上部、mainAxisAligment.end＝下部に配置される
・変数nameをが入るTextを作成
・Text Widget内のstyle:TextStyle(fontsize:50,)で文字の大きさを変更する

```php:second_page.dart
body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              name,
              style: TextStyle(fontSize: 50),
            ),
            ElevatedButton(
              onPressed: () {
                //ボタンを押した時に呼ばれるコードを書く
                Navigator.pop(context);
              },
              child: const Text('前の画面へ'),
            ),
          ],
        ),
      ),
```
Text(name)は
ファースト画面の'daichi'→セカンド画面のSecondPage(this.name)→final String name
→Text(name)という順で値が渡されている

## 5.入力と値渡し④_first_page.dartにTextFieldを配置
・Center Widget内にColumnを作成
・mainAxisAligment.centerでボタンとTextを真ん中に配置
・TextFieldを作成
・TextField Widget内にonChanged: (text){}を記載する
  　※{}内にprint(text);を記載すればコード確認ができる
・Center Widget内にPaddingを作成し両余白を調整する
・FirstPage class内にテキストの変数を作成

 
```php:first_page.dart
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                onChanged: (text) {
                  nameText = text;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  //ボタンを押した時に呼ばれるコードを書く
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondPage(nameText),
                    ),
                  );
                },
                child: const Text('次の画面へ'),
              ),
            ],
          ),
        ),
      ),
```

## 6.入力と値渡し⑤_first_page.dartにTextFieldで入力した値を変数に入れる
・FirstPage classにTextFieldで入力した値の変数（String nameText）を作成する
・onChanged: (text){}内に代入して入力したTextがnameTextに入るようにする
・SecondPage('daichi'）をSecondPage(nameText）にして
　入力したTextがSecondPageに値渡しできるようにする
　 
   
```php:first_page.dart
class FirstPage extends StatelessWidget {
  String nameText = '';//←ココ

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('ファースト'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                onChanged: (text) {
                  nameText = text;//←ココ
                },
              ),
              ElevatedButton(
                onPressed: () {
                  //ボタンを押した時に呼ばれるコードを書く
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondPage(nameText),//←ココ
                    ),
                  );
                },
                child: const Text('次の画面へ'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

これで完成！！！

## 7.全体コード
```php:main.dart
import 'package:flutter/material.dart';
import 'package:introduction3_input_and_passing_by_value/first_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FirstPage(),
    );
  }
}
```
```php:first_page.dart
import 'package:flutter/material.dart';
import 'package:introduction3_input_and_passing_by_value/second_page.dart';

class FirstPage extends StatelessWidget {
  String nameText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('ファースト'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                onChanged: (text) {
                  nameText = text;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  //ボタンを押した時に呼ばれるコードを書く
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondPage(nameText),
                    ),
                  );
                },
                child: const Text('次の画面へ'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```
```php:second_page.dart
import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  SecondPage(this.name);
  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('セカンド'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              name,
              style: TextStyle(fontSize: 50),
            ),
            ElevatedButton(
              onPressed: () {
                //ボタンを押した時に呼ばれるコードを書く
                Navigator.pop(context);
              },
              child: const Text('前の画面へ'),
            ),
          ],
        ),
      ),
    );
  }
}

```
## 参考文献
Flutter大学. 「Flutter超入門2022】③入力フォームに入れた値を次の画面に渡す【Flutter3.0】」.　YouTube.　2022/06,https://www.youtube.com/watch?v=Iyy4ceBaAjY,
（参照 2024-06-20）
Flutter. 「TextField class」. Flutter.　更新日不明,
https://api.flutter.dev/flutter/material/TextField-class.html, (参照 2024-06-20)



## 最後に
・反映できない場合は、更新をすると上手く行くときがあります
・コードが多いところには//←ココを付けて変更点をわかりやすくしました
・3投稿目で大まかなフォーマットができ、復習速度が上がってます！
　（多分30分〜1時間くらい？笑）