Читаем поле с помощью Controller

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 24 из 34.

onChanged реагирует на каждую букву. Часто текст нужен только после нажатия кнопки, например «Добавить» или «Отправить». Для этого передай полю контроллер:

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

Контроллер хранится в State рядом с другими переменными. Он final, потому что сам контроллер всегда один и тот же; меняется только текст внутри него. _controller.text — это текущее содержимое поля, а _controller.clear() очищает его.

void _send() {
  print(_controller.text);
  _controller.clear();
}

Контроллер следует освобождать, когда экран закрывается. Для этого нужен dispose: Flutter вызывает его, когда State уничтожается.

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

Задание

Средне

Добавь final TextEditingController _controller в State и передай его полю с помощью controller:.
Сделай так, чтобы _add отображал текст поля как Last added: Buy milk, а затем очищал поле.
Добавь метод dispose из теории.

Попробуйте сами

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(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _last = 'nothing';

  void _add() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tasks')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'New task',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 12),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            const SizedBox(height: 24),
            Text('Last added: $_last', style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}