In this tutorial, we’ll learn how to properly implement Flutter textformfield expand height. We’ll be going through multiple practical examples for better understanding.
Outline
- Introduction: Flutter Textformfield Expand Height
- Constructors of Flutter Textformfield
- Example 1: Full Screen Height
- Example 2: Custom Height
- Example 3: Text Align Vertical
- Flutter Textformfield Expand Height Source Code
- Conclusion
Introduction: Flutter Textformfield Expand Height
As the name suggests, it specifies the process of expanding/ filling the height of Flutter textformfield widget. We’ll be forcing the textformfield to adapt the height of its parent. For instance, if the height of parent widget is 100 then child textformfield will also adapt its height. It means the height of Flutter textformfield will also be 100.
Let’s now understand it practically using multiple Flutter code examples.
Constructors of Flutter Textformfield
- 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: TextFormField( 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 textformfield 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 textformfield 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 textformfield and phone screen’s border with a background textformfield color so its clearly visible.
- We can see that the height of Flutter textformfield is now set to phone screen’s height.
Example 2: Custom Height
SizedBox( height: 150, width: 300, child: TextFormField( expands: true, maxLines: null, decoration: InputDecoration( hintText: 'Enter something...', filled: true, fillColor: Colors.blue.shade50, enabledBorder: OutlineInputBorder(), focusedBorder: OutlineInputBorder()), ), )
We’ve wrapped the textformfield with Flutter sizedBox widget and have given it a custom height and width. We can see that Flutter textformfield has adapted the height and width of parent sizedBox widget.
Example 3: Text Align Vertical
SizedBox( height: 200, width: 300, child: TextFormField( textAlignVertical: TextAlignVertical.top, expands: true, maxLines: null, decoration: InputDecoration( hintText: 'Enter something...', filled: true, fillColor: Colors.blue.shade50, enabledBorder: OutlineInputBorder(), focusedBorder: OutlineInputBorder()), ), )
So this is how we can easily implement Flutter textformfield expand height.
Do give it a try and ask if you still have any questions related to the implementation of Flutter textformfield expand height. I’ll be very glad to answer all.
Below section includes the complete source code of Flutter textformfield expand height.
Flutter Textformfield 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: TextFormField(
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 textformfield 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.
You might also like:
How To Set Flutter Textfield Expand Height [Flutter Easy Guide]
Design Beautiful Flutter Signup Page UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Template [Free Source Code]
Beautiful Flutter Login And Registration UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Source Code
How To Change Flutter OutlinedButton Elevation [Easy Flutter Guide]
Signup Flutter Form UI Design-Beautiful Flutter UI Template
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
