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