flutter 实现按钮从底部缓缓上升

可以使用 Flutter 中的动画来实现按钮从底部缓缓上升的效果。以下是一些参考代码：

1. 在按钮下面放置一个带有透明度的容器，作为按钮上升时的背景。

Container(
  height: double.infinity,
  width: double.infinity,
  color: Colors.black.withOpacity(0.5), // 半透明的黑色背景
  child: Align(
    alignment: Alignment.bottomCenter,
    child: AnimatedContainer(
      duration: Duration(milliseconds: 500), // 动画时长为 0.5 秒
      height: _buttonHeight, // 按钮高度，初始值为 0
      width: double.infinity,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Button'),
      ),
    ),
  ),
),

2. 在 initState() 中设置初始状态：

@override
void initState() {
  super.initState();
  _buttonHeight = 0; // 初始时按钮高度为 0
}

3. 在 Widget 树中添加一个 GestureDetector，用于触发按钮上升的动画：

GestureDetector(
  onTap: () {
    setState(() {
      _buttonHeight = 60; // 按钮高度为 60
    });
  },
  child: Container(
    height: double.infinity,
    width: double.infinity,
    color: Colors.black.withOpacity(0.5), // 半透明的黑色背景
    child: Align(
      alignment: Alignment.bottomCenter,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500), // 动画时长为 0.5 秒
        height: _buttonHeight, // 按钮高度，初始值为 0
        width: double.infinity,
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ),
    ),
  ),
),

这样，当用户点击屏幕时，按钮会从底部缓缓上升。