1, no nonsense, first explosion take care of the effect

 

2, Decoration

The properties of Flutter Decoration can be set to include: background color, rounded corner shadow and gradient of the background image, similar to Shape in Android. The base class of Flutter Decoration has the following subclasses

  • BoxDecoration: Borders, rounded corners, shadows, shapes, gradients, background images
  • ShapeDecoration: Specify color and width, bottom line, rectangle, circle, stadium (vertical ellipse), and Angle (octagonal)
  • FlutterLogoDecoration: Flutter pictures
  • UnderlineTabindicator: underline

Here are the commonly used BoxDecoration constructors

Const BoxDecoration({this.color,// background color this.image,// picture this.border,// Stroke this.borderRadius,// Round size this.boxShadow,// Shadow This gradient, / / gradient enclosing backgroundBlendMode, blend mode this. / / image shape = Rectangle,// Rectangle, boxShape. circle and borderRadius cannot be used at the same time})Copy the code

BoxShadow shadow

  • Color – Shadow color
  • Offset – The offset of the shadow phase
  • Blurradius-gaussian blur value
  • SpreadRadius – Shadow expansion, this value I really do not know what to use, there is no scene, usually do not write this value

Gradient on the gradient

Supports 2 gradients: LinearGradient and RadialGradient scan gradient

  • That LinearGradient:
  • Begin – The position where the gradient begins
  • End – The position where the gradient ends
  • Colors – Gradient colors, which are arrays
  • A list of stops – values, with values ranging from 0.0 to 1.0
  • TileMode – Tiling mode

Shape shape

  • Rectangle is a rectangle, boxShape. circle is a circle, and boxShape. circle and borderRadius cannot be used together

3. Code testing

Effect 1 test code

@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), decoration: BoxDecoration(// background color: Colors. LightBlueAccent, // border: border. Color. YellowAccent, style: BorderStyle. Solid, width: 5), // New NetworkImage (' https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605, & gp = 0. 2864708693 & FM = 11 JPG '), fit: BoxFit.cover ), borderRadius: BorderRadius.all(Radius.circular(30)), boxShadow:[ BoxShadow( color: Colors.redAccent, offset: Offset(20, 20), blurRadius: 10, ), ] ), child: Container( height: 200, width: 200,), (,), (,); }}Copy the code

Effect 2 tests the code

@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: LinearGradient(colors:[color.blue, color.green]), // Background gradient color: LinearGradient(colors:[color.blue, color.green]), // background gradient color: BorderRadius: Borderradius. all(radius.circular (3)), boxShadow: [// BoxShadow(color: color.black54, offset: offset (2.0,2.0), blurRadius: 4.0)]), child: Padding(Padding: EdgeInsets. Symmetric (Horizontal: 80.0, vertical: 18.0), child: Text("chenyu", style: TextStyle(color: 0) Colors.white), ), ) ), ), ), ); }}Copy the code

Effect 3 test code

@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), decoration: BoxDecoration(// background color: border: border. All (color: Colors. YellowAccent, style: BorderStyle. Solid, width: Image: new DecorationImage(image: New NetworkImage (' https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605, & gp = 0. 2864708693 & FM = 11 JPG '), fit: BoxFit.cover ), shape: BoxShape.circle, ), child: Container( width: 200, height: 200, ), ), ), ), ); }}Copy the code