Flutter Decoration background setting (frame, rounded corners, shading, shaping, a gradient, a background image, etc.)

1 to continue the relationship:

BoxDecoration: implement frame, rounded corners, shading, shaping, a gradient, a background image

ShapeDecoration: four sides to achieve the specified color and width, respectively, the bottom line, the edge color rectangle, circular edge color, stadium (vertical ellipse), angular (eight corner) side color

FlutterLogoDecoration: achieve Flutter picture

UnderlineTabindicator: Underline

2 describes
a decorative background object corresponding to the Android shape.xml, various custom background (border, rounded corners, shading, shaping, a gradient, a background image).

3 BoxDecoration Examples:
Constructor:

  const BoxDecoration ({
    this.color, // background
    this.image, // pictures
    this.border, edge color
    this.borderRadius, // angles round
    this.boxShadow, // shadow
    this.gradient, // Gradient
    this.backgroundBlendMode, // 混合Mode
    this.shape = BoxShape.rectangle,  // 形状
  })

Borders + 3.1 fillet:

decoration: new BoxDecoration(
  border: new Border.all (color: Color (0xFFFF0000), width: 0.5), // and color edge side width
  color: Color (0xFF9E9E9E), // background
  // borderRadius: new BorderRadius.circular ((20.0)), // round angle
  borderRadius: new BorderRadius.vertical (top: Radius.elliptical (20, 50)), // side can control the size of the fillet
),

3.2 Shadow:

decoration: new BoxDecoration(
border: new Border.all (color: Color (0xFFFF0000), width: 0.5), // and color edge side width
// shadows generated two layers, one green, one yellow, shadow position determined by the offset, the degree of shading blurred layer (transparent even more diffuse large) blurRadius determined by the size, determined by the size of the shadow blur spreadRadius
boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0), blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],
),

3.3 shape (circular and rectangular):

decoration: new BoxDecoration(
  border: new Border.all (color: Color (0xFFFFFF00), width: 0.5), // and color edge side width
  color: Color (0xFF9E9E9E), // background
  // shape: when not using borderRadius BoxShape.circle, // round, circular
  shape: BoxShape.rectangle, // the default value is rectangular
  borderRadius: new BorderRadius.circular ((20.0)), // round angle
),

 

3.4 gradient (annular, scanning, linear):

decoration: new BoxDecoration(
  border: new Border.all (color: Color (0xFFFFFF00), width: 0.5), // and color edge side width
// Render ring
  gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
// Scanning gradation
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
// linear gradient
//        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))
)

3.4 Background Image:

decoration: new BoxDecoration(
  border: new Border.all (color: Color (0xFFFFFF00), width: 0.5), // and color edge side width
  image: new DecorationImage(
  image: new ( 'https://avatar.csdn.net/8/9/A/3_chenlove1.jpg') NetworkImage, // Network Graphics
  // image: new AssetImage ( 'graphics / background.png'), the local picture
  fit: BoxFit.fill // fill
  // centerSlice: new Rect.fromLTRB (270.0, 180.0, 1360.0, 730.0), // fixed size
  ),
),

4 ShapeDecoration Examples:
Constructor:

const ShapeDecoration({
  this.color,
  this.image,
  this.gradient,
  this.shadows,
  @required this.shape,
})

In addition to shape, consistent with other BoxDecoration, shape Study:    

decoration: new ShapeDecoration(
  color: Color (0xFFFF00FF), // background
  // four sides uniform color and width
  shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
// four sides of the specified color and width, respectively, when only a bottom and consistent results UnderlineInputBorder
//          shape: Border(top: b, bottom: b, right: b, left: b)
// bottom line
//          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// edge of the rectangle color
//        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// circular edge color
//        shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
// stadium (vertical ellipse)
//        shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
// angular (eight corners) edge color
//          shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
),

Examples 5 FlutterLogoDecoration:
Constructor:

const FlutterLogoDecoration({
  this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]
  this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]
  this.textColor = const Color(0xFF616161),
  this.style = FlutterLogoStyle.markOnly,
  this.margin = EdgeInsets.zero,
}) 

This is not resolved, Flutter's logo, developed futile!

6 UnderlineTabindicator Examples:
Constructor:

const UnderlineTabIndicator({
  this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
  this.insets = EdgeInsets.zero,
})

This is relatively simple is underlined, the value may be set Insets (underlined high substrate control, left and right margins)

decoration: new UnderlineTabIndicator(
  borderSide: BorderSide(width: 2.0, color: Colors.white),
  insets: EdgeInsets.fromLTRB(0,0,0,10)
),

　　

Set left border wording alone

Container(
	decoration: BoxDecoration(
	   border: Border(
	       left: BorderSide(
	     	 width: 0.5, // width
		     color: Colors.red, // border color
		   ),
	 	 ),
	 ),
)

Disclaimer: This article is CSDN bloggers "Chen Ying has"