Box Decoration in Flutter 3 , Decorate container in flutter 3

14-Sep-2024

Hello Developes in this tutorial we will discuss about how you can decorate container in flutter .

S.no	Contents-topics
1	What is Container
2	Box decoration properties
3	Border radius with only

1:What is Container

Container is assume as empty box where you can put your items in the form of widgets like Text(),Column(),Row() and other widgets . Using container we can add padding , margin and much more with box-decoration.

2:Box decoration properties

Box decoration comes with several properties like color,image,border,borderRadius,box shadow,gradient,boxshape .

Container widget can be used by any child or within children of Column() and Row(),
code for container : Copy

child: Container(

height: 200.0,

width: 200.0,

decoration: BoxDecoration(

color: Colors.blueAccent,

border: Border.all(

color: Colors.black,

width: 2.0,

borderRadius: BorderRadius.circular(10.0),

gradient: const LinearGradient(

colors: [Colors.indigo, Colors.blueAccent]),

boxShadow: [

const BoxShadow(

color: Colors.grey,

blurRadius: 4.0,

offset: Offset(10.0, 10.0))

]),

Also read: WHAT IS FLUTTER & DART , WHY TO CHOOSE FLUTTER , FLUTTER FEATURES.

3: Border radius with only

To applying border-radius on the side specifies we can implement by using BorderRadius.only()
code for border radius: Copy

decoration: BoxDecoration(

color: Colors.blueAccent,

border: Border.all(

color: Colors.black,

width: 2.0,

borderRadius: const BorderRadius.only(

topRight: Radius.circular(50),

bottomLeft: Radius.circular(50)),

gradient: const LinearGradient(

colors: [Colors.indigo, Colors.blueAccent]),

boxShadow: const [

BoxShadow(

color: Colors.grey,

blurRadius: 4.0,

offset: Offset(10.0, 10.0))

]),

Tags: add margin in container in flutter 3 , box shadow in container , border radius in container in flutter 3,flutter, mobile app development, dart, UI, widgets, framework, cross-platform, iOS, Android, web, desktop, Fuchsia, Material Design, Cupertino, animation, state management, reactive programming, asynchronous programming.,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.