Я делаю приложение, в котором я хочу, чтобы пользователи могли вводить вещи, используя TextFormField. Чтобы упростить хранение данных, я создал подкласс для класса TextFormField:

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

Я разместил их на экране:


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

Это выглядит примерно так:

enter image description here

Я хочу, чтобы крайнее левое (количество) поле было значительно меньше правого, поскольку оно должно содержать только целое число. Я пытался использовать гибкий виджет, но он ничего не делает, а иногда выдает много ошибок и вылетает из приложения. Кто-нибудь знает как это решить?

0
LegendWK 20 Апр 2020 в 17:11

2 ответа

Лучший ответ

Вы можете использовать flex, как я упоминаю ниже.

Expanded(
            flex: 4,
            child: MyTextFormField(
              maxLength: 20,
              labelText: "Ingredient",
            ),
          ),
          Text("QT"),
          Expanded(
            flex: 1,
            child: MyTextFormField(
              maxLength: 6,
              labelText: "amount",
            ),
          ),
1
Viren V Varasadiya 20 Апр 2020 в 14:29

Вы могли бы использовать 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,
        ),
      ),
    );
  }
}

Затем дайте TextFormField, что вы хотите больше больше отступа, чем тот, который вы хотите меньше.

1
wcyankees424 20 Апр 2020 в 15:09