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,
            ),
          ),
        ),
],
);

CodePudding user response：

Replace your Container with this Container.

Container(
      height: 40.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,
        maxLines: 1,
        decoration: InputDecoration(
          contentPadding:
              EdgeInsets.only(left: 15, bottom: 0, top: 0, right: 15),
          labelText: "Email atau nama pengguna",
          labelStyle: TextStyle(
            fontSize: 12,
          ),
          floatingLabelBehavior: FloatingLabelBehavior.never,
          hintText: "[email protected] atau example12",
          hintStyle: TextStyle(
            fontSize: 12,
            color: Colors.grey,
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green),
            borderRadius: BorderRadius.circular(5),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green),
            borderRadius: BorderRadius.circular(5),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green, width: 1.8),
            borderRadius: BorderRadius.circular(5),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green, width: 1.8),
            borderRadius: BorderRadius.circular(5),
          ),
        ),
      ),
    ),

CodePudding user response：

Comment the contentPadding line.

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

CodePudding user response：

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(),
          ),
        ),
      ),
    ],
  );