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,
    ...
    )
)