'custom textfield flutter implementations

How do I make the input text not go through the border on the container, when I want to enter the input hint text, it exceeds the border of the container my code like this

Column(
      children: [
        Container(
          height: 35.0,
          margin: const EdgeInsets.symmetric(horizontal: 16.0),
          decoration: BoxDecoration(
            color: Colors.white30,
            borderRadius: BorderRadius.circular(4),
            border: Border.all(color: Colors.green, width: 1),
          ),
          child: TextFormField(
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.only(left: 10.0),
              labelText: "Email atau nama pengguna",
              labelStyle: TextStyle(
                fontSize: 12,
              ),
              floatingLabelBehavior: FloatingLabelBehavior.never,
              hintText: "[email protected] atau example12",
              hintStyle: TextStyle(
                fontSize: 12,
                color: Colors.grey,
              ),
              enabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
            ),
          ),
        ),
],
);

Solution 1:^[1]

Comment the contentPadding line.

// contentPadding: EdgeInsets.only(left: 10.0),

Solution 2:^[2]

I think you are trying to give the border of TextField using Container Border. Try removing the container and use border parameter of InputDecoration.

Your code can be like bellow

Column(
    children: [
      Container(
        margin: const EdgeInsets.symmetric(horizontal: 16.0),
        child: TextFormField(
          textInputAction: TextInputAction.next,
          keyboardType: TextInputType.emailAddress,
          decoration: const InputDecoration(
            contentPadding: EdgeInsets.only(left: 10.0),
            labelText: "Email atau nama pengguna",
            labelStyle: TextStyle(
              fontSize: 12,
            ),
            floatingLabelBehavior: FloatingLabelBehavior.never,
            hintText: "[email protected] atau example12",
            hintStyle: TextStyle(
              fontSize: 12,
              color: Colors.grey,
            ),
            border: const OutlineInputBorder(),
          ),
        ),
      ),
    ],
  );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DholaHardik
Solution 2	RUSHIKESH NARWADE

'custom textfield flutter implementations

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]