flutterdart

Flutter add padding to Textfield hinttext


How do i add a padding to the textfield hint text so it has a gap between the icon box?

Currently it is like this:

enter image description here

Where the result that I am achieving for: enter image description here

This is the code snippet:

Padding(
  padding: EdgeInsets.only(top: 56.0),
  child: TextField(
    decoration: InputDecoration(
    prefixIcon: Container(
       padding: EdgeInsets.all(10.0),
       decoration: BoxDecoration(
          color: Color(0xFFE7ECEF), 
          borderRadius: BorderRadius.only(
             topLeft: Radius.circular(5.0),
             topRight: Radius.zero,
             bottomLeft: Radius.circular(5.0),
             bottomRight: Radius.zero,
          ),
          border: Border.all(
             color: Color(0xFFCDCDCF),
             width: 2.0,
          )
       ),
       child: Icon(MdiIcons.account, color: Colors.black),
    ),
    hintText: 'Username',
    focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(5.0),
    borderSide: BorderSide(
       color: Color(0xFFCDCDCF),
       width: 2.0,
    ),
  ),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(5.0),
    borderSide: BorderSide(
       color: Color(0xFFCDCDCF), // Set your desired border color
       width: 2.0, // Set your desired border thickness
    ),
  ),
  contentPadding: EdgeInsets.all(10.0),
),),),

Solution

  • You just have to add margin in Container...

    Here is the Updated Code

    TextField(
        decoration: InputDecoration(
          prefixIcon: Container(
    /*---*/ margin: const EdgeInsets.only(right:15.0),
            padding: const EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              color: const Color(0xFFE7ECEF),
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(5.0),
                topRight: Radius.zero,
                bottomLeft: Radius.circular(5.0),
                bottomRight: Radius.zero,
              ),
              border: Border.all(
                color: const Color(0xFFCDCDCF),
                width: 2.0,
              ),
            ),
            child: const Icon(Icons.person, color: Colors.black),
          ),
          hintText: 'Username',
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5.0),
            borderSide: const BorderSide(
              color: Color(0xFFCDCDCF),
              width: 2.0,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5.0),
            borderSide: const BorderSide(
              color: Color(0xFFCDCDCF), // Set your desired border color
              width: 2.0, // Set your desired border thickness
            ),
          ),
          contentPadding: const EdgeInsets.all(10.0),
        ),
      ),
    

    Result

    enter image description here