surface 0.4.1 surface: ^0.4.1 copied to clipboard
Shapeable, layered, intrinsincally animated container with convenient access to blurry ImageFilters, InkResponse, and HapticFeedback.
๐ 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 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 ofSurface.radius
orSurface.baseRadius
available now.- ๐ Manual
Shape
ing 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
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