surface 0.4.3
surface: ^0.4.3 copied to clipboard

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

๐ŸŒŸ 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
4
likes
130
pub points
20%
popularity

Publisher

zaba.app

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

ball, flutter

More

Packages that depend on surface