Question 75442 in Flutter Question posted in
The official Flutter documentation can be found here.

focused border not taking the whole container flutter

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 !!

Tags:

3

Answers


  1. 0

    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),
      ),
    )
    Login or Signup to reply.
  2. 0

    Reason of Error:
    Padding
    You provided left padding to TextFormField due to which only its left side gets padding and other sides are occupied whole container.
    Solution:
    Remove padding from TextFormField

    Login or Signup to reply.
  3. 0

    you can either remove the Padding widget or set the left padding of the TextField to 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,
    contentPadding: EdgeInsets.only(left: 20.0), // or remove this line
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search