Diagonal Decoration

You can use plain color or gradient for backgrounds, but there is a third option that can make your app look more interesting. Use this DiagonalDecoration or MatrixDecoration to create custom backgrounds for your containers.


In your pubspec.yaml

  diagonal_decoration: ^1.0.2

Basic Usage:

Just add DiagonalDecoration or MatrixDecoration to your Container's decoration parameter

    return Container(
      width: 200,
      height: 200,
      decoration: DiagonalDecoration(),

Advanced usage

    decoration: const DiagonalDecoration(
       lineColor: Colors.black,
       backgroundColor: Colors.grey,
       radius: Radius.circular(20),
       lineWidth: 1,
       distanceBetweenLines: 5,

Check out other Yako packages: Badges, Settings UI, Status Alert, Full Screen Menu and more to come!


Custom box decoration with diagonals on the background