flutter_dough

This package provides some widgets you can use to create a smooshy UI.

如何使用

此包提供了开箱即用的弹力小部件。您还可以选择创建自定义的 Dough 小部件以获得自定义弹力效果。有关如何使用 Dough 库的更完整概述，请查看 GitHub 上提供的示例项目。

可按压的 Dough

将任何小部件包装在 PressableDough 中，使其根据用户的输入手势而产生弹力效果。

PressableDough(
    child: FloatingActionButton( ... ),
);

您可以在 此处 找到使用此小部件的完整示例。

pressable-dough

可拖动的 Dough

与 Flutter 内置的 Draggable 小部件类似，DraggableDough 允许您拖放小部件……这次是弹力效果的！

DraggableDough<String>(
    data: 'My data',
    child: Container( ... ),
    feedback: Container( ... ),
);

您可以在 此处 找到使用此小部件的完整示例。

draggable-dough

陀螺仪 Dough

将任何小部件包装在 GyroDough 中，使其根据用户在物理空间中移动手机的方式而产生弹力效果。此小部件仅在具有加速度计/陀螺仪功能的设备上运行。

GyroDough(
    child: Container( ... ),
);

您可以在 此处 找到使用此小部件的完整示例。

gyro-dough

制作您自己的 Dough

如果以上小部件不完全符合您的要求，您可以使用提供的 Dough 小部件轻松创建自己的弹力小部件！请参阅 示例项目 了解更多关于如何操作的详细信息。

custom-dough

自定义 Dough 的手感

如果您不喜欢默认的 dough 设置，可以轻松更改 dough 的手感。只需将任何使用 Dough 的小部件包装在 DoughRecipe 中即可。

DoughRecipe(
    data: DoughRecipeData(
        adhesion: 4,
        viscosity: 250, // a more jello like substance
        usePerspectiveWarp: true, // use for added jiggly-ness
        perspectiveWarpDepth: 0.02,
        exitDuration: Duration(milliseconds: 600),
        ...
    ),
    child: PressableDough( ... ),
);

您可以在 此处 找到使用此小部件的完整示例。

dough-recipe

未来改进

Dough 扩展 – 理想情况下，按压 dough 小部件应该会将像素从您的手指推开，就像您在按压 dough 一样（可能使用网格？）。如果您有任何实现此功能的想法，请考虑贡献！

更多 dough 小部件 – 未来将添加更多开箱即用的 dough 小部件。一些 dough 小部件的设想包括……

  • [ ] ReorderableListDough – 与可重排列表小部件相同，但它是软糯的。
  • [ ] SliverListDough – 与 Sliver 列表小部件相同，但它是软糯的。

GitHub

https://github.com/josiahsrc/flutter_dough