Flutter Question posted in
The official Flutter documentation can be found here.

How to get difference blend mode effect with flutter_svg

I have tired this but it doesn’t work like expected also tired other modes but doesn’t match the effect i need.

Stack(
  children: [
    Container(
      color: Colors.white,
      height: 50,
      width: 50,
    ),
    SvgPicture.asset(
     'assets/logo.svg',
      ColorFilter.mode(Colors.white, BlendMode.difference),
    )
  ],
)

Art board
Layers
Logo Difference Blend Mode

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Can't attach reference image in comment thats why answering @Aks question here with image reference.

    When logo is not white like black or red then need to set color parameter as White of SvgPicture.asset as shown in below image original logo was black.

    Then about my updated code the effect is same as @Aks use SizedBox with Postponed Widgets but i use Stack alignment property with Padding on SVG.

    enter image description here


  2. 0

    Add this package: widget_mask. This package contains a class "SaveLayer" we can use like this ->

    ##You can handle the position of svg as needed.

    import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:widget_mask/widget_mask.dart';


class BlendTest extends StatelessWidget {
  const BlendTest({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
          child: Center(
        child: SizedBox(
          height: 150,
          width: 150,
          child: Stack(
            children: [
              Positioned(
                top: 0,
                left: 0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.white,
                ),
              ),
              Positioned(
                right: 0,
                bottom: 0,
                child: SaveLayer(
                    paint: Paint()..blendMode = BlendMode.difference,
                    child: SizedBox(
                        height: 100,
                        width: 100,
                        child: SvgPicture.asset(
                          "assets/github.svg",
                         // colorFilter: const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                        )
                        )),
              ),
            ],
          ),
        ),
      )),
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search