Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Shape in Android makes it easy to build resource files for rounded corners, strokes, fills, and gradients. So how should these effects be achieved in Flutter? This article describes how to achieve these effects in Flutter:

  • Rounded corners
  • stroke
  • fill
  • The gradient
  • shadow

The Container control is used to set the background or foreground of the Flutter control. The Container control itself provides no configuration properties for combinations of other Container class components. The implementation of the shape function is set in the decoration property.

Shape with corners

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      borderRadius: BorderRadiusDirectional.circular(10),
      color: Colors.blue),
),
Copy the code

This code gives the text a background of 10 rounded corners, with the borderRadius value in the BoxDecoration object acting as the Cornes label in the Shape. BorderRadiusDirectional constructor BorderRadiusDirectional. Only can be set separately to the four corners radius, there is not much more. Here is the effect of setting rounded corners.

Shape with stroke

The stroke property is used to stroke resource file edges, setting the width, color, and line type of the edge. Here’s how Flutter works:

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),
)
Copy the code

The stroke function of shape is implemented in Flutter via the border property of BoxDecoration. The border value, BorderDirectional, sets the padding state of the four edges including the color, width, and whether the line is filled. Here is the stroke effect:

Fill (Shape implemented with solid)

To fill a Flutter box, set the color property of the box decoration:

Shape (gradient)

In Android Shape, there are linear, radial, and sweep styles, which correspond to three subclasses of the gradient classes in Flutter.

Here’s how they did it, and how it worked:

LinearGradient

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

One thing to note here is that when gradient is set the fill color will be disabled.

SweepGradient

I’m going to leave that code out and just replace the LinearGradient.

RadialGradient

As with SweepGradient, go straight to the image:

shadow

The main ways to implement shadows in Flutter include.9 diagrams and layer-list, while the main ways to implement shadows in Flutter rely on the BoxShadow class.

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),
)
Copy the code

The BoxShadow properties are easy to understand, such as color: the color of the shadow, offset: the dx and dy offsets of the shadow, and the rounded corners of the shadow.

The above is a brief description of the functions that can be completed to implement shape in Flutter. We will further study how to draw and render decoration in the future. Thank you for reading.