Flutter 侧边导航动画

【问题标题】：Flutter side nav animationFlutter 侧边导航动画
【发布时间】：2021-01-11 14:40:28
【问题描述】：

我正在尝试构建像侧导航这样的松弛移动应用程序，我们可以在其中向右滑动以显示抽屉，并且主体在抽屉打开时向右移动。

布局：

堆栈 -抽屉（） -主页()

点击汉堡图标时，我使用动画位置来移动 HomePage() 并显示抽屉。

但是我怎样才能实现类似页面浏览的东西，第一个孩子是抽屉，第二个孩子是主页，我可以正确地显示抽屉，但抽屉的宽度只有 0.5* viewportfraction 所以主页也是显露并变暗。

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

我遇到了同样的问题，我用 Stack 来解决它，看看例子：

    Stack(
       children: <Widget>[
           buildPartnerList(context),
           FilterDrawer(),
       ],
   ),

在FilterDrawer中我返回了一个animationBuilder

 Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, widget) => buildFilterDrawer(context, widget),
    );
  }

buildFilterDrawer 是这样的

Container(
            color: Theme.of(context).accentColor,
            width: widthAnimation.value,
            child: Stack(
              children: <Widget>[
    ...

为了制作动画，我有一个 GestureDetector，点击时会为我的侧边栏设置动画

 _moveFliterDrawerAnimation() {
    setState(() {
      _isExpanded
          ? _animationController.reverse()
          : _animationController.forward();
      _isExpanded = !_isExpanded;
    });
  }

【讨论】：