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.alignment has hard-coded recognition of all nine Alignment geometries and will determine which side(s) receive a special border treatment according to property 🔲 Peek.ratio.

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

Considering:

1. 🔰 Shape by 📐 CornerSpec
2. 👆 TapSpec
3. 🔛 padLayer initialized 📚 SurfaceLayer.MATERIAL for three effective container layers
4. 👓 Filter 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)

• Passing 🔲 Peek.ratio a value of 1 will negate any passed value to alignment.

• Similarly, passing ratio in the range 0..1 will actually make the 🔲 Peek.alignment 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.

---

❗ See Consideration in library surface.dart

Regarding 👓 Filter.filteredLayers and 📊 Filter.radiusMap values.

---

❓ Example

// Surface with a BASE that exposed more on bottom & right, (child set upper-left)
// with rounded corners and Theme fallback colors; is tappable with InkResponse
// (also Theme colors) but no vibration & `BouncyBall` splashFactory
final surface = Surface(
  peek: const Peek(
    alignment: Alignment.bottomRight,
    ratio: 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);