TiltProjectorContainer widget
Learn about TiltProjectorContainer widget parameters. TiltProjectorContainer widget will have tilt and projector-like shadow effects.
TiltProjectorContainer widget can only be used in the Tilt widget.
Apply a shadow to the entire child and childLayout, similar to a projector effect.
It will display a shadow that exactly matches the non-transparent parts of the widget.
Performance risk exists
Recommended for the following scenarios:
- Images only
- No data states
- No Hero tags
You should assess the performance risks yourself.
If your scenario runs smoothly, then you can use it.
Simple usage
...
final childLayout = ChildLayout(
outer: [
TiltParallax(
offset: Offset(20, 20),
child: Image.asset(
'assets/demo1.png',
width: xxx,
height: xxx,
),
),
TiltParallax(
offset: Offset(30, 30),
child: Image.asset(
'assets/demo2.png',
width: xxx,
height: xxx,
),
),
],
);
...
/// Tilt with TiltProjectorContainer for effects.
Tilt(
child: TiltProjectorContainer(
childLayout: childLayout,
child: SizedBox(width: 150, height: 300),
),
),
/// Tilt with built-in Tilt.projector for effects.
/// Tilt.projector is a convenient widget that composes Tilt and TiltProjectorContainer.
Tilt.projector(
childLayout: childLayout,
child: SizedBox(width: 150, height: 300),
),
...
TiltProjectorContainer widget parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
child required | Widget | - | The main child widget to which tilt and effects are applied. |
| childLayout | ChildLayout | ChildLayout() | Other child layouts. e.g. parallax outer, inner, behind. |
| shadowConfig | ShadowProjectorConfig | ShadowProjectorConfig() | Shadow effect config. |
| border | BoxBorder? | null | BoxDecoration border. |
| borderRadius | BorderRadiusGeometry? | null | BoxDecoration borderRadius. |
| clipBehavior | Clip | Clip.antiAlias | Clip behavior for the container. |
| filterQuality | FilterQuality? | null | Filter quality for the transform. |
ChildLayout
| Parameter | Type | Default | Description |
|---|---|---|---|
| outer | List<Widget> | <Widget>[] | As with Stack, you can use the Stack layout to create widgets that are outer of the child. e.g. parallax effects. |
| inner | List<Widget> | <Widget>[] | As with Stack, you can use the Stack layout to create widgets that are inner of the child. e.g. parallax effects. |
| behind | List<Widget> | <Widget>[] | As with Stack, you can use the Stack layout to create widgets that are behind of the child. e.g. parallax effects. |
ShadowProjectorConfig
| Parameter | Type | Default | Description |
|---|---|---|---|
| disable | bool | false | Only disable the shadow effect. |
| color | Color | Color(0xFF9E9E9E) | Shadow color. |
| minIntensity | double | 0.0 | Color minimum opacity, also initial opacity. |
| maxIntensity | double | 0.5 | Color maximum opacity as tilt progresses. |
| offsetInitial | Offset | Offset(0.0, 0.0) | Initial value of shadow offset. e.g. (0.0, 0.0) center. (40.0, 40.0) Offset 40 to the top left. |
| offsetFactor | double | 0.1 | Shadow offset factor, relative to current widget size. |
| direction | ShadowDirection? | null | Shadow direction. |
| enableReverse | bool? | null | Reverse shadow direction. |
| projectorScaleFrom | double | 1.0 | Size scale for minimum progress, also initial size scale. |
| projectorScaleTo | double | 1.0 | Size scale for maximum progress. |
| projectorBlurSigmaFrom | double | 5.0 | Blur sigma for minimum progress, also initial blur sigma. |
| projectorBlurSigmaTo | double | 10.0 | Blur sigma for maximum progress. |