将 TextField 和 FlatButton 对齐在一行中

Question

我下面的代码工作正常，并在 TextField 下显示 FlatButton：

import 'package:flutter/material.dart';

class LocationCapture extends StatelessWidget {
  LocationCapture(this.clickCallback, this.tc);
  final TextEditingController tc;
  final VoidCallback clickCallback;

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
      //    Row(
      //        children: <Widget>[
                TextField(controller: tc,),
                FlatButton(
                  child: const Icon(Icons.my_location),
                  onPressed: () => clickCallback(),
                )
      //    ])
    ]);
  }
}

我尝试添加

Row

使它们成为单行，但它不起作用，并且显示空白屏幕！！

** 更新**

我能够通过将每个元素包装到一个容器中来将它们排成一行，但仍然对此不满意，因为它需要我分配容器宽度，我需要自动完成此操作：

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
          width: 180,
          child: TextField(
              controller: tc,
              enabled: false,
              textAlign: TextAlign.center,
              decoration: InputDecoration.collapsed(hintText: "")
          )
      ),
      Container(
          child: FlatButton(
                 child: const Icon(Icons.my_location),
                 onPressed: () => clickCallback(),
          )
      ),
    ]
);

Answer 1

这就是你可以做到的。

textDirection Row() 小部件的属性将允许您从上述方向开始定位子小部件。

注意：- **如果您在项目中使用 MaterialApp() 小部件，则可以删除或注释掉“textDirection”。它负责处理 textDirection。

Expanded()小部件用于占据剩余的整个空间。

 child: Row(
            textDirection: TextDirection.rtl,
            children: <Widget>[
              FlatButton(onPressed: () {}, child: Text("Demo Button")),
              Expanded(child: TextFormField())
            ],
          )

Answer 2

您可以使用

Expanded or Flexible

小部件，如下所示：

Row(
children: <Widget>[
Expanded(
child: TextFormField(
controller: contrllerName,
),
),
TextButton(
 onPressed: () {
  // To do      
 }, 
 child: Text("Demo Button")
 ),
 ],
 )

不要忘记初始化

contrllerName