focused border not taking the whole container flutter

March 25, 2023

Here as shown the focused border is not taking the whole space. Can anybody explain why and fix it.

enter image description here

Here is the code of the TextField :

child: Padding(
                    padding: const EdgeInsets.only(left: 20.0),
                    child: TextField(
                      controller: _emailController,
                      decoration: InputDecoration(
                        hintText: 'Enter your email',
                        border: InputBorder.none,
                        focusedBorder: OutlineInputBorder(
                          borderSide:
                              const BorderSide(color: Colors.deepPurple),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        fillColor: Colors.grey[200],
                        filled: true,
                      ),
                    ),
                  ),
                ),
              ),

I have tried adding the counterstyle but it is of no use !!

>Solution :

Looking at the image shared of the code… you Padding left is pushing the bordered textfield to the left which is causing the space of 20 to the left…

Remove the Padding widget it should allow the textfield to have the complete border and to give padding inside the Text field use

TextField(
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    hintText: 'Enter Something',
    contentPadding: EdgeInsets.all(20.0),
  ),
)

This would give padding around the text inside the textfield …

If you want to give padding to only the left side as you have now in your TextField you can use the below code…

TextField(
      textAlign: TextAlign.left,
      decoration: InputDecoration(
        hintText: 'Enter Something',
        contentPadding: EdgeInsets.only(left:20.0),
      ),
    )