Flutter Container with two different opacity

Question

i want to made container with two different opacity to make the screen more focus on some image, i used stack and container, is it possible to make something like this?

Here is my code example,

Stack(
        children: <Widget>[
          Image(),
          Container(
            height: double.infinity,
            width: double.infinity,
            color: Colors.black.withOpacity(0.4),
          ),

Thanks before guys,

This is what you're looking for : https://stackoverflow.com/questions/49374893/flutter-inverted-clipoval — MickaelHrndz, Feb 14 '20 at 05:35

Crazy Lazy Cat · Answer 1 · 2020-02-14T06:22:06.683

I am not sure this is good solution. It will do the trick.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: FirstPage()));

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.network(
            "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg",
            fit: BoxFit.cover,
          ),
          CustomPaint(
            painter: MyPainter(),
          )
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final Color color;
  final double opacity;

  ///ratio of max(height, width)
  final double radius;

  MyPainter({
    Color color,
    double radius = 0.3,
    this.opacity = 0.4,
  })  : assert(opacity != null && opacity >= 0.0 && opacity <= 1.0),
        color = color ?? Colors.black,
        radius = radius ?? 0.3;

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    var gradient = RadialGradient(
      center: Alignment.center,
      radius: radius,
      colors: [const Color(0x0000000), color.withOpacity(opacity)],
      stops: [1.0, 1.0],
    );
    canvas.drawRect(
      rect,
      Paint()..shader = gradient.createShader(rect),
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Flutter Container with two different opacity

1 Answers1