I know that TextField
has TextStyle
, which has a height
property, which is just a multiplier based on fontSize
, but how can I make all the widgets the same height (irrespective of font size)?
Additionally, is there an equivalent method of the following (in pretty much any other programming language):
btnLogin.height = txtPassword.height;
Output: (All have exact same height)
I think the best way to do it is to first find out height of TextField
, and then use it for your RaisedButton
, here is the full example code demonstrating the same.
void main() => runApp(MaterialApp(home: HomePage()));
class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
double _height = 56; // dummy height
GlobalKey _globalKey = GlobalKey();
@override
void initState() {
super.initState();
SchedulerBinding.instance.addPostFrameCallback((_) {
setState(() {
// height of the TextFormField is calculated here, and we call setState to assign this value to Button
_height = _globalKey.currentContext.size.height;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(
key: _globalKey,
decoration: InputDecoration(hintText: "Email Adress"),
),
TextField(decoration: InputDecoration(hintText: "Password")),
SizedBox(height: 12),
SizedBox(
width: double.maxFinite,
height: _height, // this is the height of TextField
child: RaisedButton(
onPressed: () {},
child: Text("LOGIN TO MY ACCOUNT"),
),
),
],
),
),
);
}
}
To keep things simple you can use the below code:
Container(
height: 210 , // Your fixed height*3 here (70*3=210)
width : double.infinity,
padding: EdgeInsets.symmetric(horizontal: 8.0), //Add padding as per your convenience
child : Column(
children: <Widget>[
Expanded(TextField([...])),
Expanded(TextField([...])),
Expanded(RaisedButton([...])),
],
),
)
Feel free to insert a Divider Widget or SizedBox between the widgets to give an cleaner look as per your requirements.
Tip: Flutter has an slightly different approach compared to the way you have described your issue in the question, so I would recommend seeing more of Flutter's coding related videos/blogs before you move ahead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With