Hello friends, In today’s tutorial we would learn about a simple but useful thing in flutter. We have used many times the TextField widget in flutter to get input from user. Now the TextField widget itself does not support width and height. To set width and height of TextField widget we have to use SizedBox widget as its parent widget. Now we would wrap the TextField into SizedBox as its child. Then we would apply both width and height on the SizedBox and it will automatically applied on TextField widget. So in this tutorial we would learn about Example of Set Change TextField Width Height in Flutter.
Contents in this project Example of Set Change TextField Width Height in Flutter :-
1. Open your project’s main.dart file and import Material package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main class MyApp extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Now inside the Widget Build area we would make our SizedBox widget and put TextField as its child. Here we would apply the width and height on SizedBox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
SizedBox( width: 350, height: 45, child: TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white70, contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), borderSide: BorderSide(color: Colors.red, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), borderSide: BorderSide(color: Colors.green), ), ))) |
5. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: SafeArea( top: true, child: Center( child: SizedBox( width: 350, height: 45, child: TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white70, contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), borderSide: BorderSide(color: Colors.red, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), borderSide: BorderSide(color: Colors.green), ), ))), )))); } } |
Screenshot :-
