How to make the suffixIcon of a TextField cover the entire suffixIcon area?

Question

I am trying to design a TextField with a button as a suffixIcon. The problem is that the button is not covering the entire suffixIcon area.

Consider the following example:

class ActionableTextField extends StatelessWidget {
  const ActionableTextField({
    super.key,
    required this.labelText,
    required this.controller,
    required this.prefixIcon,
    required this.suffixIcon,
    required this.onPressed,
  });

  final TextEditingController controller;
  final VoidCallback onPressed;
  final IconData prefixIcon;
  final IconData suffixIcon;
  final String labelText;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: labelText,
        border: const OutlineInputBorder(),
        prefixIcon: Icon(prefixIcon),
        suffixIcon: ElevatedButton(
          onPressed: onPressed,
          child: Icon(suffixIcon),
        ),
      ),
    );
  }
}

If you take an actual look at the rendering output of ActionableTextField, you will notice that the ElevatedButton will not completely cover the suffixIcon area. How can this be fixed?

The expected rendering output should look as follows:

enter image description here

The actual rendering output is looking as follows:

enter image description here

I think it would be helpful if you can upload an image of what you are trying to achieve. Also, you can specify `boxConstraints` using [suffixIconConstraints](https://api.flutter-io.cn/flutter/material/InputDecoration/suffixIconConstraints.html), id recommend to have a look at that — Nayef Radwi, Apr 05 '23 at 20:06
@NayefRadwi an image of the expected rendering output was added. — XUNIT, Apr 05 '23 at 20:27

score 1 · Accepted Answer · answered Apr 05 '23 at 21:14

So like, I mentioned in my comment a you could utilize suffixIconConstraints to expand the icon by using a BoxConstraint with a minimum height.

  suffixIconConstraints: const BoxConstraints(minHeight: 55),

class ActionableTextField extends StatelessWidget {
  const ActionableTextField({
    super.key,
    required this.labelText,
    required this.controller,
    required this.prefixIcon,
    required this.suffixIcon,
    required this.onPressed,
  });

  final TextEditingController controller;
  final VoidCallback onPressed;
  final IconData prefixIcon;
  final IconData suffixIcon;
  final String labelText;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: labelText,
        border: const OutlineInputBorder(),
        prefixIcon: Icon(prefixIcon),
        suffixIconConstraints: const BoxConstraints(minHeight: 55),
        suffixIcon: ElevatedButton(
          onPressed: onPressed,
          child: Icon(suffixIcon),
        ),
      ),
    );
  }
}

this will enforce the button to have a minHeight of 55 and achieves similar to the design you have posted.

Here are other useful questions that could help modify this further

How to make button width match parent?

How to set the width and height of a button in Flutter?

Flutter: How to make a button expand to the size of its parent?

How to make the suffixIcon of a TextField cover the entire suffixIcon area?

1 Answers1