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:
Where the result that I am achieving for:
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),
),),),
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),
),
),