kudzues/FlutterBasicWidgets
1
0
Fork 0
mirror of https://github.com/PoojaB26/FlutterBasicWidgets.git synced 2026-04-05 14:29:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added Stack

Browse Source
This commit is contained in:
Pooja Bhaumik
2018-09-26 20:17:59 +05:30
committed by GitHub
parent cecd8eadda
commit 3f7875eeeb
1 changed files with 180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
README.md
View File

@@ -494,6 +494,186 @@ This is aimed for complete beginners in Flutter, to get them acquainted with the
</table>
## Stack
<table>
<tr><td> <b>Stack of overlapping containers of reducing size</b> </td></tr>
<tr>
<td>
<pre>
Stack(
children: <Widget>[
Container(
height: 300.0,
width: 300.0,
color: Colors.red,
),
Container(
height: 250.0,
width: 250.0,
color: Colors.green,
),
Container(
height: 200.0,
width: 200.0,
color: Colors.yellow,
)
],
),
</pre>
</td>
<td>
<img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk1.png" width = 200>
</td>
</tr>
<tr><td> <b>Playing with Alignment property</b> </td></tr>
<tr>
<td>
<pre>
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 300.0,
width: 300.0,
color: Colors.red,
),
Container(
height: 250.0,
width: 250.0,
color: Colors.green,
),
Container(
height: 200.0,
width: 200.0,
color: Colors.yellow,
)
],
),
</pre>
</td>
<td>
<img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk2.png" width = 200>
</td>
</tr>
<tr><td> <b>One child on top of another using Positioned</b> </td></tr>
<tr>
<td>
<pre>
Container(
height: 400.0,
//color: Colors.yellow,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 300.0,
width: 300.0,
color: Colors.red,
),
Positioned(
top: 0.0,
child: Container(
height: 250.0,
width: 250.0,
color: Colors.green,
),
),
],
),
),
),
</pre>
</td>
<td>
<img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk3.png" width = 200>
</td>
</tr>
<tr><td> <b>Playing with Positioned properties</b> </td></tr>
<tr>
<td>
<pre>
Container(
height: 400.0,
//color: Colors.yellow,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 300.0,
width: 300.0,
color: Colors.red,
),
Positioned(
top: 0.0,
bottom: 0.0,
child: Container(
height: 250.0,
width: 250.0,
color: Colors.green,
),
),
],
),
),
),
</pre>
</td>
<td>
<img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk4.png" width = 200>
</td>
</tr>
<tr><td> <b>Playing with Positioned</b> </td></tr>
<tr>
<td>
<pre>
Container(
height: 400.0,
width: 350.0,
//color: Colors.yellow,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 300.0,
width: 200.0,
color: Colors.red,
),
Positioned(
right: 0.0,
child: Container(
height: 250.0,
width: 150.0,
color: Colors.green,
),
),
],
),
),
),
</pre>
</td>
<td>
<img src = "https://github.com/PoojaB26/FlutterBasicWidgets/blob/master/screenshots/stk5.png" width = 200>
</td>
</tr>
</table>
## Contributors
Pooja Bhaumik <br>