CODEWITHSUNDEEP
flutterdart
user13034054
user13034054

Reputation: 151

Flutter how to create textfield with two icons on right, same as in image?

How to create TextField widget same as image, on x I need to clear input, on search icon I need to call some method that is not important here. enter image description here

This is code for now without x icon.

TextField(
              onChanged: (value) {
                userTappedSearch(value);
              },
              decoration: InputDecoration(
                  hintText: "search",
                  suffixIcon: 
                    Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 0.0, vertical: 20),
                        decoration: new BoxDecoration(
                            color: SBColor.navyBlue,
                            borderRadius: new BorderRadius.only(
                              topRight: const Radius.circular(20.0),
                            )),
                        child: IconButton(
                            icon: Icon(Icons.search),
                            color: SBColor.white,
                            onPressed: () {})),
                  border: OutlineInputBorder(
                      borderRadius: new BorderRadius.only(
                    topRight: const Radius.circular(20.0),
                  ))),
            ),

Upvotes: 1

Views: 6601

Answers (3)

awaik
awaik

Reputation: 12345

I prefer to use the build-in properties of the TextField. You easily can use as many icons as you want.

For example:

prefixIcon: IconButton(
  onPressed: () {
    print('search button pressed');
  },
  icon: Icon(Icons.search),
),
suffixIcon: Container(
  width: 100,
  child: Row(
    children: [
      IconButton(
        onPressed: () {
          print('add button pressed');
        },
        icon: Icon(Icons.add),
      ),
      IconButton(
        onPressed: () {
          print('mic button pressed');
        },
        icon: Icon(Icons.mic),
      ),
    ],
  ),
),

As a result, you get TextField (or TextFormField) like this

enter image description here

Upvotes: 5

Try
Try

Reputation: 3469

Use a TextField and a Container inside a Row to achieve that:

TextEditingController _textController = TextEditingController();

final border = OutlineInputBorder(
  borderRadius: BorderRadius.horizontal(left: Radius.circular(5))
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                controller: _textController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10),
                  hintText: 'Search',
                  border: border,
                  errorBorder: border,
                  disabledBorder: border,
                  focusedBorder: border,
                  focusedErrorBorder: border,
                  suffixIcon: IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () {
                      _textController.clear();
                    },
                  ),
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.blue[800],
                borderRadius: BorderRadius.only(topRight: Radius.circular(10))
              ),
              child: IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: (){}),
            )
          ],
        ),
      ),
    ),
  );
}

Result:

Search Widget

Upvotes: 6

barbecu
barbecu

Reputation: 742

Wrap the Icon Button In a Row() and then just have two Icon Buttons as children, You can customize the background color of each Icon to create the search bar in the image (Transparent on the X)

Upvotes: 0

Related Questions