flutter实现搜索输入框【仅静态】

需求：
输入想要搜索的模板关键词，下方展示对应的模板
点击删除按钮，清除搜索内容

当输入框里面有值的时候，实时展示输入框右边的清除图标。

import 'package:flutter/material.dart';

// 模版页面的搜索框
class SearchInput extends StatefulWidget {
  const SearchInput({super.key});

  @override
  State<SearchInput> createState() => _SearchInputState();
}

class _SearchInputState extends State<SearchInput> {

  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      height: 66.0,
      child: TextField(
        controller: _textEditingController,
        // 实时知道输入框里面值的变化
        onChanged: (value){
          setState(() {

          });
        },
        style: TextStyle(color: Color(0xffaaaaaa)),
        decoration: InputDecoration(
          filled: true,
          fillColor: Color(0xff333333),
          prefixIcon: Icon(Icons.search,color: Color(0xffaaaaaa),),
          hintText: "搜索你想要的模板",
          hintStyle: const TextStyle(color: Color(0xffaaaaaa)),
          contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
          border: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(33)
            )
          ),
          suffixIcon: _textEditingController.text.isNotEmpty
            ? IconButton(
            icon: Icon(Icons.clear,color: Color(0xffaaaaaa),),
            onPressed: (){
              setState(() {
                _textEditingController.clear();
              });
            },
          ) : null
        ),
      ),
    );
  }
}