Problems with Suffix Icon of TextFormField

user_3984221 0
Viewed 9800

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:

enter image description here

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

enter image description here

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:

enter image description here

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?

flutter
2 Answers

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

enter image description here

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