该软件包的灵感来源于对类似于Spotify（iOS）的滑动过渡效果的需求。不幸的是，我找不到任何有效的软件包，所以我真的在桌子上捶了一拳，卷起袖子，创造了我自己的解决方案。通过这个软件包，我可以更好地理解Flutter动画的一些原理？

Music App Store App

安装

将此添加到您的包的pubspec.yaml文件中

dependencies:
  we_slide: ^2.4.0

基本示例

https://pad.dart.ac.cn/?id=6a833cba62679260bf1a556a4fdc9043

import 'package:we_slide/we_slide.dart';

final _colorScheme = Theme.of(context).colorScheme;
final double _panelMinSize = 70.0;
final double _panelMaxSize = MediaQuery.of(context).size.height / 2;
return Scaffold(
  backgroundColor: Colors.black,
  body: WeSlide(
    panelMinSize: _panelMinSize,
    panelMaxSize: _panelMaxSize,
    body: Container(
      color: _colorScheme.background,
      child: Center(child: Text("This is the body ?")),
    ),
    panel: Container(
      color: _colorScheme.primary,
      child: Center(child: Text("This is the panel ?")),
    ),
    panelHeader: Container(
      height: _panelMinSize,
      color: _colorScheme.secondary,
      child: Center(child: Text("Slide to Up ☝️")),
    ),
  ),
);

其他示例

在main.dart中将propery home更改为MusicApp()或StoreApp以查看更多示例？

自定义属性

有很多选项可以更改

属性 类型 描述
footer widget 这是将作为页脚的widget，可以作为BottomNavigationBar使用
应用栏 widget 这是将位于顶部的widget，可以作为AppBar使用
body widget 这是将与Panel一起隐藏的widget。您可以放置任何widget。此参数是必需的
面板 widget 这是将滑动在Body之上的widget。您可以放置任何widget。
面板标题 widget 这是将位于Panel之上的标题。您可以放置任何widget。
面板最小尺寸 双精度 这是设置panel最小高度的初始值。如果值为0以上，panel将是body之上该大小。默认为150.0。如果想隐藏Panel，请设置为0.0
面板最大尺寸 双精度 这是设置panel最大高度的值。当向上滑动panel时，此值定义了panel在Body之上的最大高度。默认为400.0，如果您想让panel覆盖整个Body，请将其设置为MediaQuery.of(context).size.height
面板宽度 双精度 这是设置panel宽度的值，默认为MediaQuery.of(context).size.width
面板圆角开始 双精度 设置此值可在panel上创建圆角。当panelBorderRadiusBegin与panelBorderRadiusEnd不同，并且panel向上滑动时，这将为panel创建圆角动画。默认为0.0
面板圆角结束 双精度 设置此值可在panel上创建圆角。当panelBorderRadiusBegin与panelBorderRadiusEnd不同，并且panel向上滑动时，这将为panel创建圆角动画。默认为0.0
主体圆角开始 双精度 设置此值可在body上创建圆角。当bodyBorderRadiusBegin与bodyBorderRadiusEnd不同，并且panel向上滑动时，这将为body创建圆角动画。默认为0.0
主体圆角结束 双精度 设置此值可在body上创建圆角。当bodyBorderRadiusBegin与bodyBorderRadiusEnd不同，并且panel向上滑动时，这将为body创建圆角动画。默认为0.0
主体宽度 双精度 这是设置body宽度的值。默认为MediaQuery.of(context).size.width
视差偏移 双精度 设置此值可在panel向上滑动时创建parallax效果。默认为0.1
页脚高度 双精度 这是设置页脚高度的值。默认为60.0
应用栏高度 双精度 这是设置应用栏高度的值。默认为80.0
叠加透明度 双精度 此值定义body和panel之间的叠加效果的透明度。
模糊半径 双精度 此值用于创建应用高斯模糊的图像滤镜。
变换缩放开始 双精度 这是定义transform scale开始效果的值。默认为1.0
变换缩放结束 双精度 这是定义transform scale结束效果的值。默认为0.9
overlayColor color 这是定义叠加颜色效果的值。默认为Colors.black
模糊颜色 color 这是定义模糊颜色效果的值。默认为Colors.black
backgroundColor color 这是定义背景颜色的值。默认为Colors.black，结束时应与body相同
隐藏页脚 布尔值 这是定义是否要隐藏footer的值。默认为true
隐藏面板标题 布尔值 这是定义是否要隐藏panelHeader的值。默认为true
视差 布尔值 这是定义是否要启用paralax效果的值。默认为false
变换缩放 布尔值 这是定义是否要启用transform scale效果的值。默认为false
叠加 布尔值 这是定义是否要启用overlay effect的值。默认为false
模糊 布尔值 这是定义是否要启用Gaussian blur effect的值。默认为false
动画时长 布尔值 这是设置animation时长的值。默认为300毫秒
可关闭 布尔值 此参数指定用户点击屏幕时panel是否将被关闭
控制器 WeSlideController 此对象用于控制动画，使用hide或show等方法来显示面板和页脚，或通过变量isOpened检查是否可见
淡入序列 TweenSequenceItem<double>列表 这是在panel header上创建fade transition的值
向上滑动 布尔值 这是需要向上滑动面板以启用通过面板向上滑动的按钮。默认为true

支持

如果您想对我好一点，请考虑请我喝一杯。

谢谢！

功能和 Bug

请在问题跟踪器上提交功能请求和错误。

许可证

MIT 许可

GitHub

查看 Github