surface 0.4.1 copy "surface: ^0.4.1" to clipboard
surface: ^0.4.1 copied to clipboard

outdated

Shapeable, layered, intrinsincally animated container with convenient access to blurry ImageFilters, InkResponse, and HapticFeedback.

๐ŸŒŸ Surface #

WORK IN PROGRESS:

Overhaul in progress. Documentation & Readme out of date.

Animated GIF preview of Surface Example app

Details in the screenshot above are from an outdated version.

A shapeable, layered, intrinsincally animated container Widget offering convenient access to blurring ImageFilters, Material InkResponse, and HapticFeedback.

๐Ÿ“š SurfaceLayer Container Division #

Offers robust customization for a set app-wide style or on-the-fly changes.

  • Support for both Colors and Gradients in both ๐Ÿ“š SurfaceLayer BASE and MATERIAL layers.
  • Support for three different blur filters and their strengths.
    • The top-most of which can blur any InkResponse that occurs on the middle ๐Ÿ“š SurfaceLayer.
  • EdgeInsets may be divided amongst different ๐Ÿ“š layers by ๐Ÿ”› Surface.padLayer.

๐Ÿ”˜๐Ÿ“ Shape Customization #

- ๐Ÿ†• Manual [`Shape`](https://pub.dev/documentation/surface/latest/surface/Shape-class.html)ing is here! Work in progress.

๐Ÿ”ฐ SurfaceShape Open to Grow #

- ๐Ÿ†• Manual [`Shape`](https://pub.dev/documentation/surface/latest/surface/Shape-class.html)ing is here! Work in progress.

๐Ÿ”ฒ Peek for bespoke "peek" effect #

MATERIAL inset or "border", the size of which is set by parameter ๐Ÿ”ฒ Peek.peek.

  • Give special treatment, generally a thicker appearance, to selected side(s) by passing Peek.peekAlignment and tuning with Peek.peekRatio.

๐Ÿ‘† TapSpec Controls Touch Feedback #

  • If the ๐ŸŒŸ Surface is ๐Ÿ‘† TapSpec.tappable then ๐Ÿ‘† TapSpec.onTap VoidCallback becomes available.
  • Colors may be provided for InkResponse customization--though ThemeData defaults are accessed otherwise.
  • Finally consider a HapticFeedback shortcut TapSpec.providesFeedback.

๐Ÿ”ฌ Filter defines ๐Ÿคนโ€โ™‚๏ธ SurfaceFX ImageFilters #

  • In configured ๐Ÿ‘“ Filter.filteredLayers Set
    • Whose radii (blur strength) are mapped with ๐Ÿ“Š Filter.radiusMap
  • A ๐Ÿ“š SurfaceLayer.BASE filter may be extended through the Surface.margin with Filter.extendBaseFilter.

๐Ÿคนโ€โ™‚๏ธ Surface FX Open to Grow #

The class currently only responsible for ๐Ÿ’ง FX.blurry static method returning ImageFilter.

๐Ÿ“– Reference #

  • ๐ŸŒŸ [Surface] - A shapeable, layered, animated container Widget
  • ๐Ÿ”ฐ [Shape]
    • ๐Ÿ“ [Corner] & ๐Ÿ“ [CornerSpec]
    • ๐Ÿ†• Manual Shapeing is here! Work in progress.
  • ๐Ÿ”ฒ [Peek] - An Object with optional parameters to customize a ๐ŸŒŸ Surface's "peek"
  • ๐Ÿ‘† [TapSpec] - An Object with optional parameters to customize a ๐ŸŒŸ Surface's tap behavior
  • ๐Ÿ”ฌ [Filter] - An Object with optional parameters to customize a ๐ŸŒŸ Surface's ๐Ÿคนโ€โ™‚๏ธ filters/effects
    • ๐Ÿคนโ€โ™‚๏ธ [SurfaceFX] - Function typedef for custom [FilterSpec.effect]s!

๐Ÿ“ [BouncyBall] #

A delightfully bouncy and position-mirroring reaction to user input on a piece of [Material].

Turn ink splashes for an [InkWell], [InkResponse] or material [Theme] into ๐Ÿ“ [BouncyBall]s or ๐Ÿ”ฎ Glass [BouncyBall]s with the built-in [InteractiveInkFeatureFactory]s, or design your own with ๐Ÿช€ [BouncyBall.mold].

๐ŸŽŠ Just a few extra goodies for fun.

  • ๐Ÿ”ฆ [WithShading] Color extension
    • โฌ› [withBlack] .withBlack(int subtract)
    • โฌœ [withWhite] .withWhite(int add)
  • ๐Ÿคš [DragNub] A small, round "handle" indicator used to visualize impression of draggable material

๐ŸŒ‡ Roadmap #

  • This is my first public package and I expect things may still be altered greatly.

  • Intrinsic animations of ๐Ÿ“ Surface.corners property change.

    • Currently there is a conditional swap in any build method utilizing shapes.
    • Ideally there would be a Decoration.lerp() involved.
  • Differed radius on ๐Ÿ“š SurfaceLayer.MATERIAL vs ๐Ÿ“š SurfaceLayer.BASE

    • Smaller inner radius gives a better aesthetic for nested shapes.
    • ๐Ÿ†• Manual setting of Surface.radius or Surface.baseRadius available now.
    • ๐Ÿ†• Manual Shapeing is here! Work in progress.
  • โœ… Proposed [SurfaceCornerSpec] for [Surface.corners] parameter or expansion of ๐Ÿ”ฐ [SurfaceShape] class that allows customization of all four corners independently.

    • ๐Ÿ†• Manual Shapeing is here! Work in progress.

๐ŸŒŸ Surface Example #

See example usage of the ๐ŸŒŸ Surface package for Flutter:

๐Ÿ”— SOURCE FOR BACKGROUND
10
likes
0
pub points
3%
popularity

Publisher

verified publisherzaba.app

Shapeable, layered, intrinsincally animated container with convenient access to blurry ImageFilters, InkResponse, and HapticFeedback.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

ball, flutter

More

Packages that depend on surface