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

问题

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;

回答1:

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

回答2:

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.

来源：https://stackoverflow.com/questions/57600637/in-flutter-how-to-make-buttons-and-textfields-of-same-height

标签

Flutter

dart

flutter-layout