๐ 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 ImageFilter
s, 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
- ๐ 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 withPeek.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
shortcutTapSpec.providesFeedback
.
๐ฌ Filter
defines ๐คนโโ๏ธ SurfaceFX
ImageFilter
s
- In configured ๐
Filter.filteredLayers
Set
- Whose radii (blur strength) are mapped with ๐
Filter.radiusMap
- Whose radii (blur strength) are mapped with ๐
- A ๐
SurfaceLayer.BASE
filter may be extended through theSurface.margin
withFilter.extendBaseFilter
.
๐คนโโ๏ธ Surface FX
Open to Grow
The class currently only responsible for ๐ง FX.blurry
static method returning ImageFilter
.
๐ Reference
- ๐
`Surface`
- A shapeable, layered, animated containerWidget
- ๐ฐ
`Shape`
- ๐
`Corner`
& ๐`CornerSpec`
- ๐ Manual
Shape
ing 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 customFilterSpec.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 ๐ 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 ofSurface.radius
orSurface.baseRadius
available now.- ๐ Manual
Shape
ing is here! Work in progress.
-
โ
ProposedSurfaceCornerSpec
forSurface.corners
parameter or expansion of ๐ฐ SurfaceShape class that allows customization of all four corners independently.- ๐ Manual
Shape
ing is here! Work in progress.
- ๐ Manual
๐ 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
Libraries
- surface
- ๐ Surface Library