Preface:

This is the 27th day of my participation in the August More Text Challenge. In preparation for the Nuggets’ August challenge, I’m going to pick 31 components this month that I haven’t covered before for a full analysis and attribute presentation. These articles will serve as important material for future compilation of Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

This series Component articles The list of
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility 14. Padding 15. AnimatedContainer
16.CircleAvatar 17.PhysicalShape 18.Divider
Flexible, Expanded, and Spacer 20.Card 21.SizedBox
22.ConstrainedBox 23.Stack 24.Positioned
25.OverflowBox 26.SizedOverflowBox 27. DecoratedBox

1. Recognize the DecoratedBox component

The DecoratedBox component may not be used very often on its own because it is integrated into the Container component, but the use of decorations is common. The source code states that the DecoratedBox draws decorations on the foreground or background of its children. This shows that Decoration is the focus of Decoration, and we need to understand or define Decoration.

Below is DecoratedBox component class definition and construction method, it can be seen that it inherited from SingleChildRenderObjectWidget. The size decoration parameter must be passed, and the position parameter can be passed.

The member type of decoration is decoration, indicating the decoration object. The position member is of type DecorationPosition enumeration, indicating whether to draw in the foreground or background.

final Decoration decoration;
final DecorationPosition position;

enum DecorationPosition {
  background,
  foreground,
}
Copy the code

2. Recognize Decoration and its subcategories

The first thing to note is that Decoration is abstract and cannot be instantiated directly.

The Flutter framework provides four implementation classes, of which BoxDecoration is the most commonly used.

For example, the borderRadius of BoxDecoration can specify the rounded corners of the decoration and the color of the fill.

DecoratedBox(
  decoration: BoxDecoration(
      color: Colors.orangeAccent,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
        bottomLeft: Radius.circular(5),
        topRight: Radius.circular(5),
      ),
  ),
  child: buildContent(),
);

Widget buildContent() {
  return SizedBox(
    width: 80,
    height: 80,
    child: Icon(Icons.android, size: 50, color: Colors.white),
  );
}
Copy the code

Below is the constructor of BoxDecoration. In addition to rounded corners and colors, you can see that there are many other parameters, such as background images, borders, shadows, gradients, shapes, etc.

The following decorations smell like red epic fragments:

BoxDecoration(
    color: Colors.transparent,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
      bottomLeft: Radius.circular(5),
      topRight: Radius.circular(5),
    ),
    border: Border.all(color: Colors.red, width: 2),
    image: DecorationImage(
      image: AssetImage('assets/images/bg_6.jpeg'),
      fit: BoxFit.cover,
    ),
    boxShadow: [
      const BoxShadow(
          color: Colors.red,
          offset: Offset.zero,
          blurRadius: 2,
          spreadRadius: 2),]),Copy the code

There is also a ShapeDecoration subclass that, as the name suggests, does some shape manipulation. The incoming parameter must be passed a Shape parameter of type ShapeBorder. For ShapeBorder, see “Path in Hand, World I have”.

Test the Flutter with a built-in CircleBorder as follows:

DecoratedBox(
  position: DecorationPosition.background,
  decoration: ShapeDecoration(
    shape: CircleBorder(),
    shadows: const [BoxShadow(
        color: Colors.red,
        offset: Offset.zero,
        blurRadius: 2,
        spreadRadius: 2)],
    image: DecorationImage(
      image: AssetImage('assets/images/bg_6.jpeg'),
      fit: BoxFit.cover,
    ),
  ),
  child: buildContent(),
);
Copy the code
3. Customize decorations

A lot of people have asked me how to add dashed borders. It’s essentially asking how to decorate with a DecoratedBox by drawing a dotted line. The dash line decorator is implemented in my published Dash_painter package, so I’ll show you how to customize the decorator.

dependencies:
	...
	dash_painter: ^1.02.
Copy the code

import 'package:dash_painter/dash_decoration.dart';

DecoratedBox(
  decoration: DashDecoration(
      pointWidth: 2,
      step: 5,
      pointCount: 1,
      radius: Radius.circular(15),
      gradient: SweepGradient(colors: [
        Colors.blue,
        Colors.red,
        Colors.yellow,
        Colors.green
      ])),
  child: buildContent(),
);

Widget buildContent() {
  return SizedBox(
    width: 70,
    height: 70,
    child: Icon(
      Icons.add, color: Colors.orangeAccent, size: 40)); }Copy the code

Let’s take a look at the source code implementation of DashDecoration, which first defines configurable parameters and initializes them through constructors.

In DashDecoration you must implement the abstract method createBoxPainter, which returns a BoxPainter object.

Then inherit BoxPainter, pass in the configuration object, and draw in Paint. The process itself is very simple, the key is how to draw. The book “The Guide to Flutter Drawing” provides a systematic introduction to the basics of Flutter drawing for those who are interested.

4. Source code implementation of DecoratedBox

DecoratedBox inherited from SingleChildRenderObjectWidget, internal maintenance RenderDecoratedBox rendering objects to implement the decorative function.

The core code is the following paint method, which performs the drawing. The super. Paint (context, offset); The background is drawn before the child is drawn, i.e. as the background, the child is in front. And foreground overlays the child, that is, foreground. The brushes are created with the _decoration#createBoxPainter, which is the BoxPainter object.

That’s the end of this article. Thanks for watching and see you tomorrow