Stack And Positioned.
stack widget is nothing but the a display screen on some other display screen.
here we to know about the stack
we have to make
process same up to the creation of the body
then after creation of the body the process will change.
body: Container(
color: Colors.blue,
child: Center(
child: Stack(
children: [
Container(height: 250,width: 300,color: Colors.green,)
here the Container is taken take the color in the block
after that the center is define to be the color block in the center of the block.
here we use the stack inside stack we use the children and inside the children we
use the container
we know that in the children we may use as many as containers and child we can
by using the stack we can say that it will arrange the block one on the another.
and coming to the positioned:
here we are using position to set the position in the screen.as
child: Stack(
children: [Positioned(
bottom:10,child:
Container(height: 250,width: 300,color: Colors.green,),),
Center(
child: Container(height: 150,width:150,color: Colors.red,)
)
hereby using the positioned parameter we can use
the bottom,right,left in the positioned paramters.
to keep the box in one positioned.
child: Stack(
children: [Positioned(
bottom:10,
left:10,
right:10,
child:
Container(height: 250,width: 300,color: Colors.green,),),
Center(
child: Container(height: 150,width:150,color: Colors.red,)
)
in the same way we can get that
body:Stack(
children: [
Positioned
(
bottom: 10,child: Container(child: Image.asset('assets/abc.png'),
))
here we used the image in the place of color block as before and now we are used
the images in the place of the
colors
we also use so many positons in the body
this is the raw code
import 'package:flutter/material.dart';
class StackWidget extends StatelessWidget {
const StackWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// backgroundColor: Colors.black,
title: Text('Stack'),
),
body: Stack(
children: [
Positioned(
child: Container(
height: 300,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/download.jpg'),
fit: BoxFit.cover)),
),
),
Positioned(
left: 20,
top: 20,
child: Container(height: 50, width: 50, color: Colors.yellow),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(height: 50, width: 50, color: Colors.yellow),
)
],
));
}
}
