Flutter Blend Mask #

A Flutter widget that applies BlendMode effects to its child widgets with proper layer compositing.

Problem #

When using BlendMode in Flutter, especially within complex widget hierarchies like Stack, the blend mode effects often don't work as expected. This is because Flutter requires proper layer compositing for blend modes to function correctly.

Solution #

BlendMask solves this problem by creating a proper compositing layer that ensures blend mode effects work correctly in any widget hierarchy.

Features #

• ✅ Proper BlendMode support in Stack widgets
• ✅ Configurable opacity control
• ✅ Clean and simple API
• ✅ Optimized rendering performance
• ✅ Full Flutter widget lifecycle support
• ✅ Comprehensive documentation and examples

Getting started #

Add flutter_blend_mask to your pubspec.yaml:

dependencies:
  flutter_blend_mask: ^1.0.0

Then run:

flutter pub get

Usage #

Basic Usage #

import 'package:flutter_blend_mask/flutter_blend_mask.dart';
import 'package:flutter/material.dart';

BlendMask(
  blendMode: BlendMode.multiply,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

With Opacity #

BlendMask(
  blendMode: BlendMode.overlay,
  opacity: 0.7,
  child: Image.asset('assets/my_image.png'),
)

In a Stack (Common Use Case) #

Stack(
  children: [
    // Background
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    // Blend mode overlay
    BlendMask(
      blendMode: BlendMode.screen,
      opacity: 0.8,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
  ],
)

BlendMode Options #

All Flutter BlendMode values are supported:

• BlendMode.multiply
• BlendMode.screen
• BlendMode.overlay
• BlendMode.darken
• BlendMode.lighten
• And many more...

API Reference #

BlendMask #

References #

• How to use BlendMode in Stack correctly – StackOverflow

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License #

This project is licensed under the MIT License - see the LICENSE file for details.