chitochi / flutter_inset_shadow

This package extends BoxShadow and BoxDecoration to support the inset property. [maintainer=@chitochi]

Flutter Inset Shadow

Flutter currently does not support the inset property for shadows. This type of shadow is for example used in Neumorphism.

This package extends BoxShadow and BoxDecoration to support the inset property.

Important

What happened to flutter_inset_box_shadow?

Previously, this package was called flutter_inset_box_shadow.

Unfortunately, I've lost access to the verified publisher, allowing me to publish updates to the package.

So I decided to publish the package under a new name.

For more information, you can read #7. 😄

Features

• All properties of BoxShadow are supported.
• If the property of a BoxShadow changes during a transition, we first make the old shadow disappear before making the new one appear.

Example

import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';

void main() {
  runApp(const ExampleApp());
}

const primaryColor = Color(0xFFE0E0E0);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: primaryColor,
        body: Center(
          child: Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              color: primaryColor,
              boxShadow: const [
                BoxShadow(
                  offset: Offset(-20, -20),
                  blurRadius: 60,
                  color: Colors.white,
                  inset: true,
                ),
                BoxShadow(
                  offset: Offset(20, 20),
                  blurRadius: 60,
                  color: Color(0xFFBEBEBE),
                  inset: true,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Usage

First, add the package:

flutter pub add flutter_inset_shadow

Then, import it as follows:

import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';

It is necessary to hide BoxDecoration and BoxShadow because this library replaces them.

BoxShadow now has a boolean inset property, which is set to false by default.

return Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        blurRadius: 5,
        color: Colors.red,
      ),
      BoxShadow(
        offset: Offset(1, 2),
        blurRadius: 5,
        spreadRadius: 2,
        color: Colors.green,
        inset: true,
      ),
    ],
  ),
);

How does it work?

The algorithm used is the same as that of Blink, the Chromium rendering engine.

The idea is that we draw a rectangle hollowed out by another rounded rectangle inside, then we blur this hollowed rectangle.

flutter_inset_shadow's Issues

Shadow size is wrong when using BoxShape.circle with a width and height that are not equal

Details:-

Flutter SDK version :- 3.16.5
flutter_inset_box_shadow: ^1.0.8

code :-

Container(
              color: selectedBackgroundColor,
              child: Center(
                child: Container(
                  // width: MediaQuery.of(context).size.width * 0.75,
                  // height: MediaQuery.of(context).size.height * 0.25,
                  width: 275,
                  height: 275,
                  decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.amber,
                      boxShadow: [
                        BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.75),
                          offset: Offset(0, -10),
                          inset: true,
                        ),
                      ]),
                ),
              ),
            ),
            

I'm attaching the final output with the fixed height and width and with the dynamic height and width.

with fixed height I'm getting this output:-

with the dynamic width height I'm getting this output:-

can anyone help me to achieve the same result as with the fixed height?

Inset on multiple widget is expensive

Hi, i am using this package in order to create a Neumorphic page.
Currently i have 7 neumorphic buttons in a Row.
The row is shown/hidden by an AnimatedCrossFade
When i have to show the buttons the Raster goes crazy for some frames, but then if i setState the page everything is smooth (i added a RepaintBoundary)
I played a bit and found out that the lag is caused by the 'inset' attribute on the BoxShade Widget.
By commenting that out everything is smooth and not laggy.
Is there any workaround for this?

Support `ShapeDecoration`

Seems like inset is not working while using ShapeDecoration.
The inset is always disabled

Shadow not rendering on web in a mobile layout

I have inset shadows that render fine in web, as long as the layout is "desktop" like.
When I either open it on my phone or when I use the debugger in web to force it into a mobile layout the shadows disappear entirely.
I have no clue what could be causing this, any thoughts?

Inset Shadow not compatible with new Impeller engine

Flutter inset Box Shadow

on container shape : BoxShape.circle, its not working fine please give any solution

Shadow with opacity less then .3 is invisible.

Same params in chrome

Shadows with opacity are not applied

I add opacity to the shadow color but it tints without opacity. Can you help with this issue?

Container(
      width: width,
      height: height,
      padding: padding,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            offset: Offset.fromDirection(4, 4) ,
            color: Colors.black.withOpacity(.05),
            blurRadius: 0,
            spreadRadius: 10,
            inset: true,
          ),
        ],
      ),
      child: child,
    )

Cant use normal decoration Image

Hello there, I was having some issues with a container boxdecoration image showing up on one of my screens even though I use the exact same container code for every page. I recreated a duplicate page and started adding piece by piece and the problem occured when I have to Hide the boxDecoration and boxShadow from the material.dart in order for your plugin to take over.

   body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
                'assets/images/curcuit_background-3.png'), // TODO not showing image
            fit: BoxFit.cover,
          ),
        ),

This is the snippet I use for the page background. I am using youre inset for a timer button on the screen but I need to be able to have both a background image as well as the inset button on the same page.

Any suggestions?

Blocky gradients on iOS devices when new Flutter Impeller rendering engine enabled

With Impeller enabled on iOS, rendering of gradients is blocky does not look good. It's fine if Impeller is disabled. This has only been seen when using the Inset property. Other gradients throughout Flutter seem fine.

https://github.com/flutter/flutter/wiki/Impeller

The issue is seen when using settings such as this:

BoxDecoration(boxShadow: [BoxShadow(blurRadius: 20, spreadRadius: 40, color: fillColor, inset: true)]))