flutter 底部弹出动画实现

Flutter 底部弹出动画可以通过使用 BottomSheet widget 和 AnimatedContainer widget 来实现。

首先，创建一个 StatefulWidget，包含一个 bool 变量用于控制 BottomSheet 的显示和隐藏。

class BottomSheetDemo extends StatefulWidget {
  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  bool _isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Demo'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Show Bottom Sheet'),
          onPressed: () {
            setState(() {
              _isVisible = true;
            });
          },
        ),
      ),
      bottomSheet: _isVisible
          ? Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    blurRadius: 5.0,
                    spreadRadius: 1.0,
                    offset: Offset(0.0, -1.0),
                  ),
                ],
              ),
              child: SafeArea(
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: _isVisible ? 200.0 : 0.0,
                  child: Center(
                    child: Text('This is a Bottom Sheet'),
                  ),
                ),
              ),
            )
          : null,
    );
  }
}

在上面的代码中，我们使用了一个 RaisedButton 来触发 Bottom Sheet 的显示，当用户点击按钮后，我们将 _isVisible 变量设置为 true，Bottom Sheet 就会显示出来。

Bottom Sheet 的内容是一个 AnimatedContainer，它的高度可以通过修改 _isVisible 变量来控制。在 AnimatedContainer 中，我们设置了一个动画时长为 300 毫秒，当 _isVisible 变量变化时，高度会从 0.0 到 200.0 进行动画过渡。

在 Bottom Sheet 的外部，我们使用了一个 Container 来包装它，并设置了一些阴影效果和背景颜色。我们还使用了 SafeArea 来确保 Bottom Sheet 不会被设备的导航栏遮挡。

通过这种方式，我们可以很容易地实现一个底部弹出动画效果。