CODEWITHSUNDEEP
flutter
Ciprian
Ciprian

Reputation: 3226

Flutter TextField with IconButton

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:

enter image description here

Withoug suffix:

enter image description here

Upvotes: 2

Views: 14243

Answers (3)

ZeRj
ZeRj

Reputation: 1708

Use suffixIcon instead. To update the icon depending on the state you need to call setState somewhere.

Try this:

import 'package:flutter/material.dart';

class SearchWidget extends StatefulWidget {


  @override
  _SearchWidgetState createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  String _searchText = "";
  TextEditingController _searchController;
  @override
  Widget build(BuildContext context) {
      return TextField(
        controller: _searchController,
        decoration: InputDecoration(
          labelText: "Search",
          hintText: "Search",
          prefixIcon: Icon(Icons.search,color: Colors.white,),

          suffixIcon: _searchText.isNotEmpty ? IconButton(icon: Icon(Icons.clear),onPressed: () {
            setState(() {
              _searchController.clear();
            });},) : null,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
        ),
      );
    }

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController();
    _searchController.addListener(() {
      setState(() {
        _searchText = _searchController.text;
      });
    });
  }

  @override
  void dispose() {
      _searchController.dispose();
      super.dispose();
  }
}

Edit: don't forget to dispose

Upvotes: 7

Ciprian
Ciprian

Reputation: 3226

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),
          ),
        ),
      ),
    );
  }

Upvotes: 9

Sami Kanafani
Sami Kanafani

Reputation: 15751

try: 

Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search,color: Colors.white,),

        suffix: InkWell(

          child: Icon(Icons.clear),
          onPressed: () => _searchController.clear(),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

Upvotes: 1

Related Questions