Flutter开发：如何在圆角Container容器的顶部放置文本

问题原因 #

你代码中使用Center组件作为蓝色Container的直接子组件，该组件会默认将子元素在水平、垂直双方向居中对齐，这是文本无法显示在容器顶部的核心原因。

修复方案 #

将Center组件替换为Align组件，通过alignment参数指定子元素的对齐规则为顶部位置，同时可根据需求调整顶部内边距，避免文本紧贴容器圆角边缘。当前Dart版本中new关键字为可选项，代码中可以省略不写。

修改后代码示例 #

height: 440.0,
color: Colors.transparent,
child: Container(
  decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40.0),
        topRight: Radius.circular(40.0),
      )),
  // 如需文本左对齐可将 alignment 改为 Alignment.topLeft
  child: Align(
    alignment: Alignment.topCenter,
    child: Padding(
      // 调整top参数即可自定义文本和容器顶部的间距
      padding: EdgeInsets.only(top: 24.0),
      child: Text('Email'),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Imam Rizky GANTENG