dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.64k stars 449 forks source link

How to achieve difference blend mode layer like Figma #1067

Closed burhankhanzada closed 1 month ago

burhankhanzada commented 1 month ago

CleanShot 2024-05-26 at 02 09 52@2x

I have tired this but this doesn't work.

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

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          color: Colors.white,
          width: 100,
          height: 100,
        ),
        Padding(
          padding: const EdgeInsets.only(top: 100, left: 100),
          child: SvgPicture.asset(
            'assets/logos/github.svg',
            width: 100,
            height: 100,
            colorFilter: const ColorFilter.mode(Colors.white, BlendMode.difference),
          ),
        )
      ],
    );
  }
}

CleanShot 2024-05-26 at 02 08 22@2x

jonahwilliams commented 1 month ago

If you're looking for help you should try in one of the various flutter communities like discord or the flutter help subreddit. This is for bug reports.