Using Advanced Display Widgets
1. Using Opacity Widget
The Opacity widget in Flutter allows you to control the transparency of its child widget. It's useful for creating visual effects like fading or dimming elements.
| Property | Description | Values |
|---|---|---|
| opacity | Determines the transparency of the child widget. | double between 0.0 (fully transparent) and 1.0 (fully opaque) |
| child | The widget to be displayed with the specified opacity. | Any Widget |
Example: Using Opacity Widget
<Opacity
opacity: 0.5,
child: Text("This text is semi-transparent"),
/>
Note: The
Opacity widget does not affect the layout of other widgets; it only changes the visual appearance of its child.
2. Using Visibility Widget
| Property | Values | Description |
|---|---|---|
| visible | true | false |
Determines whether the widget is visible or hidden. |
| child | Widget |
The widget to be conditionally displayed. |
Note: The
Visibility widget does not remove the child from the tree, it only changes its visibility.
3. Using Offstage Widget
The Offstage widget is used to hide its child from the UI tree without removing it from the widget tree. It's useful for conditionally hiding widgets while keeping them in memory.
| Property | Description | Default Value |
|---|---|---|
| offstage | Whether the child is hidden from the UI tree. | false |
| child | The widget to be conditionally displayed or hidden. | null |
Example: Using Offstage to Hide a Widget
<Offstage
offstage: true,
child: Text("This text is hidden"),
>
Note: The
Offstage widget does not affect the layout of other widgets in the tree. It only hides the child from the UI.
4. Using IgnorePointer and AbsorbPointer Widgets
| Widget | Description | Key Properties | Use Case |
|---|---|---|---|
| IgnorePointer | Prevents child widgets from receiving pointer events but still renders them. | ignoring, child |
When you want to overlay a widget without interfering with touch interactions below. |
| AbsorbPointer | Prevents child widgets from receiving pointer events and also prevents them from being laid out. | absorbing, child |
When you want to completely block pointer interactions and prevent layout. |
Example: IgnorePointer in Action
<Stack>
<Container width: 200, height: 200, color: Colors.blue>
<Text "Tap me">
</Container>
<IgnorePointer
ignoring: true,
child: Container width: 100, height: 100, color: Colors.red>
</IgnorePointer>
</Stack>Example: AbsorbPointer in Action
<Stack>
<Container width: 200, height: 200, color: Colors.blue>
<Text "Tap me">
</Container>
<AbsorbPointer
absorbing: true,
child: Container width: 100, height: 100, color: Colors.red>
</AbsorbPointer>
</Stack>5. Using ClipRRect Widget
The ClipRRect widget in Flutter is used to clip its child using a rounded rectangle shape. It's particularly useful for creating circular or rounded image displays and other UI elements that require clipped content.
| Property | Description | Values |
|---|---|---|
| borderRadius | Defines the shape of the clip using a BorderRadius. |
BorderRadius |
| clipBehavior | Determines how the clipping is performed. | ClipBehavior |
| clipper | Custom clipper to define the clipping shape. | CustomClipper |
Example: Using ClipRRect to Clip an Image
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'assets/images/sample.jpg',
fit: BoxFit.cover,
),
)
Note: The
ClipRRect widget is ideal for creating circular or rounded corners in UI elements like images and cards.
6. Using ClipOval Widget
The ClipOval widget in Flutter is used to clip its child widget into an oval shape. It's particularly useful for creating circular or elliptical displays of images or content.
| Property | Description | Values |
|---|---|---|
| child | The widget to be clipped into an oval shape. | Widget |
Example: Using ClipOval to Display a Circular Image
<Image image="NetworkImage('https://example.com/image.jpg')" width="100" height="100">
Note: The
ClipOval widget does not scale its child to fit the oval shape. If you want to ensure that the content fits properly, consider using BoxFit.cover or similar properties in the child widget.
7. Using BackdropFilter Widget
Example: Applying BackdropFilter to a Widget
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 200,
height: 200,
color: Colors.white.withOpacity(0.5),
),
)| Property | Values | Description |
|---|---|---|
| filter | ImageFilter |
The filter to apply to the backdrop. Required. |
| child | Widget |
The widget to display behind the filter. Required. |
Note: The BackdropFilter widget applies a visual effect to the content behind it, which can be useful for creating frosted glass effects or other blur effects.
8. Using ShaderMask Widget
The ShaderMask widget in Flutter allows you to apply a shader effect to its child, enabling advanced visual effects like gradients, color filters, and custom rendering.
| Property | Description | Values |
|---|---|---|
| child | The widget to which the shader is applied. | Widget |
| shaderCallback | A function that returns a Shader to be applied. |
(Rect bounds) => Shader... |
| blendMode | The blend mode to use when applying the shader. | BlendMode |
Example: Applying a Gradient Shader
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.red, Colors.blue],
).createShader(bounds);
},
blendMode: BlendMode.srcIn,
child: Text(
'ShaderMask Example',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
)
Note: The
shaderCallback function is called with the bounds of the child widget, and must return a valid Shader object.
Warning: Shader effects can impact performance, especially with complex shaders or frequent updates. Use sparingly in animations or frequently updated UIs.
9. Using ColorFiltered Widget
Example: Applying a Color Filter to an Image
<ColorFiltered
colorFilter: ColorFilter.mode(Colors.red, BlendMode.modulate),
child: Image.asset('assets/images/sample.png'),
>| Property | Values | Description |
|---|---|---|
| colorFilter | ColorFilter |
Defines the color transformation to apply. |
| child | Widget |
The widget to which the color filter is applied. |
Note: The
ColorFilter.mode method allows you to specify a blend mode and color for filtering.
Warning: Applying a
ColorFilter to complex widgets may impact performance.
10. Using RotatedBox Widget
| Property | Values | Description |
|---|---|---|
| quarterTurns | 0, 1, 2, 3 |
Number of 90-degree rotations (0 = no rotation, 1 = 90° right, 2 = 180°, 3 = 90° left) |
| child | Widget | The widget to rotate |
Note: The
quarterTurns parameter is an integer that specifies how many quarter turns (90 degrees) to rotate the child widget. A value of 1 rotates 90 degrees clockwise, and a value of 3 rotates 90 degrees counter-clockwise.