๐ŸŒŸ Surface

WORK IN PROGRESS

Overhaul ongoing. Documentation & Readme may be out of date.

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

+ ๐Ÿ“ BouncyBall

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

Animated GIF preview of Surface Example app

Details in the screenshot above are from an outdated version.

๐Ÿ“š SurfaceLayer Container Division

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

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

๐Ÿ”ฐ Shape Customized SurfaceShapes

๐Ÿ”ฒ Peek

๐Ÿ“š 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.alignment and tuning with Peek.ratio.

๐Ÿ‘† TapSpec

If the ๐ŸŒŸ Surface is TapSpec.tappable then:

  • ๐Ÿ‘† TapSpec.onTap callback becomes available.
  • Colors may be provided for InkResponse customization--though ThemeData defaults are accessed otherwise.
  • Consider a HapticFeedback shortcut ๐Ÿ‘† TapSpec.providesFeedback.
  • Enjoy the ๐Ÿ“ BouncyBall splashFactory, pick your own, or have ๐ŸŒŸ Surface default to your Theme's.

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

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

Currently only responsible for ๐Ÿ’ง FX.blurry, the default ImageFilter for ๐Ÿ”ฌ Filter.

๐Ÿ“– Reference

๐ŸŒŸ Surface - A shapeable, layered, animated container Widget

๐Ÿ”ฐ Shape

๐Ÿ”ฒ 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

๐Ÿ“ 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 ๐Ÿ“ BouncyBalls or ๐Ÿ”ฎ "glass" BouncyBalls with the built-in InteractiveInkFeatureFactorys, or design your own with custom rubber Paint using ๐Ÿช€ 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.

  • Speaking of which, an overhaul is currently ongoing as of 0.4.0. I am still new to Dart and improving my programming. Feel absolutely free to suggest improvements or make PRs.
  • Since releasing Surface, I have found many more advanced and powerful packages. Still Surface progress marches onward as I plan to continue development as I learn.
  • For example, I have already earned experience in deprecating features and "bad pushes"!

๐Ÿ”ณ Animations of ๐Ÿ“ Surface.shape change.

โœ… 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

Libraries

surface
๐ŸŒŸ Surface Library