mirror of
https://github.com/PoojaB26/FlutterBasicWidgets.git
synced 2026-04-05 14:29:05 +08:00
Added StackWidget
This commit is contained in:
@@ -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(),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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
180
lib/stack_widget.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
*
|
||||
* */
|
||||
Reference in New Issue
Block a user