How can I set the height of my input field? - flutter

Question

I am trying to make some input field but I can't seem the get the height right. The height of the top one is good but the text is offsetted. I tried to change the height of the textstyle but it did not work. I tried to change the container height but it offsets the text. I tried to change the text height but it doesn't work. What can I do?
Container
(
width: 200,
height: 40,
child: TextFormField
(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
decoration: InputDecoration
(
hintText: 'Enter your name',
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
)
),
validator: (value) {
return value.isEmpty ? 'Please enter your name' : null;
},
),
),
SizedBox(height: 10,),
Container
(
width: 200,
child: TextFormField(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
decoration: InputDecoration(
hintText: 'Enter your phone number',
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
)
),
validator: (value) {
return value.isEmpty ? 'Please enter your phone number' : null;
},
),
),

Answer 1

The offset appear because you set the height of container smaller minimum height of TextField. You can fix it by increasing the height or reducing contentPadding. Like this
Container
(
alignment: Alignment.bottomRight,
width: 200,
height: 30,
child: TextFormField
(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration
(
contentPadding: EdgeInsets.all(5),
hintText: 'Enter your name',
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder
(
gapPadding: 0.0,
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder
(
gapPadding: 0.0,
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
)
),
validator: (value) {
return value.isEmpty ? 'Please enter your name' : null;
},
),
),
SizedBox(height: 10,),
Container
(
width: 200,
child: TextFormField(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
decoration: InputDecoration(
hintText: 'Enter your phone number',
contentPadding: EdgeInsets.all(5),
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder
(
borderSide: BorderSide
(
color: Theme.of(context).primaryColor,
width: 2.0,
),
)
),
validator: (value) {
return value.isEmpty ? 'Please enter your phone number' : null;
},
),
),

Answer 2

Please try this...
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Container(
margin: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: TextFormField(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
decoration: InputDecoration(
hintText: 'Enter your name',
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
width: 2.0,
),
)),
validator: (value) {
return value.isEmpty ? 'Please enter your name' : null;
},
),
),
SizedBox(
height: 10,
),
Container(
child: TextFormField(
keyboardType: TextInputType.phone,
style: Theme.of(context).textTheme.body1,
decoration: InputDecoration(
hintText: 'Enter your phone number',
hintStyle: Theme.of(context).textTheme.body1,
border: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
width: 2.0,
),
),
),
validator: (value) {
return value.isEmpty
? 'Please enter your phone number'
: null;
},
),
),
],
),
),
),
);

Answer 3

Bro wrap with SizeBox like this :😎
SizedBox(
height: 45,
child: TextField(
enabled: enabled,
textCapitalization: textCapitalization,
onEditingComplete: onEditingComplete,
obscureText: obscure,
controller: controller,
keyboardType: keyboardType,
style: AppTheme.normalTextStyle(),
decoration: InputDecoration(
contentPadding: textFieldPadding(),
prefixIcon: perfixIcon,
hintText: hint,
fillColor: Colors.white,
hintStyle: AppTheme.normalTextStyle(),
border: OutlineInputBorder(
borderSide: BorderSide(width: 0.0, color: HexColor("#F1F1F1")),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: HexColor("#F1F1F1")),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: HexColor("#F1F1F1")),
),
),
inputFormatters: [LengthLimitingTextInputFormatter(maxLength)],
onTap: onTap,
onSubmitted: onSubmit,
),
);