I have an issue where the Flutter TextField doesn't fill its set height. The blue Container shows the size that the TextField should be.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(



        body: Container(
          color: Colors.blue,
          height: 56,
          child: TextField(
            decoration: InputDecoration(
              // Sizes
              contentPadding: EdgeInsets.zero,
              constraints: const BoxConstraints(minHeight: 56),

              // Fill color
              fillColor: Colors.grey,
              filled: true,

              // Hint text
              hintText: "Password",

              // Borders
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Copying this code into dartpad.dev reveals the issue.

Edit

After removing the height of the container (// height: 56,) there is still a blue gap underneath the TextField. This means that the TextField is taking up the correct height but the InputDecoration is not.

CodePudding user response：

If you want the TextField widget to expand verticaly you need to set its expands property to true. Also the property maxLines need to be set to null to avoid failing the assertion. As the documentation says on the expands property: https://api.flutter.dev/flutter/material/TextField/expands.html

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
          color: Colors.blue,
          height:100,
          child: TextField(
            expands: true,
            maxLines: null,
            decoration: InputDecoration(
              // Sizes
              // Fill color
              fillColor: Colors.grey,
              filled: true,

              // Hint text
              hintText: "Password",

              // Icons
              prefixIcon: const Icon(Icons.key_rounded),
              prefixIconConstraints: const BoxConstraints(
                minWidth: 24   16 * 2,
              ),
              suffixIcon: const Icon(Icons.visibility),
              suffixIconConstraints: const BoxConstraints(
                minWidth: 24   16 * 2,
              ),

              // Borders
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide:
                    const BorderSide(width: 0, color: Colors.transparent),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: const BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Get rid of the contentPadding under the InputDecoration.

Voila!