Problems with Suffix Icon of TextFormField

Question

I have a TextFormField with a suffix icon, which is used as IconButton:

TextFormField(
  autocorrect: false,
  decoration: InputDecoration(
    prefixIcon: widget.icon,
    isDense: true,
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () {...}                 
    )
  ),     
  controller: _controller,
  maxLines: null,
)

My problem is, the suffix icon increased the height of the text field:

(furthermore there is too much space between the end of the text and the icon):

I tried different approaches to avoid this, but nearly everything failed. Finally I found a possible solution here: https://github.com/flutter/flutter/issues/21908#issuecomment-516434465

So, I tried to use an IntrinsicHeight widget as mentioned:

IntrinsicHeight(
  child: TextFormField(...)
)

Indeed, it normalized the height of my TextFormField, but now there is something with the wordwrap/line break:

As you can see, the multiline adjustment is not working properly anymore, it is nearly indetermined to when it will expand.

So: Do you have any idea how to solve my initial problem with the suffix icon and the resulting text field height? Or do you now how to fix the multiline issue when using the IntrisicHeight?

Answer 1

decoration: InputDecoration(
                                    errorBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                            color: Colors.red),
                                        borderRadius:
                                            const BorderRadius.all(
                                                Radius.circular(10))),
                                    labelText: "Current password",

//change IconButton to GestureDetector

                                    suffixIcon:     GestureDetector(
                                      onTap: () {
                                        controller.isObscureOld.value =
                                        !controller.isObscureOld.value;
                                      },
                                      child: Icon(
                                        !controller.isObscureOld.value
                                            ? Icons.visibility_outlined
                                            : Icons.visibility_off_outlined,
                                        size: 26,
                                        color: ColorConstants.grayLight,
                                      ),
                                    ),
                                  ),

Answer 2

You can copy paste run full code below
Step 1: You can use suffixIconConstraints to reduce padding https://github.com/flutter/flutter/pull/50058
Step 2: use InkWell wrap Icon and set Icon size

TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller1,
                maxLines: null,
              ),

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController myController1 = TextEditingController();
  TextEditingController _controller1 = TextEditingController();
  TextEditingController _controller2 = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller1,
                maxLines: null,
              ),
            ),
            Expanded(
              child: TextFormField(
                autocorrect: false,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.add),
                    prefixIconConstraints: BoxConstraints(
                      minWidth: 5,
                      minHeight: 5,
                    ),
                    isDense: true,
                    suffixIconConstraints: BoxConstraints(
                      minWidth: 2,
                      minHeight: 2,
                    ),
                    suffixIcon: InkWell(
                        child: Icon(Icons.clear, size: 14), onTap: () {})),
                controller: _controller2,
                maxLines: null,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}