Flutter – BoxDecoration Widget

22 Jun, 2021
BoxDecoration is a build-in widget in flutter API. At a bare basic level, it describes how a box should be painted on the screen. The shape of the box needs not to be just a rectangle or a square it can circle also. It comes with a ton of properties we can add an image inside, add a radius to the border (if the shape is a rectangle), cast shadow to the box, etc. Below we will see all its properties and an example implementation of the BoxDecoration widget.
 const BoxDecoration(
{Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape: BoxShape.rectangle}
)
backgroundBlendMode: This property takes in the BlendMode enum as the object to this parameter. It applies a blending effect to the background color or gradient.
border: The border parameter takes in the BoxBorder class as the object to draw a border around the box.
borderRadius: This property takes in the BorderRadiusGeometry class as the object which in turn adds curves around the border corners if the box shape is a rectangle.
boxShadow: This property holds a list of BoxShadow widget as the object. It casts a shadow on the box.
color: This property takes in the Color class as the object to give a background color to the BoxDecoration widget.
gradient: This property takes in Gradient class as the object to apply a gradient filling inside the box.
image: This property adds an image over the background taking in the DecorationImage class as the object.
padding: This property takes in the EdgeInsetsGeometry class as the object to add empty space around the content inside the box.
shape: This property takes in the BoxShape as the object to decide the shape of the box.
Example: 
Dart
import 'package:flutter/material.dart'; //imported material design packagevoid main() {  runApp(    //Widget tree starts from here    MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],        ), //AppBar        body: Center(          child: Container(            width: 300,            height: 300,            //BoxDecoration Widget            decoration: BoxDecoration(              image: const DecorationImage(                image: NetworkImage(                    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'),                fit: BoxFit.cover,              ), //DecorationImage              border: Border.all(                color: Colors.green,                width: 8,              ), //Border.all              borderRadius: BorderRadius.circular(15),              boxShadow: [                BoxShadow(                  color: Colors.black,                  offset: const Offset(                    5.0,                    5.0,                  ), //Offset                  blurRadius: 10.0,                  spreadRadius: 2.0,                ), //BoxShadow                BoxShadow(                  color: Colors.white,                  offset: const Offset(0.0, 0.0),                  blurRadius: 0.0,                  spreadRadius: 0.0,                ), //BoxShadow              ],            ), //BoxDecoration          ), //Container        ), //Center      ), //Scaffold    ), //MaterialApp  );}
Output: 
Explanation: The parent widget in this app is Center which is holding the entire widget tree of the app body. The Center widget is holding Container widget as the child. The BoxDecoration widget is taken by the decoration property of the Container. The first element drawn inside the box is a NetworkImage with the help of image property. Then we have the border property which had assigned a 4 pixels thick green colored border around the box. And to add curves around the corners of the border we have the boderRadius property adding a curve of 15 px radius on each corner. And at last, we have the boxShadow property which has a list of two BoxShadow class to assign a white color background in the box (beneath the image) and a deep black-colored shadow outside the box.
rajeev0719singh
android
Flutter
Flutter-widgets
Android
Articles
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Android SDK and it's Components
Broadcast Receiver in Android With Example
Navigation Drawer in Android
Tree Traversals (Inorder, Preorder and Postorder)
SQL | Join (Inner, Left, Right and Full Joins)
find command in Linux with examples
Analysis of Algorithms | Set 1 (Asymptotic Analysis)
Time Complexity and Space Complexity