将按钮放在容器底部颤动答案

【问题标题】：Placing button at the bottom of container in flutter将按钮放在容器底部颤动
【发布时间】：2021-12-10 20:23:02
【问题描述】：

如何创建如下按钮，

【问题讨论】：

你写了什么？
@milt_on 我不明白你的意思
向我们展示您的代码。你尝试过什么？

【解决方案1】：

试试下面的代码希望它对你有帮助。为此使用了 Stack 小部件 here

Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(top: circleRadius / 2.0),
        child: Container(
          height: 200,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            color: Colors.white,
            margin: EdgeInsets.all(
              16,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 2,
                  height: 2,
                  decoration: ShapeDecoration(
                    shape: CircleBorder(),
                    color: Colors.transparent,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      Container(
        width: 100,
        height: 40,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(),
          color: Colors.transparent,
        ),
        child: Padding(
          padding: EdgeInsets.all(1),
          child: DecoratedBox(
            child: Center(
              child: Text(
                'Profile',
                style:TextStyle(color: Colors.white,),
                textAlign: TextAlign.center,
              ),
            ),
            decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
              color: Colors.blue,
            ),
          ),
        ),
      )
    ],
  ),

您的结果屏幕->

【讨论】：

嘿，如果我想在卡片中添加文字，请问我该怎么做？
@Aniekan-abasiAkpakpan 在哪张白卡里？
是的，我指的是白卡
只需在 Container 上方添加 Center(child: Text('OK'),), 即可，即在 Column 中
非常感谢它的工作原理

【解决方案2】：

您可以使用以下代码示例...根据您的需要更改高度...或使用媒体查询以获得更好的结果：

Container(
      height: 275,
      child: Stack(
      children: [
         Container(//container with background color
         height: 250,
         child: //other widgets
        ),
         Positioned(
         bottom: 0,
         child: //button here
        ),
      ],
    ),
 ),

【讨论】：

【解决方案3】：

 Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.all(Radius.circular(20))),
      child: TextButton(
        child: Text(
          "Profile",
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () {},
      ),
    ),

【讨论】：