Added StackWidget

This commit is contained in:
PoojaB26
2018-09-26 19:13:09 +05:30
parent 5617243bfd
commit 929843bde8
3 changed files with 204 additions and 3 deletions

View File

@@ -4,7 +4,25 @@ class AppBarWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
appBar: AppBar(
backgroundColor: Colors.blueAccent,
title: new Text("Title"),
actions: [
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {},
),
],
iconTheme: IconThemeData(
color: Colors.white,
),
textTheme: TextTheme(
title: TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
),
body: Container(),
);
}

View File

@@ -5,7 +5,7 @@ import 'package:flutter_widgets/appar_widget.dart';
import 'package:flutter_widgets/column_widget.dart';
import 'package:flutter_widgets/row_widget.dart';
import 'package:flutter_widgets/button_widget.dart';
import 'package:flutter_widgets/stack_widget.dart';
void main() => runApp(new MyApp());
@@ -27,6 +27,8 @@ class MyApp extends StatelessWidget {
'Column' : (BuildContext context) => ColumnWidget(),
'Row' : (BuildContext context) => RowWidget(),
'Button' : (BuildContext context) => ButtonWidget(),
'Stack' : (BuildContext context) => StackWidget(),
},
);
@@ -38,7 +40,8 @@ class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
var widgetList = ["Text", "Appbar", "Container", "Column", "Row", "Button" ];
var widgetList = ["Text", "Appbar", "Container",
"Column", "Row", "Button", "Stack" ];
return Scaffold(
appBar: AppBar(

180
lib/stack_widget.dart Normal file
View File

@@ -0,0 +1,180 @@
import 'package:flutter/material.dart';
class StackWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: 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,
)
],
),
);
}
}
/*
* TODO Stack of Containers of reducing size
*
* 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,
)
],
),
*
* */
/*
* TODO Playing with Alignment property
*
* 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,
)
],
),
*
* */
/*
* TODO One child on top of another using Positioned
*
* 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,
),
),
],
),
),
),
*
* */
/*
* TODO Playing with Positioned
*
* 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,
),
),
],
),
),
),
*
*
* */
/*
* TODO Playing with Positioned
*
* 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,
),
),
],
),
),
),
*
* */