Implementation of Shape function in Android in Flutter

Get into the habit of writing together! This is the 5th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Using shape in Android can easily build resource files to achieve rounded corners, strokes, fills and gradients. So how should these effects be achieved in Flutter? This article will introduce how to achieve these effects in Flutter:

• rounded corners
• stroke
• filling
• Gradient
• shadow

Flutter uses the Container control when setting the background or foreground of the control. It only provides specific configuration properties for the combination of other container class components, and the realization of shape-related functions is set in the decoration property.

Rounded corners (shape is implemented with corners)

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      borderRadius: BorderRadiusDirectional.circular(10),
      color: Colors.blue),
),
复制代码

This code implements setting a background with rounded corners of 10 for the text. The value of borderRadius in the BoxDecoration object is consistent with the function of the cornes label in the shape. The construction method of BorderRadiusDirectional BorderRadiusDirectional.only can set the radius to the four corners respectively, so I won't go into details here. Below is the effect of setting rounded corners.

Stroke (shape is implemented with stroke)

In Android, the stroke attribute is used to describe the edge of the resource file. It can set the width, color and line type of the edge. Then I will show you how to implement this function in Flutter:

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      border: BorderDirectional(
        top: BorderSide(
            color: Colors.orange,
            width: 5,
            style: BorderStyle.solid),
      ),
      color: Colors.blue),
)
复制代码

The function of stroke in shape is implemented in Flutter through the border property of BoxDecoration. The value of border BorderDirectional can set the filling state of the four sides including color, width and whether the line is filled. Here is the stroke effect:

Fill (shape is implemented with solid)

To fill the box in Flutter, you only need to set the color property of BoxDecoration:

Gradient (shape is implemented with gradient)

In the shape of Android, three gradient styles, linear (linear gradient), radial (radiative gradient), and sweep (scanning gradient) can be implemented, which correspond to the subclasses of the three gradient classes in Flutter.

Next, let's see how they are implemented, and what the effect is:

LinearGradient

Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [Colors.orange, Colors.greenAccent]),
      color: Colors.blue),
),
复制代码

There is a point to note here, the fill color set when the gradient color is set will be invalid.

SweepGradient

The code will not be posted, just replace LinearGradient.

RadialGradient

Like SweepGradient, go directly to the renderings:

shadow

The main ways to implement shadows in Andorid include .9 diagram and layer-list, while in Flutter, the BoxShadow class is mainly used. Let's take a look at the implementation:

Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(boxShadow: [
    BoxShadow(
        color: Colors.greenAccent,
        offset: Offset(5, 5),
        blurRadius: 10)
  ], color: Colors.blue),
)
复制代码

The properties of BoxShadow are very easy to understand, color: the color of the shadow, offset: the offset of the shadow has dx and dy, and the rounded corners of the shadow, etc.

The above is a brief implementation of the functions that shape can accomplish in Flutter. I will continue to do in-depth research on how decoration is drawn and rendered. Thank you for reading.