将按钮放置在容器底部的颤动中

Question

如何创建如下按钮，

Answer 1

 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: () {},
      ),
    ),

Answer 2

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

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

Answer 3

试试下面的代码希望对你有帮助。为此使用了堆栈小部件 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,
            ),
          ),
        ),
      )
    ],
  ),

您的结果屏幕->

将按钮放置在容器底部的颤动中

Placing button at the bottom of container in flutter

user-interface

dart

flutter