Container with full-device sized Flutter Logo |
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(25.0),
decoration: FlutterLogoDecoration(),
),
| |
Container with shadow, border, and child |
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(25.0),
decoration: new ShapeDecoration(
color: Colors.white,
shadows: [
BoxShadow(color: Colors.black, blurRadius: 15.0)
],
shape: new Border.all(
color: Colors.red,
width: 8.0,
),
),
child: Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),
),
| ![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con2.png) |
Rounded rectangle containers with border |
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(25.0),
decoration: new BoxDecoration(
color: Colors.yellow,
borderRadius: new BorderRadius.circular(55.0),
border: new Border.all(
width: 5.0,
color: Colors.red,
),
),
child: Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),
),
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con3.png) |
Container with alignment property |
Container(
margin: EdgeInsets.all(20.0),
width: double.infinity,
height: 300.0,
color: Colors.red,
alignment: Alignment.topRight,
padding: EdgeInsets.all(20.0),
child: FlutterLogo(size: 100.0,),
),
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con4.png) |
Container with minWidth and maxWidth Box Constraints |
Container(
margin: EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: 400.0,
minWidth: 200.0
),
width: 50.0,
alignment: Alignment.topCenter,
child: Image.network('https://picsum.photos/500/400'),
),
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con5.png) |
Container with List of Box Shadow |
Container(
height: 100.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.red, blurRadius: 12.0 ),
BoxShadow(color: Colors.green, blurRadius: 40.0)
]
),
)
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con6.png) |
Container with Image and Rounded Border |
Container(
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
image: DecorationImage(fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/200/300'))
),
)
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con7.png) |
Circular Container |
Container(
height: 200.0,
width: 200.0,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(200.0),
color: Colors.green,
),
child: Text('Hello'),
)
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con8.png) |
Container with Horizontal Radius of left and right Radius |
Container(
height: 200.0,
width: 200.0,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(20.0),
right: Radius.circular(80.0)
),
color: Colors.green,
),
child: Text('Hello'),
)
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con9.png) |
Container with Vertical Radius of top and bottom Radius |
Container(
height: 200.0,
width: 200.0,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20.0),
bottom: Radius.circular(80.0)
),
color: Colors.green,
),
child: Text('Hello'),
)
|
![](https://github.com/PoojaB26/FlutterBasicWidgets/raw/master/screenshots/con10.png) |