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.
Outline
- Introduction: Flutter Textfield Expand Height
- Constructors of Flutter Textfield
- Example 1: Full Screen Height
- Example 2: Custom Height
- Example 3: Text Align Vertical
- Flutter Textfield Expand Height Source Code
- Conclusion
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
- 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()), ), )
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.
You might also like:
Design Beautiful Flutter Login And Registration Template [Free Source Code]
Beautiful Flutter Login And Registration UI Design [Free Source Code]
Design Beautiful Flutter Signup Page UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Source Code
Signup Flutter Form UI Design-Beautiful Flutter UI Template
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
