Surface constructor

const Surface({ double? width, double? height, EdgeInsets margin = const EdgeInsets.all(0), EdgeInsets padding = const EdgeInsets.all(0), Color? color, Color? baseColor, Gradient? gradient, Gradient? baseGradient, Shape shape = const Shape(), Peek peek = Peek.DEFAULT, TapSpec tapSpec = const TapSpec(), Filter filter = Filter.DEFAULT, Duration duration = const Duration(milliseconds: 500), Curve curve = Curves.easeIn, Widget? child, Clip clipBehavior = Clip.hardEdge, Key? key, })

🌟 Surface

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

Property 🔲 Peek.peekAlignment has hard-coded recognition of all nine Alignment geometries and will determine which side(s) receive a special border treatment according to property 🔲 Peek.peekRatio.

• defaults at peekRatio: 2 which makes the 🔲 Peek.peekAlignment sides twice as thick, but
• these borders made be made thinner than the others by passing 0 > peekRatio > 1.

Considering:

1. 📐 CornerSpec property corners and global 🔘 radius;
2. 👆 TapSpec parameters tappable, onTap, providesFeedback & inkHighlightColor, inkSplashColor;
3. 🔛 padLayer initialized 📚 SurfaceLayer.MATERIAL for three effective container layers
4. 👓 SurfaceFilter passed as 👓 filterStyle and Map<SurfaceLayer, double> 📊 radiusMap
5. duration & curve properties for intrinsic property-change animations;

A 🌟 Surface is robustly customizable and, watch out, could also be expensive.

• If 🌆 gradient or 🌆 baseGradient is initialized, then respective 🎨 color or 🎨 baseColor parameter is ignored.

If not initialized, then default as follows:

• 🎨 color - Theme.of(context).colorScheme.surface.withOpacity(0.3)
• 🎨 baseColor - Theme.of(context).colorScheme.primaryVariant.withOpacity(0.3)

• If corners is passed 📐 CornerSpec.SQUARED then 🔘 radius is ignored.

• If corners is passed 📐 CornerSpec.BEVELED then bool 🔁 flipBevels can mirror the cut corners horizontally. Ignored otherwise.

• Passing 🔲 Peek.peekRatio a value of 1 will negate any passed value to peekAlignment.

• Similarly, passing peekRatio in the range 0..1 will actually make the 🔲 Peek.peekAlignment aligned side(s) thinner than the others.

• By default 👆 TapSpec.tappable is true and 👆 TapSpec.providesFeedback is false.

  • The former includes an InkResponse that calls 👆 TapSpec.onTap and the latter enables HapticFeedback.

---

❗ CAUTION

With default 🤹‍♂️ SurfaceFX 💧 Fx.blurry, only provide 👓 Filter.filteredLayers value for which you intend on passing each relevant 💧 Filter.radiusMap map parameter.

• Not only are the blurry BackdropFilters expensive, but the inheritance/ancestry behavior is strange.
• If all three filters are active via 👓 Filter.filteredLayers, passing 📊 baseRadius: 0 eliminates the remaining children filters, regardless of their passed 📊 radius.
  • This behavior can be worked-around by setting any parent 📚 Layer's radius to just above 0, specifically radius > (_MINIMUM_BLUR == 0.0003)
  • 📚 BASE > 📚 MATERIAL > 📚 CHILD
  • But in this case a different 👓 FilterSpec.filteredLayers Set should be passed anyway that only activates the correct 📚 Layer(s).

---

---

Simple Example

// Surface with a border that's thicker on bottom & right, with rounded corners
final surface = Surface(
  radius: 10,
  peek: const Peek(
    peekAlignment: Alignment.bottomRight,
    peekRatio: 20,
  ),
);

Implementation

const Surface({
  this.width,
  this.height,
  this.margin = const EdgeInsets.all(0),
  this.padding = const EdgeInsets.all(0),
  this.color,
  this.baseColor,
  this.gradient,
  this.baseGradient,
  this.shape = const Shape(),
  this.peek = Peek.DEFAULT,
  this.tapSpec = const TapSpec(),
  this.filter = Filter.DEFAULT,
  this.duration = const Duration(milliseconds: 500),
  this.curve = Curves.easeIn,
  this.child,
  this.clipBehavior = Clip.hardEdge,
  Key? key,
}) : super(key: key);