Box Decoration Flutter Example

January 29, 2021December 25, 2021 Dhrumil Shah 0 Comments border, border radius, box decoration, box decoration flutter, box shadow, boxdecoration, container border flutter, decoration box, gradient, image, shape

In this article, you will learn how to use box decoration widget in container widget to customize UI in flutter applications. We can integrate Box Decoration widget with decoration property in container widget.

Box Decoration widget has different properties like gradient, border, shape, image, box shadow etc. Using gradient property, we can set gradient background in container widget. We can also set border around container widget using border property. There are different types of borders.

We can also change radius of border around container widget. We can give circular, elliptical, horizontal or vertical border radius to container. There are two types of shapes in box decoration widget: Rectangle and Circle. We can also set box shadow over container box using different types like blur radius, spread radius etc.

We can also integrate custom image in container widget using decoration property. We can align this image using alignment property. We can also scale this image using fit attribute. There are also many other properties in DecorationImage widget like centerSlice, repeat, colorFilter, matchTextDirection etc.

Box Decoration Flutter Gradient

Flutter Gradient Colors

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Gradient Begin End

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Gradient Tile Mode

Flutter Tile Mode Clamp

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            begin: Alignment(-1.0,-1.0),
            end: Alignment(-0.5,-0.5),
            tileMode: TileMode.clamp
        ),
    ),
    width: 200,
    height: 200,
),

Flutter TileMode Mirror

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            begin: Alignment(-1.0,-1.0),
            end: Alignment(-0.5,-0.5),
            tileMode: TileMode.mirror
        ),
    ),
    width: 200,
    height: 200,
),

Flutter TileMode Repeated

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            begin: Alignment(-1.0,-1.0),
            end: Alignment(-0.5,-0.5),
            tileMode: TileMode.repeated
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Gradient Stops

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.25,0.5]
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Gradient Radial

Container(
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.deepOrangeAccent, Colors.green],
            center: Alignment.centerLeft,
            radius: 0.4,
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Image

Flutter Decoration Image

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        )
    ),
    child: Container(
        width: 200,
        height: 200,
     )
),

Flutter Image Center Slice

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            centerSlice: Rect.fromLTWH(100.0, 100.0, 1000.0, 1000.0),
        )
    ),
    child: Container(
        width: 250,
        height: 250,
    )
),

Flutter Image Color Filter

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            colorFilter: ColorFilter.mode(Colors.blue.withOpacity(0.5), BlendMode.color),
        )
    ),
    child: Container(
        width: 200,
        height: 200,
    )
),

Flutter Image Fit

Image Fit Contain

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.contain
        )
    ),
),

Image Fit Cover

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.cover
        )
    ),
),

Image Fit Fill

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.fill
        )
    ),
),

Image Fit Height

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.fitHeight
        )
    ),
),

Image Fit Width

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.fitWidth
        )
    ),
),

Image Fit None

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.none
        )
    ),
),

Image Fit Scale Down

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            fit: BoxFit.scaleDown
        )
    ),
),

Flutter Image Repeat

Image No Repeat

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            repeat: ImageRepeat.noRepeat
        )
    ),
    width: double.infinity,
    height: double.infinity,
),

Image Repeat

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            repeat: ImageRepeat.repeat
        )
    ),
    width: double.infinity,
    height: double.infinity,
),

Image RepeatX

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            repeat: ImageRepeat.repeatX,
        )
    ),
    width: double.infinity,
    height: double.infinity,
),

Image RepeatY

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
             repeat: ImageRepeat.repeatY
        )
    ),
    width: double.infinity,
    height: double.infinity,
),

Flutter Image MatchTextDirection

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
            matchTextDirection: true)
    ),
    width: 200,
    height: 200,
),

Box Decoration Flutter Border

Flutter Border All

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0)
    ),
    width: 200,
    height: 200,
),

Flutter Border Class

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border(
            bottom: BorderSide(width: 5.0, style: BorderStyle.solid),
        ),
    ),
    width: 200,
    height: 200,
),

Flutter Border Directional Class

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: BorderDirectional(
            bottom: BorderSide(width: 5.0, style: BorderStyle.solid),
            end: BorderSide(width: 5.0, style: BorderStyle.solid),
        ),
    ),
    width: 200,
    height: 200,
),

Box Decoration Flutter Border Radius

Flutter Border Radius Circular

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0),
        borderRadius: BorderRadius.circular(20.0),
    ),
    width: 200,
    height: 200,
),

Flutter Border Radius Only

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0),
        borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0)),
    ),
    width: 200,
    height: 200,
),

Flutter Border Radius All

Scaffold(
    body: Center(
        child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(‘images/logo.png’),
                ),
                border: Border.all(width: 5.0),
                borderRadius: BorderRadius.all(Radius.circular(20.0)),
            ),
            width: 200,
            height: 200,
        ),
    ),
);

Flutter Border Radius Horizontal

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0),
        borderRadius: BorderRadius.horizontal(left: Radius.circular(20.0)),
    ),
    width: 200,
    height: 200,
),

Flutter Border Radius Vertical

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0),
        borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
    ),
    width: 200,
    height: 200,
),

Flutter Border Radius Elliptical

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(‘images/logo.png’),
        ),
        border: Border.all(width: 5.0),
        borderRadius: BorderRadius.only(topLeft: Radius.elliptical(35,15), bottomRight: Radius.elliptical(35,15)),
    ),
    width: 200,
    height: 200,
),

Box Decoration Flutter Box Shadow

Flutter Box Shadow Color

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
                 BoxShadow(
                    color: Colors.pinkAccent,
                )
            ],
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Box Shadow Offset

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
                 BoxShadow(
                    color: Colors.pinkAccent,
                    offset: Offset(15.0, 10.0),
                )
            ],
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Box Shadow Blur Radius

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
                BoxShadow(
                    color: Colors.pinkAccent,
                    offset: Offset(15.0, 10.0),
                    blurRadius: 15.0,
                )
            ],
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Box Shadow Spread Radius

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
                BoxShadow(
                    color: Colors.pinkAccent,
                    offset: Offset(15.0, 10.0),
                    blurRadius: 15.0,
                    spreadRadius: 15.0,
                )
            ],
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Box Shadow Multiple

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
                BoxShadow(
                    color: Colors.blueAccent,
                    offset: Offset(25.0, 15.0),
                    blurRadius: 15.0,
                    spreadRadius: 10.0,
                ),
                BoxShadow(
                    color: Colors.amberAccent,
                    offset: Offset(10.0, 5.0),
                    blurRadius: 15.0,
                    spreadRadius: 10.0,
                ),
            ],
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Shape

Flutter Shape Rectangle

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),

Flutter Shape Circle

Container(
    width: 200.0,
    height: 200.0,
    child: Container(
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
                image: AssetImage(‘images/logo.png’),
            )
        ),
    ),
),