surface 0.1.0+5 surface: ^0.1.0+5 copied to clipboard
Shapeable, layered, intrinsincally animated container with convenient access to blurry ImageFilters, InkResponse, and HapticFeedback.
'Surface' Flutter Package #
🌟 Surface is shapeable, layered, intrinsincally animated container Widget offering convenient access to blurring ImageFilters, Material InkResponse, and HapticFeedback.
📚 [SurfaceLayer] container layering offers robust customization.
- Support for both [Color]s and [Gradient]s in both 📚 [SurfaceLayer]
BASE
andMATERIAL
layers.
Use 🔘 [Surface.radius] and 📐 [SurfaceCorners] parameter [Surface.corners] to configure the shape.
- The 🔘 [baseRadius] may be specified separately, but is optional and will only impact the 📚 [SurfaceLayer.BASE].
A 🔲 [SurfacePeekSpec] may be provided to alter the Surface "peek"
(MATERIAL
inset or "border") with parameter 🔲 [SurfacePeekSpec.peek].
- Give special treatment, generally a thicker appearance, to selected side(s) by passing 🔲 [SurfacePeekSpec.peekAlignment] and tuning with 🔲 [SurfacePeekSpec.peekRatio].
Specify a 🔬 [SurfaceFilterSpec] with options to render 💧 [Blur.ry] backdrop [ImageFilter]s
- 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]
A 👆 [SurfaceTapSpec] offers [SurfaceTapSpec.onTap] VoidCallback
,
[InkResponse] customization, and a [HapticFeedback] shortcut.
🔰 [BiBeveledShape] is responsible for the 📐 [SurfaceCorners.BEVEL] custom shape.
References #
- 🌟 [Surface] - A shapeable, layered, animated container Widget
- 🔲 [SurfacePeekSpec] - An Object with optional parameters to customize a Surface's "peek"
- 👆 [SurfaceTapSpec] - An Object with optional parameters to customize a Surface's tap behavior
- 🔬 [SurfaceFilterSpec] - An Object with optional parameters to customize a Surface's blurring filters
🎊 Just a few extra goodies for fun.
- 🏓 [CustomInk] - A delightfully bouncy and position-mirroring reaction to user input on a piece of [Material]
- 🔦 [WithShading]
Color
extension- ⬛ [withBlack]
.withBlack(int subtract)
- ⬜ [withWhite]
.withWhite(int add)
- ⬛ [withBlack]
- 🤚 [DragNub] A small, round "handle" indicator used to visualize impression of draggable material
- 👨💻 [fullPrint] - To receive really long
String
s in console log - 📏 [scaleAxis] - For a [Transform.scale]-like return that accepts independent
dx
anddy
scaling
TODO: #
-
Work in progress transfer from an Android application on which I am primarily focused.
- Standard approaches and a bit of bespoke shape-crafting; more options should be available down the line.
- The package currently includes a couple goodies that I use in my project.
I would like to incorporate these extra features more tightly with Surface.
- Color extensions
Color.withBlack(int subtract)
andColor.withWhite(int add)
may be handy at least. - A modified
SplashFactory
calledCustomInk
is present in goodies.dart as well.
- Color extensions
- 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 where any Surface build method utilizes the Beveled Shape to a RoundedRect Shape.
- Ideally, I believe, there would be a
Decoration.lerp()
involved. - This "aggravates" the simplicity of [Surface] to develop, but would provide a better end-user result: more accurate and performant animations that are just as easy to use. (Almost effortless? 😉)
-
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] property that allows customization of all four corners independently.
Surface Example #
See some example usage of the Surface package for Flutter included here.
- Surface Example Android source:
/example/lib/main.dart
- Animated GIF preview of Surface Example app
- Surface Example APK