A Flutter package for making widgets with a pattern in the background. background patterns can be placed anywhere whether it is the background of a page or for example on a button



The example app running


The example app in game


  • Implement a pattern container in any widget
  • Shape can be a package default shape (square, triangle, hexagon)
  • Shape can be a custom shape where the custom path should be provided
  • Several different shapes can be combined in the container
  • Shape size, depth, perspective can be set
  • Perspective in container can be set and margins between shapes


In the pubspec.yaml of your flutter project, add the following dependency:

  background_patterns: <latest_version>

In your library add the following import:

import 'package:background_patterns/background_patterns.dart';

Getting started


Minimal usage

return PatternContainer(
        shapes: [SquareConfig()],
        shapeColor: Colors.black);

Configure usage

return PatternContainer(
        shapeSize: 40,
        perspective: 0.8,
        shapeDepth: 0.5,
        containerDepth: 0.2,
        alignShapesVertical: true,
        shapes: [
          PolygonConfig(isOutlined: true),
          StarConfig(isOutlined: true, innerCirclePoints: 7, innerRadius: 30, innerOuterRadiusRatio: 2, angleOffsetToCenter: 40)
        shapeColor: Colors.green);

Custom shapes

List<Offset> customStarPath = [];

double shapeSize = 120;

// build up a star
customStarPath.add(Offset(shapeSize / 2, 0));
customStarPath.add(Offset(shapeSize, shapeSize));
customStarPath.add(Offset(0, shapeSize / 3));
customStarPath.add(Offset(shapeSize, shapeSize / 3));
customStarPath.add(Offset(0, shapeSize));
customStarPath.add(Offset(shapeSize / 2, 0));

return PatternContainer(
        customPath: customStarPath,
        shapes: const [Shape.customOutlined],
        shapeColor: Colors.black);