Flutter: how to create a rounded textformfield and change its background color

Question

i created a rounded textformfield and validate it, textbox are look like this

here is the code for this textbox

firstly i create a container

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

and then return this container and creating a 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;
                    },
              
                ),
    );
  }

same i done for password textbox.

but when i click on login button, error message is displaying like this

i want to show it outside from this blue container.

i used fillcolor, but that is not working too.

please help if anyone know how to do this.

Try this answer https://stackoverflow.com/a/65107849/9414608 — Youssef Hegab, Jul 12 '21 at 19:11

score 3 · Answer 1 · answered Jul 12 '21 at 13:50

3

You can use each case separetely in decoration like this:

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

And for background color use fillColor inside decoration

answered Jul 12 '21 at 13:50

BosS

447
2
9

and where to use these errorborder, focusedBorder, enabledBorder? – TimeToCode Jul 12 '21 at 14:18
1

fillColor should be used with "filled : true" property – BosS Jul 13 '21 at 09:15
and borders should be inside InputDecoration widget – BosS Jul 13 '21 at 09:16

score 0 · Answer 2 · answered Jul 12 '21 at 13:12

use this code:

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

i used your code, its output is same as above! and i use textformfield instead textfield — TimeToCode, Jul 12 '21 at 14:14

Burak Soyman · Answer 3 · 2023-08-21T12:21:12.323

0

Use this code:

        TextFormField(
          keyboardType: TextInputType.multiline,
          minLines: 5,
          maxLines: 10,
          decoration: InputDecoration(
            filled: true,
            fillColor: ColorConstants.darkBlack5,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: BorderSide.none
            ),
            hintText: 'Comment...',
            hintStyle: TextStyle(
              color: ColorConstants.lightWhite.withOpacity(0.3),
            ),
          ),
        ),

edited Aug 21 '23 at 12:21

answered Aug 21 '23 at 12:21

Burak Soyman

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 23 '23 at 18:50

Flutter: how to create a rounded textformfield and change its background color

3 Answers3