How to remove padding of suffixIcon in textfield flutter

user_7741106 0
Viewed 1560

I have a function to create a textField

  Widget _createNormalTextField(
  String hintTxt,
  TextEditingController controller,
  TextInputType inputType,
  String Function(String) validation,
  Function(String) onTextChanged,
  int length,
  Widget suffixIcon) {
return Container(
  margin: EdgeInsets.symmetric(vertical: 8),
  child: new TextFormField(
      controller: controller,
      maxLength: length,
      keyboardType: inputType,
      validator: validation,
      onChanged: onTextChanged,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.only(bottom: -10.0),
        suffixIcon: suffixIcon,
        hintText: hintTxt,
      )),
);
}

and i am creating few textfields like this:

Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(flex: 2, child: Text("Discount")),
          SizedBox(
            width: 4,
          ),
          Expanded(
            flex: 1,
            child: _createNormalTextField(
                "", _discountPercentController, TextInputType.number, null,
                (txt) {
              setState(() {
                calculateAmount(txt);
              });
            }, 2, Text("%")),
          ),
          SizedBox(
            width: 4,
          ),
          Expanded(
            flex: 2,
            child: _createNormalTextField(
                "Amount",
                _discountAmountController,
                TextInputType.number,
                null,
                (txt) {},
                5,
                null),
          ),
        ],
      ),
    ],
  );

i used '%' Text as suffix icon. but it creates '%' at middle and takes padding which i dont want. i have attached image of what i got and what i want :

i got:

enter image description here

i wanted suffix icon at the bottom right , like::

enter image description here

so does anyone knows workaround for this??

dart flutter android user-interface
1 Answers

You can copy paste run full code below
You can use suffixIcon with suffixIconConstraints
code snippet

    decoration: InputDecoration(
            contentPadding: EdgeInsets.only(bottom: -10.0),
            suffixIcon: suffixIcon,
            suffixIconConstraints: BoxConstraints(maxHeight: 14),
            hintText: hintTxt,
          )),

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,
      ),
      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> {
  TextEditingController _discountPercentController = TextEditingController();
  TextEditingController _discountAmountController = TextEditingController();

  Widget _createNormalTextField(
      String hintTxt,
      TextEditingController controller,
      TextInputType inputType,
      String Function(String) validation,
      Function(String) onTextChanged,
      int length,
      Widget suffixIcon) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8),
      child: TextFormField(
          controller: controller,
          maxLength: length,
          keyboardType: inputType,
          validator: validation,
          onChanged: onTextChanged,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.only(bottom: -10.0),
            suffixIcon: suffixIcon,
            suffixIconConstraints: BoxConstraints(maxHeight: 14),
            hintText: hintTxt,
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(flex: 2, child: Text("Discount")),
                SizedBox(
                  width: 4,
                ),
                Expanded(
                  flex: 1,
                  child: _createNormalTextField("", _discountPercentController,
                      TextInputType.number, null, (txt) {
                    setState(() {
                      //calculateAmount(txt);
                    });
                  }, 2, Text("%")),
                ),
                SizedBox(
                  width: 4,
                ),
                Expanded(
                  flex: 2,
                  child: _createNormalTextField(
                      "Amount",
                      _discountAmountController,
                      TextInputType.number,
                      null,
                      (txt) {},
                      5,
                      null),
                ),
              ],
            ),
          ],
        )));
  }
}
user_21795710
Related