Flutter single child layout widgets
1) Center
This widget just centers it child widget with respect to its parent widget.
Constructor:
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
2)Container
Container is a single child widget. Container is a widget that allows you to customize the child widget. Container is useful when you want to add padding, margin, color, borders etc to the child widget.
Constructor:
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, double width, double height, Decoration decoration, Decoration foregroundDecoration, BoxConstraints constraints, Widget child, Clip clipBehavior: Clip.none });
decoration: This property allows the developer to add decoration on the widget. It decorates or paint the widget behind the child. If we want to decorate or paint in front of a child, we need to use the forgroundDecoration parameter. It is to make sure that we can either use the color property in a container or decoration, but not in both.
transform: This property is used to rotate the container.
Example:
Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( padding: EdgeInsets.all(16.0), width: 200, height: 200, alignment: Alignment.center, decoration: BoxDecoration( border: Border.all(color: Colors.black, width: 2), borderRadius: BorderRadius.circular(8), boxShadow: [ new BoxShadow(color: Colors.orange), ], ), child: Text("Example 1"), ), ), );
Output:
3) Padding
Creates a widget that insets its child. Padding can be provided by EdgeInsets class. The padding argument must not be null.
Constructor:
const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding != null), super(key: key, child: child);
Example:
const Card( child: Padding( padding: EdgeInsets.all(16.0), child: Text('Welcome to DroidBiz'), ), )
Align widget aligns its child within itself. The alignment defaults to Alignment.center.
Constructor:
const Align( {Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child} )
Example:
Center( child: Container( height: 200.0, width: 200.0, color: Colors.blue, child: Align( alignment: Alignment.topLeft, child: Text('DroidBiz'), ), ), )
5) SizedBox
SizedBox is defined as a box with specified size. The width and height can be defined as null. It is used to give specified size to the child widget.
Constructor:
const SizedBox( {Key key, double width, double height, Widget child} )
Example:
SizedBox( width: 300, height: 300, child: Container( color: Colors.blue, child: Text('DroidBiz', style: TextStyle(color: Colors.white)), ), )
You can use SizedBox to give empty space between the widget also. Like below example:
Column( children: <Widget>[ Text('Hello Friends'), SizedBox(height: 16), Text('Welcome to DroidBiz'), ], )
i) SizedBox.fromSize :Creates a box with specified size.
Constructor:
SizedBox.fromSize( {Key key, Widget child, Size size} )
Example:
SizedBox.fromSize( size: Size(300, 300), child: Container( color: Colors.blue, child: Text('DroidBiz', style: TextStyle(color: Colors.white)), ), )
This gives the same output as the previous example with width and height 300.
ii) SizedBox.expand
It creates a box with size as large as its parent widget allows. This named constructor is useful when you want to set width and height infinity.
Constructor:
const SizedBox.expand( {Key key, Widget child} )
Example:
SizedBox.expand( child: Container( color: Colors.blue, child: Text('DroidBiz', style: TextStyle(color: Colors.white)), ), )
6) FittedBox
It scales and positions the child widget according to the specified fit. The fit and alignment arguments must not be null. FittedBox restricts its child widgets from growing its size beyond a certain limit. It re-scales them according to the size available.
Constructor:
FittedBox({ Key key, BoxFit fit: BoxFit.contain, AlignmentGeometry alignment: Alignment.center, Clip clipBehavior: Clip.hardEdge, Widget child })
Example:
Container( decoration: BoxDecoration( border: Border.all(width: 1, color: Colors.orange), ), child: FittedBox( child: Text('Welcome to DroidBiz tutorials!!!') ), width: 100, height: 20, )
As shown in the above example, Container has fixed width and height. FittedBox scales down the text font so that large text 'Welcome to DroidBiz tutorials!!!' can be accommodated in Container.
7)AspectRatio
A widget that attempts to size the child to a specific aspect ratio.
Constructor:
AspectRatio({ Key key, @required double aspectRatio, Widget child })
Example:
Container( height: 200, child: new AspectRatio( aspectRatio: 4 / 3, child: new Container( color: Colors.red, ), ), )
8) ConstrainedBox
It imposes additional constraints on its child.
Constructor:
ConstrainedBox({ Key key, @required BoxConstraints constraints, Widget child })
Example:
ConstrainedBox( constraints: const BoxConstraints.expand(), child: const Card(child: Text('Hello World!')), )
It has the same behavior as SizedBox.expand.
Example:
ConstrainedBox( constraints: new BoxConstraints( minHeight: 50.0, minWidth: 50.0, maxHeight: 200.0, maxWidth: 200.0, ), child: new DecoratedBox( decoration: new BoxDecoration(color: Colors.blue), ), )
9) IntrinsicHeight & IntrinsicWidth
A widget that sizes its child to the child's intrinsic height and width. It is useful when you Want all the widgets inside Row or Column to be as tall/wide as the tallest/widest widget.
Without using IntrinsicWidth:
Center( child: Column( children: <Widget>[ RaisedButton( onPressed: () {}, child: Text('Short Text'), ), RaisedButton( onPressed: () {}, child: Text('Longer Text'), ), RaisedButton( onPressed: () {}, child: Text('The Longest text'), ), ], ), )
Output:
With IntrinsicWidth:
Center( child: IntrinsicWidth( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ RaisedButton( onPressed: () {}, child: Text('Short Text'), ), RaisedButton( onPressed: () {}, child: Text('Longer Text'), ), RaisedButton( onPressed: () {}, child: Text('The Longest text'), ), ], ), ), )
Output: