Flutter 增加TextFormField的高度

Question

I am creating a Flutter app. i made the design like this.

My TextFormField form field for email and password heights are small. I want it to be the same size of the button.

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: 'sathyabaman@gmail.com', 
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email', 
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(32.0)
      ),
    ),
  );

Whats the syntax for the height in text form field.

Answer 1

Just adjust the contentPadding in InputDecoration.

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: 'sathyabaman@gmail.com',
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email',
      contentPadding: new EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
    ),
  );

Answer 2

You can change the height by changing the minLines value just try this

               TextFormField(
                           keyboardType: TextInputType.multiline,
                           controller: _opTextController,
                           decoration: InputDecoration(
                               isDense: true,
                             border: OutlineInputBorder(
                               borderSide: BorderSide(color: Colors.black)
                             )

                           ),
                           maxLines: 5,
                           minLines: 3,
                           // controller: cpfcontroller,
                         )

Answer 3

Use these two lines to control TextFormField Height inside InputDecoration .

isDense: true, 
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),

Full example

Material(
                elevation: 4,
                shadowColor: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: TextFormField(
                    controller: searchProvider.searchController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                        hintText: 'hintText',
                        isDense: true, // important line
                        contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
                        hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
                        fillColor:  Colors.white30 ,
                        filled: true,
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
                  ),
                ),
              ),

Answer 4

You can user this code to customized your TextFormField

new SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: const Text('Hello World!')),
)

Answer 5

just add a Container. Adjust the height of the Container as per Your requirement and make textformfield the child of the container.

Answer 6

Set the expands attribute on TextFormField to be true then put TextFormField into a SizedBox with a height

SizedBox(
   height: 40.0,
   child: TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    expands: true //Setting this attribute to true does the trick
    initialValue: 'sathyabaman@gmail.com', 
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email', 
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(32.0)
      ),
    ),
  ),
)

Answer 7

There's another alternative to adding extra, permanent padding to cover the errorText — which would probably mess up many designer's original project.

You could create a modified version of the source's TextFormField .

To achieve just that, you can:

1. Copy-paste all of the content in the source's TextFormField .
2. Rename your custom TextFormField just so you avoid naming conflicts with the original.
   • You should probably also rename the internal state class.
   • In VS Code, you can use Ctrl + H to replace TextFormField for, say, TextFormFieldWithErrorTextOption .
3. Add another parameter to the TextFormField 's constructor (below this line ), say, errorTextPresent :

    // `true` is the current implicit default, ie, showing the `errorText` bool errorTextPresent = true

4. Change the decoration's initialization for the internal TextField :
   1. From:

       decoration: effectiveDecoration.copyWith(field.errorText)

   2. To:

       decoration: effectiveDecoration.copyWith( errorText: errorTextPresent ? field.errorText : null)

5. Then, you can use your new TextFormField similarly to how you use any TextFormField :

    TextFormFieldWithErrorTextOption( errorTextPresent: false, // `false` will disable the `errorText` ... ),

Answer 8

Screenshot:

---

Code:

You need to use a SizedBox and TextField.maxLines property.

@override
Widget build(BuildContext context) {
  final height = 100.0;
  return Scaffold(
    body: SizedBox( // <--- SizedBox
      height: height,
      child: TextField(
        cursorColor: Colors.red,
        maxLines: height ~/ 20,  // <--- maxLines
        decoration: InputDecoration(
          filled: true,
          hintText: 'Hint text',
          fillColor: Colors.grey,
        ),
      ),
    ),
  );
}

Answer 9

 Expanded(
                          child: TextFormField(
                            controller: emailAddressController,
                            obscureText: false,
                            decoration: InputDecoration(
                              labelText: 'Email Address',
                              labelStyle: TextStyle(
                                fontFamily: 'Lexend Deca',
                                color: Color(0xFF95A1AC),
                                fontSize: 14,
                                fontWeight: FontWeight.normal,
                              ),
                              hintText: ' Enter your email here ...',
                              hintStyle: TextStyle(
                                fontFamily: 'Lexend Deca ',
                                color: Color(0xFF95A1AC),
                                fontSize: 14,
                                fontWeight: FontWeight.normal,
                              ),
                              enabledBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: Color(0xFFDBE2E7),
                                  width: 2,
                                ),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: Color(0xFFDBE2E7),
                                  width: 2,
                                ),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              filled: true,
                              fillColor: Colors.white,
                              contentPadding:
                                  EdgeInsetsDirectional.fromSTEB(
                                      10, 10, 0, 10),
                            ),
                            style: TextStyle(
                              fontFamily: ' Lexend Deca',
                              color: Color(0xFF2B343A),
                              fontSize: 14,
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        )

Answer 10

If anyone's searching for a different solution to change its height, besides changing the Theme. You can use the decoration's constraints parameter:

decoration: const InputDecoration(
            constraints: BoxConstraints(maxHeight: 50, minHeight: 50),
            labelText: "Your Label")

Answer 11

Use a TextField or a TextFormField, add this parameters, maxLines . See code below:

final inputBorder =
        OutlineInputBorder(borderSide: Divider.createBorderSide(context));

    TextFormField(
                controller: _myController,
                keyboardType: TextInputType.text,
                
                decoration: InputDecoration(
                  constraints: const BoxConstraints.expand(
                  height: 300, width: 400
                ),
                  hintText: 'What is Your Question?',
                  border: inputBorder,
                  focusedBorder: inputBorder,
                  enabledBorder: inputBorder,
                  filled: true,
                  contentPadding: const EdgeInsets.all(8),
                ),
                maxLength: 250,
                maxLines: 50,
    
              ),