Flutter로 문자열을 입력할 수 있는 대화상자 만들기

ShowDialog() 방법을 사용하여 Flotter에 대화상자를 표시합니다.
이걸로 문자열을 입력할 수 있는 대화상자를 만들고 싶습니다.
인터넷에서 열심히 검색한 덕분에 코드가 나왔는데 이번에 소개해 드릴게요.
이번에 만든 거.

가운데 버튼을 누르다

이렇게 표시됩니다. (또한 언어 설정이 생략되어 중국어 글씨체가 되었습니다.)
코드
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: TitleScreen(),
));

class TitleScreen extends StatefulWidget {
  @override
  _TitleScreenState createState() => _TitleScreenState();
}

class _TitleScreenState extends State<TitleScreen> {

  Future<void> InputDialog(BuildContext context) async {    //処理が重い(?)からか、非同期処理にする
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('タイトル'),
            content: TextField(
              decoration: InputDecoration(hintText: "ここに入力"),
            ),
            actions: <Widget>[
              FlatButton(
                color: Colors.white,
                textColor: Colors.blue,
                child: Text('キャンセル'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              FlatButton(
                color: Colors.white,
                textColor: Colors.blue,
                child: Text('OK'),
                onPressed: () {
                  //OKを押したあとの処理
                },
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) => Center(
    child: RaisedButton(
      child: Text('ダイヤログを表示'),
      onPressed: () {
        InputDialog(context);
      },
    ),
  );
}
전체 복사가 가능합니다.
단지 AlertDialog의 conntent에서 TextField를 직접 지정했을 뿐 실제로는 매우 간단하다.
TextField 컨텐츠를 가져오려면 TextEditing Controller 를 사용하여 지정합니다.

좋은 웹페이지 즐겨찾기