Flutter：如何创建一个圆形的文本表单并更改其背景颜色

Question

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

这里是这个文本框的代码

首先我创建一个容器

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

然后返回这个容器并创建一个文本表单域

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

密码文本框也是如此。

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

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

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

如果有人知道怎么做，请帮忙。

Answer 1

使用此代码：

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

Answer 2

您可以像这样在装饰中单独使用每个案例：

        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
        borderRadius: BorderRadius.circular(25.0),
        ),
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 5.0),
            borderRadius: BorderRadius.circular(25.0),
        ),
        errorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 5.0),
            borderRadius: BorderRadius.circular(25.0),
        ),

对于背景颜色，在装饰中使用填充颜色