Flutter TextField with IconButton

Question

I have two problems with this widget. When adding the suffix: IconButton... it adds what looks like a padding inside the textfield. And how can I show the suffix icon when _searchController.text is not empty. I tried _searchController.text != null ? IconButton(...): 'not sure what to return here'

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffix: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () => _searchController.clear(),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

With suffix:

Withoug suffix:

Answer 1

I ended up using ideas from both answers. One didn't explain how to show and hide the icon while the other seemed a bit too complicated. All I did is _searchController.text.isEmpty

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffixIcon: _searchController.text.isEmpty
            ? null
            : InkWell(
                onTap: () => _searchController.clear(),
                child: Icon(Icons.clear),
              ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }