Description of the container
Container is a very common Container component. It contains the normal Padding, BoxDecoration, DecorationImage, Border, BoxShaow, Transform, and so on.
The constructor
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
Copy the code- Alignment Child Alignment(0.0,0.0) indicates the center of the rectangle. The distance from -1.0 to +1.0 is the distance from one side of the rectangle to the other. Thus, 2.0 units horizontal (or vertical) are equal to the width (or height) of the rectangle.
- Padding is used to fill the container. Child and alignment may conflict, but in the end, padding is dominant. Vertical or horizontal padding can be filled vertically or horizontally, and only one direction is filled
- (color: new BoxDecoration) (color: decoration) (color: new BoxDecoration) (color: new BoxDecoration
- Decoration is defined by such an abstract interface that provides all decorations. You can use boxDEcoration, which provides a variety of decoration capabilities
BoxDecoration constructor
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
Copy the code- Color Background color
- The background image is defined using a DecorationImage:
DecorationImage constructor
const DecorationImage({
@required this.image,
this.colorFilter,
this.fit,
this.alignment = Alignment.center,
this.centerSlice,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,})Copy the code- Image is the image source, which can be subclassed as follows: AssetBundleImageProvider FileImage MemoryImage NetworkImage select a NetworkImage
The NetworkImage constructor
const NetworkImage(this.url, { this.scale = 1.0 , this.headers })
Copy the code- Url is the address of the network image
- Scale: The larger the value, the smaller the image
- Headrs requests header information for the image
- ColorFilter colorFilter
- How does FIT fill an image into a container such as contain as large as possible, but contain the image completely inside the target box
- Alignment Aligns an image in a range
- Repeat the direction of the picture repeat, repeat means both x and y axes are repeated and repeatX means repeat in x direction
- MatchTextDirection Whether to draw in TextDirection
- Border border can draw the color, width, etc. of the top, bottom, left, and right independent borders independently. Of course, it can also use encapsulated such as all to draw the border directly
- BorderRadius rounded corner drawing
- BoxShadow A list of box shadows whose shape varies with the box boxShadow definition
BoxShadow constructor
const BoxShadow({
Color color = const Color(0xFF000000),
Offset offset = Offset.zero,
double blurRadius = 0.0.this.spreadRadius = 0.0
Copy the code- Color shadow color
- Offset The offset of the shadow relative to the box
- BlueRadius shadow blur
- SpreadRadius is similar to the expansion of the shadow, which can be interpreted as the size of the shadow
- Gradient class, generally use LinearGradient
LinearGradient constructor
const LinearGradient({
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
@required List<Color> colors,
List<double> stops,
this.tileMode = TileMode.clamp,
})
Copy the code- Begin Indicates the start position of the asymptotic variable
- End Indicates the end position of the asymptotic variable
- Colors The base color of the gradient
- TileMode defines the edge of the gradient versus the repeat of the image
- Shape shape
- foregroundDecoration
- Width the width of the
- Height height
- Constraints Limits the container size using BoxConstraints
BoxConstraints constructor
Const BoxConstraints({this.minWidth = 0.0, this.maxWidth = double. Infinity, this.minHeight = 0.0, const BoxConstraints({this.minWidth = 0.0, this.maxWidth = double. this.maxHeight = double.infinity });Copy the code- MinWidth Minimum width
- MaxWidth Maximum width
- MinHeight Minimum height
- MaxHeight Maximum height
- Margin Padding outside the container
- Transform Performs the matrix transformation operation on the container
- The child child components
Example construction and annotation details
The following implementation of a tilted full screen mobile phone task running interface:
// Container learning
import 'package:flutter/material.dart';
class ContainerLearn extends StatelessWidget {
final _textStyle = TextStyle(
color: Colors.white,
fontSize: 20,
letterSpacing: 4,
wordSpacing: 4,
shadows: [
Shadow(color: Colors.black87, offset: Offset(5.5), blurRadius: 8)]);@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Container'),),// A handy widget that combines common drawing, positioning, and small and large widgets.
body: new Container(
// Control the position of the child in the container
// Aliment(0.0,0.0) denotes the center of the rectangle. The distance from -1.0 to +1.0 is the distance from one side of the rectangle to the other. Thus, 2.0 units horizontal (or vertical) are equal to the width (or height) of the rectangle.
alignment: Alignment(0.1),
// In a container, child and alignment may conflict, but in the end, it is still padding-dominant. Vertical or horizontal padding can be filled in both the upper, lower, left and right directions, and only is filled in one direction
padding: EdgeInsets.symmetric(vertical: 60, horizontal: 75),
// new BoxDecoration(color: decoration) : new BoxDecoration(color: color
// color: Colors.blueAccent,
// An abstract interface defined by this class that provides all decoration can be used with boxDEcoration, which provides a variety of decoration capabilities
decoration: BoxDecoration(
// Background color
color: Colors.blueAccent,
// Background image
image: DecorationImage(
// Available subclasses: AssetBundleImageProvider FileImage MemoryImage NetworkImage
image: NetworkImage(
'https://flutter.cn/assets/get-started/ios/hello-world-ed7cf47213953bfca5eaa74fba63a78538d782f2c63a7c575068f3c2f7298bde. png'.// Image scale, the larger the value, the smaller the image scale
scale: 3.0.// Request header information for the image
headers: {
'User-Agent':
'the Mozilla / 5.0 (Windows NT 6.1; Win64; X64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'
}),
// Color filter, here to overlay a black12 filter
colorFilter:
ColorFilter.mode(Colors.black12, BlendMode.srcOver),
// How to contain an image into a container, e.g. contain as much as possible, but contain the image completely inside the target box
fit: BoxFit.none,
// Align the image in the range
alignment: Alignment.center,
// For the stretchable image slice operation? Is not very good
/ / centerSlice: the Rect fromLTRB,3,3,3 (3)
// Repeat both x and y and repeat x in x direction
repeat: ImageRepeat.repeatX,
// Whether to draw in TextDirection
matchTextDirection: false),
// The Border BoxDecoration abstract class uses the subclass Border BorderDirectional
// Border can be used to draw independent Border color, width, etc
border: Border.all(
color: Colors.black87,
width: 2.0.// Border style
style: BorderStyle.solid),
/ / the rounded
borderRadius: BorderRadius.circular(30),
// A shaded list of boxes, whose shape varies with the box
boxShadow: <BoxShadow>[
BoxShadow(
// Color shadow color offset The offset of the shadow relative to the box, blueRadius shadow blur degree spreadRadius similar to the expansion of the shadow, can be understood as the size of the shadow
color: Colors.black45,
offset: Offset(8.8),
blurRadius: 7,
spreadRadius: 7)].// Gradient Abstract class defines the LinearGradient class
gradient: LinearGradient(
// The starting position of the gradient offset
begin: Alignment(- 1.0),
// The end of the gradient offset
end: Alignment(1.0),
// The base color of the drawing
colors: <Color>[Colors.purple, Colors.blue[900]],
// create a linear gradient from 0 to 1.0
/ / stops: < double > [0.6].
// Define the edge of the gradient to contrast the image repeat
tileMode: TileMode.clamp),
/ / shape
shape: BoxShape.rectangle),
// Foreground decoration
foregroundDecoration: BoxDecoration(),
/ / the length
width: 224./ / height
height: 486.// Limit the size of the container
constraints: BoxConstraints(
// Set the width as large as possible
// minWidth: double.infinity,
// Minimum height 20
minHeight: 20.// Maximum width 300
maxWidth: 300,),// Fill the container
margin: EdgeInsets.symmetric(vertical: 20, horizontal: 0),
// Implement the Matrix transformation operation on the container, Matrix is a 4D Matrix
transform: Matrix4.skewY(0.3).. rotateZ(3.14 / 12.0),
child: Icon(
Icons.close,
color: Colors.white70,
semanticLabel: 'Close',))); }}Copy the codeEffect of structure
