..........................................................................................................................................................................................................................................
Example: #1 [Basic Stack]
..........................................................................................................................................................................................................................................
Example: #1 [Basic Stack]
import 'package:flutter/material.dart'; void main()=>runApp(MaterialApp(home: MyApp(),)); class MyApp extends StatefulWidget{ @override MyAppState createState()=>MyAppState(); } class MyAppState extends State<MyApp>{ @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body: Stack( children: <Widget>[ Container( width: 200, height: 200, color: Colors.amber, ) ], ), ); } }..........................................................................................................................................................................................................................................
Example: #2 [Center ]
import 'package:flutter/material.dart'; void main()=>runApp(MaterialApp(home: MyApp(),)); class MyApp extends StatefulWidget{ @override MyAppState createState()=>MyAppState(); } class MyAppState extends State<MyApp>{ @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body: Center( child: Stack( children: <Widget>[ Container( width: 200, height: 200, color: Colors.amber, ) ], ), ) ); } }
Example: #3[One each other]
import 'package:flutter/material.dart'; void main()=>runApp(MaterialApp(home: MyApp(),)); class MyApp extends StatefulWidget{ @override MyAppState createState()=>MyAppState(); } class MyAppState extends State<MyApp>{ @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body: Center( child: Stack( children: <Widget>[ Container( width: 200, height: 200, color: Colors.amber, ), Container( width: 150, height: 150, color: Colors.green, ), Container( width: 100, height: 100, color: Colors.red, ), ], ), ) ); } }
..........................................................................................................................................................................................................................................
Example: #4[stack widget and alignment]
Example: #4[stack widget and alignment]
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.white)),
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp()))};
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Stack(
// alignment: Alignment.topCenter,
//alignment: Alignment.topRight,
//alignment: Alignment.centerLeft,
//alignment: Alignment.centerRight,
//alignment: Alignment.bottomLeft,
//alignment: Alignment.bottomRight,
alignment: Alignment.bottomCenter,
children: [
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.green,
),
],
),
),
);
}
}
..........................................................................................................................................................................................................................................
Example: #5
Example: #5
import 'package:flutter/material.dart';
void main() => {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp()))};
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Stack(
//fit: StackFit.loose,
// default value is loose
// fit: StackFit.expand,
overflow: Overflow.visible,
//clipBehavior: Clip.none,
alignment: Alignment.topLeft,
children: [
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
Positioned(
top: 50,
left: 50,
//top: 200,
//left: 200,
child: Container(
width: 200,
height: 200,
color: Colors.green,
),
)
],
),
),
);
}
}
..........................................................................................................................................................................................................................................
Example: #6
Example: #6
..........................................................................................................................................................................................................................................
Example: #7
Example: #7
..........................................................................................................................................................................................................................................
Example: #8
Example: #8
No comments:
Post a Comment