Flutter - Using ShapeDecoration Examples

This tutorial shows you how to create ShapeDecoration in Flutter.

There are some Flutter widgets that allow you to pass arguments of type Decoration, such as Container, TableRow, and DataTable. One of the classes that extends Decoration is ShapeDecoration. In Flutter, ShapeDecoration is an immutable description of how to paint an arbitrary shape. It's usually used if you want to create a decoration with a particular shape. For example, displaying a profile picture in a circular shape. This tutorial explains how to create ShapeDecoration with some examples.

Using ShapeDecoration

To create a ShapeDecoration, you can use the constructor below.

  const ShapeDecoration({
    Color? color,
    DecorationImage? image,
    Gradient? gradient,
    List<BoxShadow>? shadows,
    required ShapeBorder shape,
  })

The only required argument is shape, for which you need to pass a ShapeBorder object. Below are the examples of how to pass the required and optional arguments.

Create ShapeBorder

For the required argument named shape, you need to pass a value whose type is ShapeBorder. That means you can use any class that extends ShapeBorder, such as CircleBorder and StadiumBorder.

  ShapeDecoration(
    shape: CircleBorder(),
    // other arguments
  )

Set Color

You can set the color for filling the shape by passing a Color value as the color argument.

  ShapeDecoration(
    shape: CircleBorder(),
    color: Colors.teal,
    // other arguments
  )

Output:

Set Gradient

You can set the gradient for filling the shape by passing the gradient. The value can be any type that extends Gradient such as LinearGradient, RadialGradien, and SweptGradient. Keep in mind that you can only set either color or gradient, but not both.

  ShapeDecoration(
    shape: CircleBorder(),
    gradient: RadialGradient(
      colors: [
        Colors.red,
        Colors.green,
        Colors.blue,
      ]
    ),
    // other arguments
  )

Output:

Set Image

You can set an image to be painted inside the shape by passing a DecorationImage as the image argument. The image will be painted in front of the background color or gradient.

  ShapeDecoration(
    shape: CircleBorder(),
    image: const DecorationImage(
      image: NetworkImage('https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png'),
      fit: BoxFit.cover,
    ),
    // other arguments
  )

Output:

Set Shadows

To add shadows around the shape, you can past a List of BoxShadows as the shadows argument.

  ShapeDecoration(
    shape: CircleBorder(),
    color: Colors.teal,
    shadows: [
      BoxShadow(
        color: Colors.grey,
        offset: new Offset(10.0, 10.0),
        blurRadius: 10.0,
      ),
    ],
    // other arguments
  )

Output:

Using ShapeDecoration.fromBoxDecoration

Sometimes, you need to create a ShapeDecoration even though the shapes can be defined using BoxDecoration. In that case, you can create a ShapeDecoration from a BoxDecoration using the factory constructor below.

  ShapeDecoration.fromBoxDecoration(BoxDecoration source)

Example:

  ShapeDecoration.fromBoxDecoration(
    BoxDecoration(
      color: Colors.teal,
      border: Border.all(color: Colors.red),
    )
  )

Output:

ShapeDecoration - Parameters

• Color? color: The color to fill in the background of the shape.
• DecorationImage? image: The image to paint inside the shape.
• Gradient? gradient: The gradient for filling the shape.
• List<BoxShadow>? shadows: A list of shadows cast by the shape.
• required ShapeBorder shape: The shape to fill the color, gradient, and image into and to cast as the shadows.

Full Code

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: ShapeDecorationExample(),
        debugShowCheckedModeBanner: false,
      );
    }
  }
  
  class ShapeDecorationExample extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: ShapeDecoration(
              shape: CircleBorder(),
              // color: Colors.teal,
              gradient: RadialGradient(
                colors: [
                  Colors.red,
                  Colors.green,
                  Colors.blue,
                ]
              ),
              shadows: [
                BoxShadow(
                  color: Colors.grey,
                  offset: new Offset(10.0, 10.0),
                  blurRadius: 10.0,
                ),
              ],
              image: const DecorationImage(
                image: NetworkImage('https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png'),
                fit: BoxFit.cover,
              ),
            ),
            // decoration: ShapeDecoration.fromBoxDecoration(
            //     BoxDecoration(
            //       color: Colors.teal,
            //       border: Border.all(color: Colors.red),
            //     )
            // ),
          ),
        ),
      );
    }
  }

Summary

That's all about ShapeDecoration in Flutter. Basically, you need to define a shape, then you can fill the shape with color/gradient and image. You can also add shadows around the shape.

You can also read about:

• BoxDecoration: an immutable description of how to paint a box.