Flutter의 AlertDialog에 TextField를 두 개 이상 갖는 방법

소개

Flutter를 사용해 네이티브 앱을 만들고 있지만, Widget의 사용법이나 Firestore와의 데이터 연계 방법 등, 코드의 작성 방법을 모르고 그 나름대로 고생하고 있다.
일단 알고 버리면 상당히 고속으로 앱 개발을 할 수 있을 것 같기 때문에, 사용법이나 코드의 작성 방법의 메모를 남겨 둔다.
이번은 AlertDialog() 안에 TextField 를 2개 이상 가지는 방법 메모한다.

Flutter 실행 환경

우분투 18.04LTS (GCP)

Flutter 1.22.6

Dart 2.10.5

Android Studio 4.1.2

VScode 1.53.0

메모 내용

우선, 간단하게 AlertDialog()내에서 TextField를 1개 가지는 경우는, 이하와 같은 쓰는 방법이 된다.
※알기 쉬움 중시로 모든 코드를 main.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);
                    }),
                  ]),
                ),
           ),
          ),
      );
 }
}

위의 작업을 수행하고 에뮬레이터의 버튼을 클릭하면 다음과 같아야합니다.


다음에 AlertDialog() 안에 TextField 를 2개 가지는 경우.

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 속성에 쓰면 된다.

실행 결과는 다음과 같아야합니다.