Scribd
Upload
3 views3 pages

Container and SizedBox

Uploaded by

velampudiv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views3 pages

Container and SizedBox

Uploaded by

velampudiv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Container and SizedBox

containers and sized box hold children and hold blocks.nothing but they hold
placeholders.

in child we give the sizedbox as

child:Sizedbox()

here by typing the ctrl+spacebar to know the parameters available in the sized box.
(in sized box we can not able to add color to it).idth
we can add height to it as

body:Center(
child:Sizedbox(
height:50,
width:50,
child:Text('hello'))

here without the color we cannot define the position of aa sized box in the body.

so that's the reason we are using the text to define the postion in the body.

if you remove the center in the above syntax you can see the text in left corner.

*Drawbacks*
1) could no add color to it.
2) could add border radius to it.
3) you can't change the shape of box.

here the draw backs are retrived in the Container Box.

for now let's replace the sized box with the container.

body:Container(
height:50,
width:50,
color:Colors.green,
child:Center(child: Text('hello',style:Textstyle(fontsize:20 )))

(by using this the colour of the box is created and the fontsize changed in the
output)

here by using the center in the text so we can see the text in center in
thecontainer.

no we are getting to know about the decoration.

body:Container(
height:50,
width:50,

decoration:BoxDecoration(color:Colors.green,Shape:Boxshape.Circle,
borderRadius:BorderRadius.circular(20)
child:Center(child: Text('hello',style:Textstyle(fontsize:20 )))

by using the decoration parameter we can see the adding of color in the box.
we cannot color parameter two times like one is near the width and another one is
box decoration we can only use in the decoration parameter that you can see in the
above syntax.

by using the borderradius we can define the box shape as if you give the
circular(20) in the decorationbox you can see the side curves in the box.

borderRadius=BorderRadius.only(topleft:Radius circular(20)))

here by using the above term we can define the border radius to only one corner.

you can also add one more in this is

borderRadius=BorderRadius.only(topleft:Radius
circular(20),Bottomright:Radius.circular(20))),

now we are going to learn about the Box shadows.

boxShadow:[ BoxShadow(blurRadius:20, spraedRadius:5,color:Colors.black)]

lets know about the padding and margin parameters.

body:Container(
padding:EdgeInsets.all(10),

here the padding gives the space inside the box we created.

margin:Edgeinsets.all(10)

we took the raw code from the akshit madan.

import 'package:flutter/material.dart';

class Container_Sized extends StatelessWidget {


const Container_Sized({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// backgroundColor: Colors.black,
title: Text('Container and SizedBox'),
),
body: Center(
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.blue,
// shape: BoxShape.circle,
// borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
blurRadius: 20, spreadRadius: 5, color: Colors.black)
]),
child: Center(
child:
Container(margin: EdgeInsets.all(10), color: Colors.red)
// Text('Hello', style: TextStyle(fontSize: 20))
)),
)
// SizedBox(height: 100, width: 50, child: Text('Hello')),
);
}
}

You might also like