Flutterの理解を深める - Stateful?or Stateless?

A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it’s stateful.
A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

https://docs.flutter.dev/ui/interactivity

要するに、何かを更新していきたい場合はstatefulを使うということです。

例えば、状態は変わらずな場合、 Icon, IconButton,  TextはStatelessWidgetを実装します。

statefulを使う場合は、例えばCheckbox, Radio, Slider, InkWell, Form, , TextFieldなどはStatefulWidgetを使います。

Add interactivity to your Flutter app

例えば

Retrieve the value of a text field

ここに例示がある

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {

  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(

        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

これを実行するとテキストを入力する部分TextFieldとボタンfloatingActionButtonが表示されます。

テキストに例えば"Taro"と打ってボタンを押せばアラートで画面表示されます。

ボタンを押すと変数に値を入れて画面の状態、文字を追加、変更します。

わかりにくいのでちょっといらないところを削除し整理します。

import 'package:flutter/material.dart';

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

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

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

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final myController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
       
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(  
                content: Text(myController.text),
              );
            },
          );
        },
      ),
    );
  }
}

この中の

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final myController = TextEditingController();

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

この部分が大事です。StatefulWidgetで必要な部分です。

TextEditingController()を代入した"myController"を使ってTextFieldに入力された値を取り出すことができます。

  child: TextField(
          controller: myController,
        ),

入力された値を取り出すタイミングは、floatingActionButtonフローティングボタンを押したタイミングで

   floatingActionButton: FloatingActionButton(   
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(  
                content: Text(myController.text),
              );
            },
          );
        },
      ),

アラート

 AlertDialog(  
        content: Text(myController.text),
  );

でポップアップした画面で

 Text(myController.text)

文字を表示します。