在TextField中动态出现的suffixIcon

我的目的是使用TextField构建一个搜索框,该搜索框在字段末尾具有一个图标按钮,以清除文本字段中的内容。目前我正在使用,

TextField(
   controller: _searchFieldController,
   decoration: InputDecoration(
     filled: true,
     fillColor: Colors.white,
     prefixIcon: Icon(Icons.search),
     border: OutlineInputBorder(
     borderRadius: BorderRadius.circular(10.0)),
     hintText: 'Search here...',
     hintStyle: Theme.of(context).textTheme.caption,
     suffixIcon: _searchFieldController.text.length > 0 ? IconButton(
       onPressed: () {
          _searchFieldController.clear();
       },
       icon: Icon(Icons.cancel, color: Colors.grey)
     ) : null,
  ),
),

与以下文本编辑控制器。

final _searchFieldController = TextEditingController();

_searchFieldController.addListener(() {
    print(_searchFieldController.text.length);
});

但是sufixIcon永远不会出现。谁能说出正确的方法?