Flutter 实现自定义侧滑--side menu

实现效果

项目源码

对flutter中的动画不了解的可以看这篇 Flutter 动画入门

实现

• 首先将界面拆解成两部分 menu 和 homePage 使用Stack组件将两者包裹起来（类似使用FrameLayout)

return Scaffold(
  backgroundColor: backgroundColor,
  body: Stack(
    children: <Widget>[menu(context), homePage(context)],
  ),
);

menu

• menu的动画可以分解成两部分：
  • 平移：从左侧推入
  • 缩放：从0.0放大至1.0
• menu动画初始化如下：

// 初始化menu缩放动画，从0.0放大至1.0
_menuScaleAnimation =
    Tween<double>(begin: 0.0, end: 1).animate(_controller);
// 初始化page平移动画，从左侧推入
_slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0))
    .animate(_controller);

• menu动画具体使用

return SlideTransition(
  // 设置平移动画
  position: _slideAnimation,
  child: ScaleTransition(
    scale: _menuScaleAnimation,
    ...
    )
)

• 关于推进动画，下图说明
  

homePage

• homePager的动画分为两部分

  • 平移：平移伴随着尺寸的变化
  • 缩放：从1.0缩小至0.8

• homePage动画初始化如下：

// 初始化page缩放动画，从1.0缩小至0.8
_pagescaleAnimation = Tween<double>(begin: 1, end: 
0.8).animate(_controller);

• homePage动画具体使用

return AnimatedPositioned(
// AnimatedPositioned尺寸随着平移动画变化（只有Stack的child才会生效）
  duration: duration,
  top: 0,
  bottom: 0,
// homePage左边缘距离屏幕距离
  left: isCollapsed ? 0 : 0.6 * screenWidth,
// homePage右边缘距离屏幕距离
  right: isCollapsed ? 0 : -0.4 * screenWidth,
  child: ScaleTransition(
    // 设置滑动的缩放动画
    scale: _pagescaleAnimation,
    ...
    )
)