Flutter container components
summary
- Container components usually can only receive one child element, and add some modifications, transformations, restrictions, etc.
- Layout class components can receive one or more child elements, usually just sorting the child element processes.
Container
Width & height: you can set the width and height of components, with the highest priority.
Constraints: constraints. You can also specify the width and height of components.
Color: component background color.
Decoration: background decoration, mutually exclusive with the color attribute.
Padding & margin: the essence of inside margin and outside editing is realized through padding components.
Container( width: 100, height: 50, color: Colors.blue, margin: EdgeInsets.all(10), padding: EdgeInsets.all(10), alignment: Alignment.center, child: Text("hello world"), )
Container( margin: EdgeInsets.all(50), constraints: BoxConstraints.tightFor(width: 200, height: 150), decoration: BoxDecoration( gradient: RadialGradient( colors: [Colors.blue.shade800, Colors.blue.shade200], center: Alignment.center, radius: 0.5, ), boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2, 2), blurRadius: 2, ), ], ), transform: Matrix4.rotationZ(0.2), transformAlignment: Alignment.center, alignment: Alignment.center, child: Text("hello world"), )
Padding
Set the inside margin of the component.
EdgeInsets
EdgeInsets.all(): the inner margins in the four directions use the same inner margin.
EdgeInsets.fromLTRB(): different inner margins can be set at the same time.
EdgeInsets.symmetric(): set the horizontal or vertical inner margin at the same time.
EdgeInsets.only(): sets the inner margin of a direction.
Container( color: Colors.red, child: Padding( padding: EdgeInsets.all(10), child: Text("hello world"), ), ), Container( color: Colors.green, child: Padding( padding: EdgeInsets.fromLTRB(10, 20, 30, 40), child: Text("hello world"), ), ), Container( color: Colors.blue, child: Padding( padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20), child: Text("hello world"), ), )
DecoratedBox decoration
DecoratedBox can draw some decorations before or after sub components, such as background, border, gradient, etc.
DecoratedBox
Child: sets the child element.
position: set the background decoration or foreground decoration.
- DecorationPosition.background: background decoration
- DecorationPosition.foreground: foreground decoration
Decoration: decoration to be drawn.
BoxDecoration
It belongs to the subclass of Decoratin and is used for drawing decorative elements. Generally, BoxDecoration class is used directly.
Color: color.
Gradient: gradient.
borderRadius: fillet.
boxShadow: shadow, you can add more than one.
Shape: shape.
- BoxShape.rectangle: rectangle
- BoxShape.circle: circle
DecoratedBox( child: Padding( padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30), child: Text("land"), ), position: DecorationPosition.background, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.red, Colors.green, Colors.blue], ), borderRadius: BorderRadius.circular(3), shape: BoxShape.rectangle, boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2, 2), blurRadius: 4, ), ], ), ), SizedBox(height: 10), DecoratedBox( child: Padding( padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30), child: Text("land"), ), position: DecorationPosition.background, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.red, Colors.green, Colors.blue], ), shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2, 2), blurRadius: 4, ), ], ), )
Transform transform
Transform can add some special effects to child elements.
The change of Transform is in the drawing stage, not the layout stage, so the space occupied by sub components is unchanged.
translation
DecoratedBox( child: Transform.translate( offset: Offset(10, 10), //The default origin is the upper left corner, which translates 10 to the right and 10 to the down child: Text("hello world"), ), decoration: BoxDecoration(color: Colors.red), )
rotate
DecoratedBox( child: Transform.rotate( angle: math.pi / 2, //Select 90 degrees child: Text("hello world"), ), decoration: BoxDecoration(color: Colors.red), )
zoom
DecoratedBox( child: Transform.scale( scale: 2, child: Text("hello world"), ), decoration: BoxDecoration(color: Colors.red), )
tilt
Container( color: Colors.black, child: Transform( alignment: Alignment.topRight, transform: Matrix4.skewY(0.3), child: Container( padding: EdgeInsets.all(8), color: Colors.red, child: Text(" hello transform! "), ), ), )
RotatedBox
The function of RotatedBox is similar to that of Transform.rotate(), but the RotatedBox changes in the layout stage, so it will affect the position and size of sub components.
DecoratedBox( child: RotatedBox( quarterTurns: 1, child: Text("hello world"), ), decoration: BoxDecoration(color: Colors.red), )
Clip clipping
Fluent provides some clipping tools for clipping components.
ClipOval: clip to a circle.
ClipRect: clip to rectangle.
Clipprrect: clip to a rounded rectangle.
avatar, //Original image comparison ClipOval( child: avatar, ), ClipRect( child: avatar, ), ClipRRect( child: avatar, borderRadius: BorderRadius.circular(10), ),
Custom clipping
getClip(): sets the clipping area.
shouldReclip(): whether to re clip.
DecoratedBox( decoration: BoxDecoration(color: Colors.red), child: ClipRect( clipper: MyClipper(), child: avatar, ), )
class MyClipper extends CustomClipper<Rect> { @override Rect getClip(Size size) { return Rect.fromLTWH(0, 0, 30, 30); } @override bool shouldReclip(covariant CustomClipper<Rect> oldClipper) { return false; } }