How To Set Flutter Textfield Expand Height [Flutter Easy Guide]

In this tutorial, we’ll learn how to properly implement Flutter textfield expand height. We’ll be going through multiple practical examples for better understanding.

Introduction: Flutter Textfield Expand Height

As the name suggests, it specifies the process of expanding/ filling the height of Flutter textfield widget. We’ll be forcing the textfield to adapt the height of its parent. For instance, if the height of parent widget is 100 then child textfield will also adapt its height. It means the height of Flutter textfield will also be 100.

Let’s now understand it practically using multiple Flutter code examples.

Constructors of Flutter Textfield

We’ve to use two constructors of Flutter textfield widget to make the textfield adapt the height of its parent. These constructors are as follows:

expands
maxLines

Expands takes a Boolean value. By default, its false so we’ll set it to true. While maxLines constructor takes an integer value but we’ll pass it null.

  expands: true
  maxLines: null

Example 1: Full Screen Height

Padding(
          padding: EdgeInsets.all(20),
          child: TextField(
              expands: true,
              maxLines: null,
              decoration: InputDecoration(
                  hintText: 'Enter something...',
                  filled: true,
                  fillColor: Colors.blue.shade50,
                  enabledBorder: OutlineInputBorder(),
                  focusedBorder: OutlineInputBorder()),
            ),
          )

We haven’t specified any height of the parent widget. So the textfield will try to get the height from its parent tree.
There we’ve Flutter scaffold widget which has the height of phone screen. That means Flutter textfield will also inherit that height as no other widget is specified with height in that tree.
We also have used outline input border and have given some padding between the textfield and phone screen’s border with a background textfield color so its clearly visible.
We can see that the height of Flutter textfield is now set to phone screen’s height.

Example 2: Custom Height

SizedBox(
              height: 150,
              width: 300,
              child: TextField(
                expands: true,
                maxLines: null,
                decoration: InputDecoration(
                    hintText: 'Enter something...',
                    filled: true,
                    fillColor: Colors.blue.shade50,
                    enabledBorder: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder()),
              ),
            )

We’ve wrapped the textfield with Flutter sizedBox widget and have given it a custom height and width. We can see that Flutter textfield has adapted the height and width of parent sizedBox widget.

Example 3: Text Align Vertical

SizedBox(
              height: 200,
              width: 300,
              child: TextField(
                textAlignVertical: TextAlignVertical.top,
                expands: true,
                maxLines: null,
                decoration: InputDecoration(
                    hintText: 'Enter something...',
                    filled: true,
                    fillColor: Colors.blue.shade50,
                    enabledBorder: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder()),
              ),
            )

flutter textfield text align vertical top

We can see that the hint text is show in the center left position. If we want to show the hint text/input text in the top left position then we’ve to use the text align vertical constructor of Flutter textfield widget and pass it TextAlignVertical.top. Above image shows that position of text is now top left.

So this is how we can easily implement Flutter textfield expand height.

Do give it a try and ask if you still have any questions related to the implementation of Flutter textfield expand height. I’ll be very glad to answer all.

Below section features the complete source code of Flutter textfield expand height.

Flutter Textfield Expand Height Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: SizedBox(
              height: 200,
              width: 300,
              child: TextField(
                textAlignVertical: TextAlignVertical.top,
                expands: true,
                maxLines: null,
                decoration: InputDecoration(
                    hintText: 'Enter something...',
                    filled: true,
                    fillColor: Colors.blue.shade50,
                    enabledBorder: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder()),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly implement Flutter textfield expand height. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.