如何使用TextEditingController创建带清除按钮的TextField？

import 'package:flutter/material.dart';

TextEditingController controller = TextEditingController();

TextField(
  controller: controller,
  decoration: InputDecoration(
    labelText: '输入文本',
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () {
        controller.clear();
      },
    ),
  ),
)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField示例'),
        ),
        body: Center(
          child: MyTextField(),
        ),
      ),
    );
  }
}

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: '输入文本',
        suffixIcon: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            controller.clear();
          },
        ),
      ),
    );
  }
}