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

How can I do this image blend on flutter?

I want to recreate the image below:
enter image description here

With the blending effect to the top and bottom to the scaffold background color.
I don’t see any solution.

Tags:

3

Answers


  1. 0

    A should be drawn with opacity 1.0 – t into a new layer using BlendMode. srcOver, and B should be drawn on top of it, at opacity t, into the same layer, using BlendMode

    Best Regards
    Scott Claxton
    Company name: BDWEBIT
    Company info: https://bdwebit.com

    Login or Signup to reply.
  2. 0

    You can use the ShaderMask along with a Stack to achieve this effect.
    Happy coding.

    import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 300,
                height: 300,
                color: Colors.black, // Background color
              ),
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return const LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.transparent,
                      Colors.white,
                      Colors.transparent
                    ],
                    stops: [0.0, 0.5, 1.0],
                  ).createShader(bounds);
                },
                blendMode: BlendMode.dstIn,
                child: Container(
                  width: 300,
                  height: 300,
                  decoration: const BoxDecoration(
                    // Replace with your image
                    image: DecorationImage(
                      image: NetworkImage('https://cf.bstatic.com/xdata/images/hotel/max1280x900/383834719.jpg?k=a8ed632aeaf2eb621e6753e941d4fb2f858005614b603cdef5bfe644ce1a1906&o=&hp=1'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    You Can Ideally Use Stack Widget In Combination With Align

    Something Like This

    class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Align container at the top
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            color: Colors.black.withOpacity(0.4),
            width: MediaQuery.of(context).size.width,
            height: 100,
          ),
        ),
        // Align container at the bottom
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.black.withOpacity(0.4),
            width: MediaQuery.of(context).size.width,
            height: 100,
          ),
        ),
       Image.network(
            'https://via.placeholder.com/200', // Example image URL
            width: 200,
            height: 200,
          ),
    
      ],
    );
  }
}

    Hope you got the idea

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

Back To Top
Search