Code Monkey home page Code Monkey logo

surface's Introduction

๐ŸŒŸ Surface

WORK IN PROGRESS

Overhaul ongoing. Documentation & Readme may be out of date.

A shapeable, layered, intrinsincally animated container widget offering convenient access to blurring ImageFilters, Material InkResponse, and HapticFeedback.

A delightfully bouncy and position-mirroring reaction to user input on a piece of Material.

Animated GIF preview of Surface Example app

Details in the screenshot above are from an outdated version.

ย 

๐Ÿ“š SurfaceLayer Container Division

Offers robust customization for a set app-wide style or on-the-fly changes.

  • Support for Colors and Gradients in both ๐Ÿ“š SurfaceLayers BASE and MATERIAL layers.
  • Support for three different filters and their strengths.
    • The top-most of which will affect any InkResponse that occurs on the middle ๐Ÿ“š SurfaceLayer
  • Insets may be divided amongst different ๐Ÿ“š Layers by ๐Ÿ”› Shape.padLayer.

ย 

๐Ÿ”ฐ Shape Customized SurfaceShapes

ย 

๐Ÿ”ฒ Peek

๐Ÿ“š 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.alignment and tuning with Peek.ratio.

ย 

๐Ÿ‘† TapSpec

If the ๐ŸŒŸ Surface is TapSpec.tappable then:

  • ๐Ÿ‘† TapSpec.onTap callback becomes available.
  • Colors may be provided for InkResponse customization--though ThemeData defaults are accessed otherwise.
  • Consider a HapticFeedback shortcut ๐Ÿ‘† TapSpec.providesFeedback.
  • Enjoy the ๐Ÿ“ BouncyBall splashFactory, pick your own, or have ๐ŸŒŸ Surface default to your Theme's.

ย 

๐Ÿ”ฌ Filter defines ๐Ÿคนโ€โ™‚๏ธ SurfaceFX ImageFilters

ย 

๐Ÿคนโ€โ™‚๏ธ FX Open to Grow

Currently only responsible for ๐Ÿ’ง FX.blurry, the default ImageFilter for ๐Ÿ”ฌ Filter.

ย 

๐Ÿ“– Reference

๐ŸŒŸ Surface - A shapeable, layered, animated container Widget

๐Ÿ”ฐ Shape

๐Ÿ”ฒ 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

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 custom rubber Paint using ๐Ÿช€ 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.

  • Speaking of which, an overhaul is currently ongoing as of [0.4.0]. I am still new to Dart and improving my programming. Feel absolutely free to suggest improvements or make PRs.
  • Since releasing Surface, I have found many more advanced and powerful packages. Still Surface progress marches onward as I plan to continue development as I learn.
  • For example, I have already earned experience in deprecating features and "bad pushes"!

๐Ÿ”ณ Animations of ๐Ÿ“ Surface.shape change.

โœ… 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's People

Contributors

zabadam avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.