Flutter - 创建一个底部弹窗

2019/12/5 早9点

Flutter - 创建一个底部弹窗

1.思路

• 创建一个Widget并且定位到屏幕下方：使用Stack + Positioned实现
• 这个Widget具有纵向平移功能：使用SlideTransition实现
• 动画的实现：设置AnimationController以及Tween

2.实现

对着思路倒着来。

2.1 AnimationController以及Tween

新建一个StatefulWidget并且初始化AnimationController

AnimationController controller;

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = new AnimationController(
        duration: Duration(milliseconds: 200), vsync: this);
  }

因为是从屏幕底部弹出，所以对应的平移描述Tween如下：

Tween tween;

tween = Tween(
  begin: Offset(0.0, 1.0),
  end: Offset(0.0, 0.0),
);

注意，这里的Offset描述规则是：

• 起始位置begin - x方向不平移，y方向（由屏幕(0,0)向下为正）处于平移一个Widget高度的位置
• 结束位置end - x方向不平移，y方向不平移原始位置

所以这个Tween描述的就是从下向上移动

所以controller控制弹窗的弹出与收回就是对动画的顺序与逆序播放：

if (widget.show) {
  controller.forward();
} else {
  controller.reverse();
}

2.2 SlideTransition

SlideTransition是一个动画的封装类，两个参数分别为：Animation和Widget:

SlideTransition(
      position: tween.animate(controller),
      child: childWidget,
    )

然后在Widget内部设置一个flag，用于描述弹窗的弹出与收回，并且将其暴露给外部即可。

2.3 可以滑动的Widget

class SlideWidget extends StatefulWidget {
  final bool show;
  final Widget child;

  SlideWidget({
    @required this.show,
    @required this.child,
  });

  @override
  _ChapterAppbarViewState createState() => new _ChapterAppbarViewState();
}

class _SlideWidgetState extends State
    with TickerProviderStateMixin {
  AnimationController controller;
  Tween tween;

  @override
  void initState() {
    super.initState();
    controller = new AnimationController(
        duration: Duration(milliseconds: 200), vsync: this);
    tween = Tween(
      begin: Offset(0.0, 1.0),
      end: Offset(0.0, 0.0),
    );
  }

  @override
  Widget build(BuildContext context) {
    if (widget.show) {
      controller.forward();
    } else {
      controller.reverse();
    }

    Size screenSize = MediaQuery.of(context).size;
    double screenWidth = screenSize.width;
    return SlideTransition(
      position: tween.animate(controller),
      child: widget.child,
    );
  }
}

2.4 Stack + Positioned

最后一步，把这个Widget放置在屏幕下侧就好：

Stack(
  children: [
    ...
    Positioned(
      child: SlideWidget(
          show: needShow,
          child: buildDialog,
      ),
      bottom: 0.0,
      left: 0.0,
    ),
  ],
),

添加点击事件修改SlideWidget的show属性并且刷新就可以实现平移了。

3. 项目源码：go实现的爬虫服务器，Flutter进行前端展示，如果你觉得不错，给我一个Star吧！