Flutter Numerical TextField with Icons

user_1861864 0
Viewed 126

This is the end result:

enter image description here

This is my code:

SizedBox(width: 150, child: TextField(
  keyboardType: TextInputType.number,
  textAlign: TextAlign.center,
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    border: new OutlineInputBorder(
      borderRadius: const BorderRadius.all(
        const Radius.circular(10.0),
      ),
    ),
    prefixIcon: IconButton(icon: Icon(MdiIcons.minus), onPressed: () async {

    }),
    suffixIcon: IconButton(icon: Icon(MdiIcons.plus), onPressed: () async {

    })
  )
));

My problem is that, even when my width is set to 150, I can only enter 3 digits. Any number beyond the 123 shown on screen is not visible.

And it is not center.

flutter-layout flutter
1 Answers

you can wrap your textfield with a IntrinsicWidth

It's a widget that sizes its child to the child's maximum intrinsic width.

 IntrinsicWidth(
                child: TextField(

But the code above makes it small when it is empty, so you should wrap those with ConstrainedBox

ConstrainedBox(
              constraints: BoxConstraints(minWidth: 120),//here is the initial or default width
              child: IntrinsicWidth(
                child: TextField(

And as you mentioned, remember to add contentPadding: EdgeInsets.zero, to InputDecoration to make the text align to center if you don't text will move to right by default

i think it's done

result:

here is the whole code

    ConstrainedBox(
      constraints: BoxConstraints(minWidth: 120),
      child: IntrinsicWidth(
        child: TextField(
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            textAlignVertical: TextAlignVertical.center,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                prefixIcon: IconButton(
                    icon: Icon(Icons.remove), onPressed: () async {}),
                suffixIcon: IconButton(
                    icon: Icon(Icons.add), onPressed: () async {}))),
      ),
    ),
user_142711100
Related