Как добавить кнопку "очистить" к виджету TextField в Flutter?

В Flutter вы можете легко добавить кнопку "очистить" к виджету TextField, используя свойство suffixIcon в InputDecoration. Вот как это сделать:

import 'package:flutter/material.dart';

class ClearableTextField extends StatefulWidget {
  @override
  _ClearableTextFieldState createState() => _ClearableTextFieldState();
}

class _ClearableTextFieldState extends State<ClearableTextField> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Поле с кнопкой очистки')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: _controller,
          decoration: InputDecoration(
            labelText: 'Введите текст',
            suffixIcon: _controller.text.isNotEmpty
                ? IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () {
                      _controller.clear();
                      setState(() {}); // Обновление иконки после очистки
                    },
                  )
                : null, // Кнопка очистки отсутствует, когда текстовое поле пустое
          ),
          onChanged: (text) {
            setState(() {}); // Обновление видимости кнопки очистки
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: ClearableTextField()));
}

Объяснение:

1. TextEditingController: Этот контроллер используется для управления текстом в TextField и позволяет очищать его.
2. suffixIcon: Здесь добавляется кнопка очистки. Когда в TextField есть текст, показывается IconButton с иконкой очистки. Если поле пустое, иконка скрыта.
3. setState(): Вызов setState используется для обновления интерфейса после изменения текста или его очистки.

Таким образом, при наличии текста в поле появится кнопка "очистить", которая позволит пользователю быстро очистить ввод.