Flutter slidable package covers my item shadow

Issue

I’m trying to create a list of items with shadow, I also used from flutter_slidable and now this slidable covers my item shadow!!

As you can see in

first item is inside a slidable widget and the second item is a normal item!

action pane screenshot

this is item with slidable:

Slidable(
  startActionPane: ActionPane(
    extentRatio: .40,
    motion: const ScrollMotion(),
    children: <Widget>[
      InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        child: Container(
          width: 70,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.background,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Theme.of(context).shadowColor,
                blurRadius: 15,
                spreadRadius: 0,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.edit,
                size: 20,
                color: Theme.of(context).colorScheme.onSurface,
              ),

              Text(
                'Delete',
                style: Theme.of(context).textTheme.subtitle1,
              ),
            ],
          ),
        ),
      ),

      const SizedBox(width: 6),

      InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        child: Container(
          width: 70,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.background,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Theme.of(context).shadowColor,
                blurRadius: 15,
                spreadRadius: 0,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.delete,
                size: 20,
                color: Theme.of(context).colorScheme.onSurface,
              ),

              Text(
                'Edit',
                style: Theme.of(context).textTheme.subtitle1,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
  child: InkWell(
    borderRadius: BorderRadius.circular(20),
    onTap: () {},
    child: Container(
      padding: const EdgeInsets.all(4),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.background,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Theme.of(context).shadowColor,
            blurRadius: 15,
            spreadRadius: 0,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
              child: Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                        border: Border.all(color: Theme.of(context).colorScheme.onSurface),
                        color: Theme.of(context).colorScheme.background,
                        borderRadius: BorderRadius.circular(16)
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: Image.asset(
                        'assets/images/avatar/3.png',
                        width: 50,
                        height: 50,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          'Abc Def',
                          style: Theme.of(context).textTheme.headline6,
                        ),
                      ],
                    ),
                  ),
                ],
              )
          ),

          Row(
            children: [
              Text(
                'a',
                style: TextStyle(
                  fontFamily: 'faMed',
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),

              Icon(
                Icons.arrow_drop_down,
                color: Theme.of(context).colorScheme.secondary,
                size: 30,
              ),
            ],
          ),
        ],
      ),
    ),
  ),
),

and this is a normal item:

InkWell(
  borderRadius: BorderRadius.circular(20),
  onTap: () {},
  child: Container(
    padding: const EdgeInsets.all(4),
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.background,
      borderRadius: BorderRadius.circular(20),
      boxShadow: [
        BoxShadow(
          color: Theme.of(context).shadowColor,
          blurRadius: 15,
          spreadRadius: 0,
          offset: const Offset(0, 10),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(4),
                  decoration: BoxDecoration(
                      border: Border.all(color: Theme.of(context).colorScheme.onSurface),
                      color: Theme.of(context).colorScheme.background,
                      borderRadius: BorderRadius.circular(16)
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      'assets/images/avatar/3.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),

                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        'Abc Def',
                        style: Theme.of(context).textTheme.headline6,
                      ),
                    ],
                  ),
                ),
              ],
            )
        ),

        Row(
          children: [
            Text(
              'a',
              style: TextStyle(
                fontFamily: 'faMed',
                fontSize: 12,
                fontWeight: FontWeight.w600,
                color: Theme.of(context).colorScheme.secondary,
              ),
            ),

            Icon(
              Icons.arrow_drop_down,
              color: Theme.of(context).colorScheme.secondary,
              size: 30,
            ),
          ],
        ),
      ],
    ),
  ),
),

I tried to use a dismissible widget instead of slidable but that’s not what I want!

Solution

this problem was solved in the new release, you can see this issue.

Answered By – Nothehi

Answer Checked By – Jay B. (FlutterFixes Admin)