FlutterのAlertDialog内でTextFieldを2つ以上持つ方法

## はじめに
Flutterを使ってネイティブアプリを作っているが、Widgetの使い方やFirestoreとのデータ連携の仕方など、コードの書き方が分からずそれなりに苦労している。
一旦分かってしまえばかなり高速でアプリ開発ができそうなので、使い方やコードの書き方のメモを残しておく。
今回は`AlertDialog()`内で`TextField`を2つ以上持つ方法メモする。

## Flutterの実行環境

- Ubuntu 18.04LTS（GCP上）
- Flutter 1.22.6
- Dart 2.10.5
- Android Studio 4.1.2
- VScode 1.53.0
　　

## メモ内容
まず、シンプルに`AlertDialog()`内で`TextField`を１つ持つ場合は、以下の様な書き方になる。
　※分かりやすさ重視で全てのコードを `main.dart` に記載。

```dart:main.dart
import 'package:flutter/material.dart';

void main() {
 runApp(App());
}

class App extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: true,  // <- Debug の 表示を OFF

      home: TestPage(),
    );
  }
}

 class TestPage extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

    return Scaffold(
        body: Center(child: Text("UI_test")), // <- Text の位置を指定
        floatingActionButton: Container(
          margin: EdgeInsets.only(bottom: 10.0), // ボタンの配置
        
          child: FloatingActionButton.extended(
           backgroundColor: Colors.green,
            icon: Icon(Icons.add),
            label: Text("TEST"),

            onPressed: () => showDialog(
                context: context,
                child: AlertDialog(
                  title: Text(
                    'TITLE',
                    // style: TextStyle(fontFamily: "Smash"),
                  ),
                  content: TextField(
                    //controller: dateTextController,
                    decoration: InputDecoration(
                      hintText: 'field1',
                    ),
                    autofocus: true,
                      // keyboardType: TextInputType.number,
                  ),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('キャンセル'),
                      onPressed: () {
                        Navigator.pop(context);
                    }),
                    FlatButton(
                      child: Text('追加'),
                      onPressed: () {
                        Navigator.pop(context);
                    }),
                  ]),
                ),
           ),
          ),
      );
 }
}
```

上記を実行し、エミュレータ上のボタンをクリックすると、以下の様になるはず。
![Qiita-No032_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/f3930716-bfbf-b86e-6f80-00d2ba6096a3.jpeg)


次に`AlertDialog()`内で`TextField`を２つ持つ場合。

```dart:
import 'package:flutter/material.dart';

void main() {
 runApp(App());
}

class App extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: true,  // <- Debug の 表示を OFF

      home: TestPage(),
    );
  }
}

 class TestPage extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

    return Scaffold(
        body: Center(child: Text("UI_test")), // <- Text の位置を指定
        floatingActionButton: Container(
          margin: EdgeInsets.only(bottom: 10.0), // ボタンの配置

          child: FloatingActionButton.extended(
           backgroundColor: Colors.green,
            icon: Icon(Icons.add),
            label: Text("TEST"),

            onPressed: () => showDialog(
                context: context,
                child: AlertDialog(
                  title: Text(
                    'TITLE',
                    // style: TextStyle(fontFamily: "Smash"),
                  ),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(
                          hintText: 'field1',
                        ),
                        autofocus: true,
                      // keyboardType: TextInputType.number,
                      ),
                      TextField(
                        decoration: InputDecoration(
                          hintText: 'field2',
                        ),
                        autofocus: false,
                      // keyboardType: TextInputType.number,
                      ),
                    ]
                  ),  
                  actions: <Widget>[
                    FlatButton(
                      child: Text('キャンセル'),
                      onPressed: () {
                        Navigator.pop(context);
                    }),
                    FlatButton(
                      child: Text('追加'),
                      onPressed: () {
                        Navigator.pop(context);
                    }),
                  ]),
                ),
           ),
          ),
      );
 }
}
```
入力フィールドが1つの場合は、`content`プロパティに`TextField`を直接セットすれば良いが、2つ以上設置したい場合は、`content`プロパティに`Column`Widgetをセットし、その中の`Children`プロパティに書き込めばできる。

実行結果は以下の様になるはず。
![Qiita-No032_img02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/8e21aa22-937e-1f5a-3c6c-ef2974b79e6d.jpeg)