如何在textformField颤动中将文本与prefixIcon对齐

Question

我在textFormField 中添加prefixIcon，但它没有对齐。我也使用了contextPadding 并将Icon 与padding 包装在一起，但它不起作用。我还看到prefixIcon 像堆栈一样工作，如图所示。我已经使用了下面提到的所有可能的方法：

通过填充包装

prefixIcon: Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Icon(FontAwesomeIcons.user),
    ),
    prefixIconConstraints: BoxConstraints(
        maxHeight: 08, maxWidth: 08, minHeight: 0, minWidth: 0),

按内容填充

contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),

Answer 1

执行flutter clean 并重新启动应用程序，您可以查看这些示例。

测试代码

Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                decoration: InputDecoration(
                  hintText: "normal",
                  prefixIcon: Icon(Icons.ac_unit),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  textAlign: TextAlign.left,
                  decoration: InputDecoration(
                    hintText: "textFormField wrapped with padding",
                    alignLabelWithHint: true,
                    prefixIcon: Icon(Icons.usb_rounded),
                  ),
                ),
              ),
              TextFormField(
                decoration: InputDecoration(
                  hintText: "contentPadding, horizontal: 10, vertical: 10 ",

                  /// Use  same pading
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  prefixIcon: Icon(Icons.safety_divider),
                ),
              ),
              TextFormField(
                decoration: InputDecoration(
                  hintText: "contentPadding, horizontal: 21, vertical: 40 ",

                  /// Use  same pading
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 21, vertical: 40),
                  prefixIcon: Icon(
                    Icons.safety_divider,
                  ),
                ),
              ),
              TextFormField(
                decoration: InputDecoration(
                  hintText: "contentPadding,only(left: 10) ",

                  /// Use  same pading
                  contentPadding: EdgeInsets.only(left: 10),
                  prefixIcon: Icon(
                    Icons.safety_divider,
                  ),
                ),
              ),
              TextFormField(
                textAlignVertical: TextAlignVertical.center,
                decoration: InputDecoration(
                  hintText:
                      "contentPadding,.only(left: 10, top: 10, bottom: 10),",

                  /// Use  same pading
                  contentPadding:
                      EdgeInsets.only(left: 10, top: 10, bottom: 10),
                  prefixIcon: Icon(
                    Icons.safety_divider,
                  ),
                ),
              ),
            ],
          ),
        ),

Answer 2

首先运行命令flutter clean 然后flutter pub get 然后尝试下面的代码希望它对你有所帮助。

声明你的控制器：

  TextEditingController emailscon = TextEditingController();
  TextEditingController contact = TextEditingController();
  TextEditingController password = TextEditingController();
  TextEditingController conpassword = TextEditingController();

您在下方的小部件

 SingleChildScrollView(
          physics: ScrollPhysics(),
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextFormField(
                controller: emailscon,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  labelText: 'Name',
                  hintText: 'Enter Name Here',
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                controller: contact,
                obscureText: obsecureText,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: 'Password',
                  hintText: 'Enter Password Here',
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                controller: password,
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.email),
                  labelText: 'Email',
                  hintText: 'Enter Email Here',
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                controller: conpassword,
                keyboardType: TextInputType.phone,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone),
                  labelText: 'Contact',
                  hintText: 'Enter Contact Here',
                ),
              ),
              SizedBox(
                height: 20,
              ),
            ],
          ),
        ),

你的屏幕看起来像->