🌟 Surface

WORK IN PROGRESS:

Overhaul in progress. Documentation & Readme out of date.

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.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 🪀 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:

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

🔗 SOURCE FOR BACKGROUND