surface 0.3.0+1

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

🌟 Surface

WORK IN PROGRESS

NULL-SAFETY SUPPORT - as of v0.2.0

Some 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

🔘 Surface.radius and 📐 SurfaceCorners parameter Surface.corners offer shape customization. The 🔘 baseRadius may be specified separately, but is optional and will only impact the 📚 SurfaceLayer.BASE.

🔲 SurfacePeekSpec for bespoke "peek" effect

MATERIAL inset or "border", the size of which is set by parameter 🔲 SurfacePeekSpec.peek.

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

🔬 SurfaceFilterSpec defines 🤹‍♂️ SurfaceFX ImageFilters

• In configured 👓 SurfaceFilterSpec.filteredLayers Set
  • Whose radii (blur strength) are mapped with 📊 SurfaceFilterSpec.radiusMap
• A 📚 SurfaceLayer.BASE filter may be extended through the Surface.margin with SurfaceFilterSpec.extendBaseFilter.

👆 SurfaceTapSpec Controls Touch Feedback

• If the 🌟 Surface is 👆 SurfaceTapSpec.tappable then 👆 SurfaceTapSpec.onTap VoidCallback becomes available.
• Colors may be provided for InkResponse customization--though ThemeData defaults are accessed otherwise.
• Finally consider a HapticFeedback shortcut SurfaceTapSpec.providesFeedback.

🔰 SurfaceShape Open to Grow

The class currently only responsible for the 📐 SurfaceCorners.BEVEL custom shape by 🔰 SurfaceShape.biBeveledRectangle.

🤹‍♂️ 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
• 🔲 [PeekSpec] - An Object with optional parameters to customize a 🌟 Surface's "peek"
• 👆 [TapSpec] - An Object with optional parameters to customize a 🌟 Surface's tap behavior
• 🔬 [FilterSpec] - An Object with optional parameters to customize a 🌟 Surface's 🤹‍♂️ filters/effects
• 🔰 [SurfaceShape] - Handles the "biBevel" shape for 🌟 Surface, but could do more
• 🤹‍♂️ [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.

• Proposed [SurfaceCornerSpec] for [Surface.corners] parameter or expansion of 🔰 [SurfaceShape] class that allows customization of all four corners independently.

🌟 Surface Example

See example usage of the 🌟 Surface package for Flutter:

• Surface Example Android source: /example/lib/main.dart
• Animated GIF preview of Surface Example app
• Surface Example APK

🔗 SOURCE FOR BACKGROUND