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.

Installing: #

Requirements: Flutter 3.47+ (material_ui). On older Flutter, use diagonal_decoration: ^1.2.0.

In your pubspec.yaml

dependencies:
  diagonal_decoration: ^2.0.0

The samples below use Colors from package:material_ui/material_ui.dart. Apps that haven't migrated to material_ui yet can keep package:flutter/material.dart.

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, // must be greater than 0
    )

    decoration: const MatrixDecoration(
       lineColor: Colors.black12,
       backgroundColor: Colors.white,
       radius: Radius.circular(12),
       lineWidth: 1,
       lineCount: 20,
    )

Both decorations work with AnimatedContainer, which animates between two decorations of the same type, and with Container(clipBehavior: ...), which clips the child to the rounded corners.

More from Yako #

Other Flutter packages from the same team:

settings_ui Settings screens that look native on every platform.	badges Badges for any widget: counters, dots, shapes and animations.	yako_celebrations Full-screen celebrations in one line: confetti, coins, fireworks, flames.
status_alert Apple-style status alerts that hide themselves.	full_screen_menu A full-screen menu with round gradient buttons.	yako_theme_switch An animated switch between light and dark themes.