surface 0.3.0 surface: ^0.3.0 copied to clipboard
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
Color
s andGradient
s in both ๐SurfaceLayer
BASE
andMATERIAL
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
.
- The top-most of which can blur any InkResponse that occurs on the middle ๐
- 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 withSurfacePeekSpec.peekRatio
.
๐ฌ SurfaceFilterSpec
defines ๐คนโโ๏ธ SurfaceFX
ImageFilter
s #
- In configured ๐
SurfaceFilterSpec.filteredLayers
Set
- Whose radii (blur strength) are mapped with ๐
SurfaceFilterSpec.radiusMap
- Whose radii (blur strength) are mapped with ๐
- A ๐
SurfaceLayer.BASE
filter may be extended through theSurface.margin
withSurfaceFilterSpec.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
shortcutSurfaceTapSpec.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 containerWidget
- ๐ฒ [
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
orSurface.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