Background Canvas

A Flutter package for creating dynamic, animated canvas backgrounds with mathematical patterns and customizable color schemes.

Features

• 🎨 6 Different Pattern Types: Fluid waves, geometric shapes, organic blobs, layered curves, particle fields, and abstract flows
• 🌈 Predefined Color Schemes: 10+ beautiful preset color combinations
• 🎭 Custom Color Support: Create backgrounds with any color palette
• ⚡ Smooth Animations: Configurable animation speed and intensity
• 🎛️ Highly Customizable: Control intensity, animation, and timing
• 📐 Mathematical Precision: Canvas patterns generated using mathematical functions
• 🚀 Performance Optimized: Efficient rendering using Flutter's CustomPainter

Installation

Add this to your package's pubspec.yaml file:

dependencies:
background_canvas: ^1.0.0

Usage

Basic Usage

import'package:flutter/material.dart';
import'package:background_canvas/background_canvas.dart';
classMyAppextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
body:BackgroundCanvasWidget(
colors:BackgroundCanvasColorSchemes.oceanBlue,
type:BackgroundCanvasType.fluidWaves,
child:Center(
child:Text('Hello World!'),
),
),
);
}
}

Pattern Types

• BackgroundCanvasType.fluidWaves - Flowing wave patterns
• BackgroundCanvasType.geometricShapes - Animated geometric shapes
• BackgroundCanvasType.organicBlobs - Organic blob formations
• BackgroundCanvasType.layeredCurves - Layered curve patterns
• BackgroundCanvasType.particleField - Particle field animations
• BackgroundCanvasType.abstractFlow - Abstract flowing patterns

Color Schemes

// Use predefined color schemesBackgroundCanvasColorSchemes.oceanBlue
BackgroundCanvasColorSchemes.sunsetGradient
BackgroundCanvasColorSchemes.purpleDream
BackgroundCanvasColorSchemes.neonMint
// Or create custom colorsList<Color> customColors = [
Color(0xFF667eea),
Color(0xFF764ba2),
Color(0xFF6B73FF),
];

Advanced Configuration

BackgroundCanvasWidget(
colors:BackgroundCanvasColorSchemes.cosmicFusion,
type:BackgroundCanvasType.organicBlobs,
animated:true,
animationDuration:Duration(seconds:4),
intensity:1.5,
child:YourWidget(),
)

Generate Color Schemes

// Generate complementary colorsList<Color> complementary =BackgroundCanvasColorSchemes.complementaryScheme(
Colors.blue, variations:3
);
// Generate analogous colorsList<Color> analogous =BackgroundCanvasColorSchemes.analogousScheme(
Colors.red, variations:2
);
// Generate monochromatic schemeList<Color> monochromatic =BackgroundCanvasColorSchemes.monochromaticScheme(
Colors.purple, variations:3
);

Properties

Property	Type	Default	Description
colors	List<Color>	Required	Colors to use for the background pattern
type	BackgroundCanvasType	fluidWaves	Type of pattern to render
animated	bool	true	Whether to animate the pattern
animationDuration	Duration	Duration(seconds: 3)	Duration of one animation cycle
intensity	double	1.0	Intensity of the pattern (0.1 - 2.0)
child	Widget?	null	Widget to display on top of the background

Example App

The package includes a comprehensive example app demonstrating all pattern types and color schemes. Run it with:

cd example
flutter run

Mathematical Patterns

Each pattern type uses mathematical functions to create dynamic visuals:

• Fluid Waves: Sine and cosine functions with varying frequencies
• Geometric Shapes: Polygon generation with rotation matrices
• Organic Blobs: Bezier curves with harmonic oscillations
• Layered Curves: Multiple wave functions with phase shifts
• Particle Field: Pseudo-random positioning with smooth interpolation
• Abstract Flow: Parametric curves with time-based transformations

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.