Flutter opacity gradient

by

Flutter Opacity Gradient

In Flutter, you can apply opacity and gradients to create visually appealing user interfaces. Opacity refers to the transparency level of a widget, while gradients are used to smoothly blend multiple colors together. Let’s dive into each concept with examples.

1. Opacity:

Opacity can be applied to any widget by using the Opacity widget in Flutter. It takes two arguments: opacity and child. The opacity value ranges from 0.0 (completely transparent) to 1.0 (fully opaque).

Example:


Opacity(
  opacity: 0.5,  // 50% opacity
  child: Container(
    color: Colors.blue,
    height: 100,
    width: 100,
  ),
)

In this example, the container with a blue background color will be rendered with 50% opacity, allowing the underlying content to still be partially visible.

2. Gradient:

Gradients are essential for creating smooth color transitions in Flutter. There are two main types of gradients: LinearGradient and RadialGradient. Both can be used within a Container widget’s decoration property.

LinearGradient: To create a linear gradient, you need to specify an array of colors and, optionally, an array of stops to define the color transitions. The begin and end properties define the direction of the gradient.

Example:


Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.red],
      stops: [0.0, 1.0],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

In this example, a linear gradient is applied to a Container that transitions from blue to red. The stops array dictates where the transition points occur (0.0 being the start and 1.0 being the end).

RadialGradient: A radial gradient creates a circular gradient that radiates outwards from a center point. Similar to a linear gradient, you have to specify the colors array and, optionally, the stops array.

Example:


Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [Colors.yellow, Colors.orange],
      stops: [0.0, 1.0],
      center: Alignment.center,
      radius: 1.5,
    ),
  ),
)

In this example, a radial gradient is applied to a Container that transitions from yellow to orange. The center property defines the center of the gradient, and the radius specifies the outermost circle size.

Leave a comment