Flutter 动画更改对话框高度

Question

Here我们解决了更改对话框高度的问题，现在如何为对话框的这种不断变化的 height 设置动画。

完整源代码:

void main() => runApp(MaterialApp(home: DialogCustomHeight()));

class DialogCustomHeight extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => DialogCustomHeightState();
}

class DialogCustomHeightState extends State<DialogCustomHeight> {
  bool fullScreenDialog = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          color: Colors.white,
          child: Text('show dialog'),
          onPressed: () => _showDialog(),
        ),
      ),
    );
  }

  _showDialog() {
    bool _fromTop = false;
    return showGeneralDialog(
      barrierLabel: "Label",
      barrierDismissible: true,
      barrierColor: Colors.black.withOpacity(0.5),
      transitionDuration: Duration(milliseconds: 200),
      context: context,
      pageBuilder: (context, anim1, anim2) {
        return MyDialog(fromTop: _fromTop, fullScreen: fullScreenDialog);
      },
      transitionBuilder: (context, anim1, anim2, child) {
        return FadeTransition(
          opacity: new CurvedAnimation(parent: anim1, curve: Curves.easeOut),
          child: SlideTransition(
            position: Tween(begin: Offset(0, _fromTop ? -0.1 : 0.1), end: Offset(0, 0)).animate(anim1),
            child: child,
          ),
        );
      },
    );
  }
}

class MyDialog extends StatefulWidget {
  final bool fromTop;
  final bool fullScreen;

  const MyDialog({Key key, this.fromTop, this.fullScreen}) : super(key: key);

  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> {
  bool _fromTop, _fullScreen;

  @override
  void initState() {
    super.initState();
    _fromTop = widget.fromTop;
    _fullScreen = widget.fullScreen;
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: _fromTop ? Alignment.topCenter : Alignment.bottomCenter,
      child: Container(
        height: _fullScreen ? MediaQuery.of(context).size.height : MediaQuery.of(context).size.height * 0.500,
        child: SizedBox.expand(
          child: ClipRRect(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0),
            ),
            child: Container(
              color: Colors.green,
              child: Center(
                child: RaisedButton(
                  color: Colors.white,
                  child: Text('change height'),
                  onPressed: () {
                    setState(() {
                      _fullScreen = !_fullScreen;
                    });
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您需要做的就是使用AnimatedContainer 并给它一个duration。就这样

@override
Widget build(BuildContext context) {
  return Align(
    alignment: _fromTop ? Alignment.topCenter : Alignment.bottomCenter,
    child: AnimatedContainer(
      duration: Duration(seconds: 1),
      height: _fullScreen ? MediaQuery.of(context).size.height : MediaQuery.of(context).size.height * 0.5,
      child: SizedBox.expand(
        child: ClipRRect(
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(20.0),
            bottomLeft: Radius.circular(20.0),
          ),
          child: Container(
            color: Colors.teal,
            child: Center(
              child: RaisedButton(
                child: Text('change height'),
                onPressed: () {
                  setState(() {
                    _fullScreen = !_fullScreen;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    ),
  );
}