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

how to set height of TextField and make border around it? – Flutter

I want to set TextField‘s height to exactly 200px, so the border would outline it. Only way I found is by setting padding, but it’s not what i’m trying to find. I was hoping for some solution with SizedBox, like buttons have, but couldn’t find it either.

Tags:

2

Answers


  1. 0

    This is my way of doing the thing you mentioned.

    Container(
  height: 200,
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.grey[200]),
  child: TextField(
    cursorColor: color_red,
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
      prefixText: '+91 ',
      suffixIcon: phoneValid
      ? const Icon(
        Icons.check_circle_outline_rounded, color: Colors.green)
      : Icon(Icons.error_outline, color: color_red),
      labelText: 'Phone',
      border: InputBorder.none),
    autocorrect: false,
    style: body.copyWith(fontSize: 20),
    controller: widget.phoneController,
   ),
),
    Login or Signup to reply.
  2. 0

    You can follow this approach. You can add decoration into TextFormField or TextInputField.

    Container(
  padding: const EdgeInsets.all(16.0),
  height: 80.0,
  color: Colors.yellow,
  child: TextFormField(
    controller: inputController,
    decoration:  InputDecoration(
      labelText: 'Input anything',
      contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,),
      enabledBorder:  OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
    ),
    validator: (value) {
      return "";
    },
  ),
),

    Output:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search