CODEWITHSUNDEEP
flutterdart
4lll0w_3v1l
4lll0w_3v1l

Reputation: 29

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

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.

Upvotes: 0

Views: 62

Answers (2)

Nirjan Munshi
Nirjan Munshi

Reputation: 366

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

Upvotes: 0

Delwinn
Delwinn

Reputation: 1019

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

Upvotes: 1

Related Questions