Scribd
Upload
6 views

Stack and Positioned.

Uploaded by

velampudiv
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

Stack and Positioned.

Uploaded by

velampudiv
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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),
)
],
));
}
}

You might also like