7

enter image description here

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;
CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
user10971950
  • 301
  • 2
  • 8

2 Answers2

6

Output: (All have exact same height)

enter image description here

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
  • 6
    This seems like an awful practice - first rendering and showing some UI and then changing how it looks immediately afterwards. – creativecreatorormaybenot Aug 26 '19 at 11:34
  • @creativecreatorormaybenot What OP asked can be done this way, other than this, you can also give fixed height to all of them but that would not be a good solution for this problem, and I'm sure in your opinion there is no benefit of using `addPostFrameCallback`, `LayoutBuilder`, `IntrinsicHeight` etc types of widget. – CopsOnRoad Aug 26 '19 at 11:47
  • You should really get the heights and adjust them during layout. – creativecreatorormaybenot Aug 26 '19 at 12:07
  • Slower rendering times would cause jankiness. I see that you like hackish solutions and that is fine. – creativecreatorormaybenot Aug 26 '19 at 12:49
3

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.

Mohit Shetty
  • 1,551
  • 8
  • 26
  • 1
    The OP is actually not looking for a workaround, limiting the width to `400` and `TextField` to a height of `70` is a not a clean approach, you are just hard coding everything here. – CopsOnRoad Aug 31 '19 at 07:08
  • My main focus was to solve the question : All should have exact same height. I have updated my answer. – Mohit Shetty Aug 31 '19 at 07:14
  • Do you think OP didn't know about providing same height to all widgets? Come on, this isn't a regular question, it has bounty. – CopsOnRoad Aug 31 '19 at 07:17
  • I don't think this question should have had a bounty in the first place. Just wanted to help the OP. That's all. – Mohit Shetty Aug 31 '19 at 07:32
  • @CopsOnRoad I think the OP is new to Flutter and needs an solution which is simpler to understand. I got a lot to learn from your answer and hence have upvoted it :) – Mohit Shetty Aug 31 '19 at 07:38
  • Thanks for your upvote but if you see, the bounty is not awarded by OP, it is by 2nd person, which I am sure is not new to Flutter. – CopsOnRoad Aug 31 '19 at 07:55
  • I had 7 minutes left to select a winner so I chose this winner. Thank you @MohitShetty for your contribution. Even though the height and width are hardcoded, that can be changed to MediaQuery look ups to get the desired value. It's up to the OP to select which answer s/he feels is best. – StackOverflowed Sep 01 '19 at 12:05