Flutter中的居中对齐前导图标答案

【问题标题】：Center align leading icon in FlutterFlutter中的居中对齐前导图标
【发布时间】：2021-07-05 23:42:36
【问题描述】：

我需要在中心对齐提示文本和前导图标，如下所示：

当我添加一个前导图标并居中对齐装饰时，这就是我得到的。我也需要图标位于中心。

编辑：当前代码

TextField(
      textAlign: TextAlign.center,
    decoration: InputDecoration(
      hintText: 'Type something',
      prefixIcon: Icon(Icons.search)
    )
  ),

【问题讨论】：

您需要共享现有代码。

标签： flutter flutter-layout

【解决方案1】：

您的案例有一个小部件：IntrinsicWidth。此小部件用于将其子项的大小调整为子项的固有宽度。

输出

完整代码：


class CenteredTextField extends StatefulWidget {
  const CenteredTextField({Key key}) : super(key: key);

  @override
  _CenteredTextFieldState createState() => _CenteredTextFieldState();
}

class _CenteredTextFieldState extends State<CenteredTextField> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 40.0,
        margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 50.0),
        decoration: BoxDecoration(
          color: Colors.orange.withOpacity(0.4),
          borderRadius: BorderRadius.circular(20.0),
          border: Border.all(
            color: Colors.orange,
            width: 1.0,
          ),
        ),
        child: Center(
          child: IntrinsicWidth(
            child: TextField(
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                hintText: 'Type verse address',
                border: InputBorder.none,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：