【Flutter】TextEditingControllerを使ってTextFieldの値を操作する

FlutterでTextEditingControllerを使ってTextFieldの値を操作したい！

概要

今回の記事では、FlutterでTextEditingControllerを使ってTextFieldの値を操作する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

TextButtonをタップするとTextFieldを含むダイアログが表示されて、ダイアログの中のTextButtonをタップするとTextFieldの値を保存して、再度ダイアログを表示する際にTextFieldの値の初期値として読み込む例。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const TextEditingControllerSample1()
      )
    )
  );
}

class TextEditingControllerSample1 extends StatelessWidget {
  TextEditingControllerSample1({super.key});

  String text = "";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: TextButton(
          onPressed: () {
            showMyDialog(context);
          },
          child: const Text('Open Dialog'),
        ),
      ),
    );
  }

  void showMyDialog(BuildContext context) {
    TextEditingController textEditingController = TextEditingController();
    textEditingController.text = text;

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('テキスト入力'),
          content: TextField(
            controller: textEditingController,
            maxLength: 100,
            decoration: const InputDecoration(hintText: '100文字まで！'),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                text = textEditingController.text;
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  }
}

ダイアログの表示については下記の記事を参照。

【Flutter】ダイアログを表示する

Flutterでダイアログを表示したい！

TextEditingControllerのプロパティtextにTextFieldの値が保管される。値を入力することも出来る。

まとめ（感想文）

フォームを作る時に必須になるかもね！