驗證器消息移動 TextFormField 的占位符

Question

我正在使用 flutter 創建登錄頁面。如果沒有驗證器錯誤，我的輸入字段如下所示： InputImage

但是，如果驗證器返回一條消息，該消息會像這樣移動我的輸入字段的圖標和占位符：

輸入圖像2

我該如何解決？

我的輸入小部件代碼如下：

class InputFieldWidget extends StatelessWidget {
  final TextEditingController cnt;
  final String placeholder;
  final Widget? icon;
  final GlobalKey formKey;

  const InputFieldWidget(
      {required this.cnt, required this.placeholder, required this.icon, required this.formKey} );

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Palette.lightGrey,
      ),
      height: 50,
      margin: EdgeInsets.all(10),
      child: Form(
        key: formKey,
        child: TextFormField(
          validator: (value){
            if(value == null || value.isEmpty) {
              return "      $placeholder is not valid!";
            }
          },
          cursorColor: Palette.lightPurple,
          controller: cnt,
          decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: const EdgeInsets.symmetric(vertical: 15),
              prefixIcon: icon,
              hintText: placeholder,
              focusColor: Palette.lightPurple),
        ),
      ),
    );
  }
}

Answer 1

我定制了你的代碼：

您不需要為您的 Ui 使用 Container。 TextFormField 給我們屬性來實現像你的 Ui:}

在示例代碼下方，它可以幫助您：

import 'package:flutter/material.dart';

class InputFieldWidget extends StatelessWidget {
final TextEditingController cnt;
final String placeholder;
final Widget? icon;
final GlobalKey? formKey;

 InputFieldWidget(
  {required this.cnt,
  required this.placeholder,
  required this.icon,
  this.formKey});

  @override
  Widget build(BuildContext context) {
  return Form(
  key: formKey,
  child: TextFormField(
    validator: (value) {
      if (value == null || value.isEmpty) {
        return "      $placeholder is not valid!";
      }
    },
    cursorColor: Colors.grey,
    controller: cnt,
    decoration: InputDecoration(
        border: InputBorder.none,
        fillColor: Palette.lightGrey, 
        filled: true,
        contentPadding: const EdgeInsets.symmetric(vertical: 15),
        prefixIcon: icon,
        hintText: placeholder,
        focusColor: Colors.grey),
  ),
);
  }
   }