flutter 验证程序消息移动TextFormField的占位符

f1tvaqid  于 2023-01-27  发布在  Flutter
关注(0)|答案(1)|浏览(189)

我正在使用flutter创建一个登录页面,如果没有验证器错误,我的输入字段如下所示:InputImage
但是如果验证器返回一条消息,该消息将像这样移动我的输入字段的图标和占位符:
InputImage2
我该怎么修呢?
输入小部件的代码如下所示:

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

yebdmbv41#

我为您定制了代码:

你不需要为你的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),
  ),
);
  }
   }

相关问题