时间戳

首页 > 解决方案 > Flutter：如何创建圆角文本表单并更改其背景颜色

flutter - Flutter：如何创建圆角文本表单并更改其背景颜色

问题描述

我创建了一个圆形文本表单并验证它，文本框看起来像这样

在此处输入图像描述

这是此文本框的代码

首先我创建一个容器

import 'package:flutter/material.dart';

class TextFieldContainer extends StatelessWidget {
  final Widget child;
  const TextFieldContainer({
    Key key,
    this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      width: size.width * 0.8,
      decoration: BoxDecoration(
        color: Colors.blue[50],
        borderRadius: BorderRadius.circular(29),
      ),
      child: child,
    );
  }
}

然后返回这个容器并创建一个 textformfield

 emailtext(){
    return TextFieldContainer(
      child: TextFormField(
              
                controller: TextEditingController(text: user.username),
                autofillHints: [AutofillHints.email],
                onEditingComplete: ()=>TextInput.finishAutofillContext(),
                decoration: InputDecoration(   
                border: InputBorder.none, 
                icon: Icon(Icons.email,color: Colors.blue,),                         
                labelText: 'Username'),
                 
                onChanged: (value){
                  user.username=value;
                },
                validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter username';
                      }
                      return null;
                    },
              
                ),
    );
  }

我对密码文本框做了同样的事情。

但是当我点击登录按钮时，错误消息显示如下

在此处输入图像描述

我想从这个蓝色容器外面展示它。

我使用了填充颜色，但这也不起作用。

如果有人知道如何做到这一点，请提供帮助。

标签： fluttervalidationflutter-textformfield

解决方案

使用此代码：

Container(
                        alignment: Alignment.center,
                        padding: EdgeInsets.fromLTRB(30, 3, 20, 0),
                        margin: EdgeInsets.only(left: 10, right: 10),
                        height: 50,
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.black),
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(10)),
                        child: TextField(
                          keyboardType: TextInputType.emailAddress,
                          cursorColor: Colors.black,
                          controller: emailController,
                          textInputAction: TextInputAction.search,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            suffixIcon: IconButton(
                              onPressed: () {},
                              icon: Icon(Icons.email_outlined),
                              color: Colors.grey,
                            ),
                            hintText: 'Correo Electrónico',
                            hintStyle: TextStyle(color: Colors.black),
                          ),
                          style: TextStyle(color: Colors.black),
                        ),

推荐阅读