【Flutter】TextFieldで入力フォームを実装する

2023年11月25日

この記事はこんな人におすすめ！

FlutterのTextFieldで入力フォームを実装したい
TextFieldで入力した値を取得する方法が知りたい

「Flutterで入力フォームを作成するにはどうするの？」

今回はFlutterで入力フォームを実装できるTextFieldの使い方を解説していきます。本記事の内容はFluter公式のCookbookの手順を参考にしています。

TextFieldとは？

TextFieldは入力フォームを実装できるウィジェットです。メールアドレスや名前などユーザーから取得したい場合などに使用できます。

ステップ１：TextEditingControllerの作成

それではTextFieldの使い方を紹介していきます。

まずはStatefulWidgetでTextEditingControllerとdisposeメソッドを次のように作成します。

今回は_myControllerでTextEditingControllerを定義しています。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _myController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return ...
  }
}

ステップ２：TextFieldとTextEditingControllerを連携させる

次にTextFieldのcontrollerプロパティの引数に先ほど定義した_myControllerを渡せば入力フォームの完成です。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter')),
    body: TextField(
      controller: _myController,
    ),
  );
}

ステップ３：入力フォームで入力した値を取得

入力した値を取得するには先ほど定義したTextEditingControllerのtextプロパティを使用します。

次のコードではAlertDialogでTextEditingController.textを表示しています。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter')),
    body: TextField(
      controller: _myController,
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              content: Text(_myController.text),
            );
          },
        );
      },
      child: const Icon(Icons.text_fields),
    ),
  );
}

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final myController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: Text(myController.text),
              );
            },
          );
        },
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

まとめ

今回はTextFieldを使用して入力フォームを実装する方法を紹介します。

TextFieldに似たTextFormFieldもあるのでぜひ一緒にチェックしてみてください。

参考サイト

https://docs.flutter.dev/cookbook/forms/retrieve-input