Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Flutter, how to make Buttons and Textfields of same height?

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;
like image 438
user10971950 Avatar asked Aug 22 '19 00:08

user10971950


2 Answers

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
like image 116
CopsOnRoad Avatar answered Nov 15 '22 07:11

CopsOnRoad


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.

like image 22
Son of Stackoverflow Avatar answered Nov 15 '22 07:11

Son of Stackoverflow