Change size of TextFormField

Question

I'm making an app where I want users to be able to input things using TextFormFields. To make storing the data easier I've created a subclass to the TextFormField class:

  MyTextFormField({
    this.labelText,
    this.validator,
    this.onSaved,
    this.maxLines = 1,
    this.maxLength = 30,
});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TextFormField(
        maxLines: maxLines,
        maxLength: maxLength,
        validator: validator,
        onSaved: onSaved,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(25.0),
          ),
          labelText: labelText,
        ),
      ),
    );
  }
}

I've placed them on the screen:

Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
             children: <Widget> [
               MyTextFormField(
                 maxLength: 20,
                 labelText: "Ingredient",
               ),
               Text("QT"),
               MyTextFormField(
                 maxLength: 6,
                 labelText: "amount",
               ),
             ],
           ),
         ),

This looks something like this:

I want the leftmost (amount) field to be significantly smaller than the right one as it's only supposed to contain an integer. I've tried using the Flexible widget but that doesn't do anything, and sometimes gives me a lot of errors and crashes the app. Does anyone know how to solve this?

Answer 1

You could use contentPadding

MyTextFormField({
    this.labelText,
    this.validator,
    this.onSaved,
    this.maxLines = 1,
    this.maxLength = 30,
    this.contentPadding = 0.0
});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TextFormField(
        maxLines: maxLines,
        maxLength: maxLength,
        validator: validator,
        onSaved: onSaved,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            contentPadding: contentPadding,
            borderRadius: BorderRadius.circular(25.0),
          ),
          labelText: labelText,
        ),
      ),
    );
  }
}

Then give the TextFormField that you want larger more padding than than the one that you want smaller.

Answer 2

You can use flex as i mention below.

Expanded(
            flex: 4,
            child: MyTextFormField(
              maxLength: 20,
              labelText: "Ingredient",
            ),
          ),
          Text("QT"),
          Expanded(
            flex: 1,
            child: MyTextFormField(
              maxLength: 6,
              labelText: "amount",
            ),
          ),