CODEWITHSUNDEEP
fluttervalidationflutter-textformfield
TimeToCode
TimeToCode

Reputation: 1848

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

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

enter image description here

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

enter image description here

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.

Upvotes: 6

Views: 11698

Answers (3)

Burak Soyman
Burak Soyman

Reputation: 1

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

Upvotes: 0

BosS
BosS

Reputation: 500

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

Upvotes: 3

macosta
macosta

Reputation: 86

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

Upvotes: 0

Related Questions