adding space between action and tile and renderflex error

[amdaniell]

When I wanted to add spacing between the action and the tile using a SizedBox, I noticed that I encountered a RenderFlex error.

ListView.builder(
          itemCount: 1,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(12),
              child: Slidable(
                endActionPane: ActionPane(
                  motion: const StretchMotion(),
                  children: [
                    SizedBox(width: 4,),
                    SlidableAction(
                      onPressed: (context) {},
                      autoClose: true,
                      backgroundColor: Colors.red.shade300,
                      borderRadius: BorderRadius.circular(15),
                      icon: Icons.delete,
                      padding: const EdgeInsets.all(12),
                    ),
                  ],
                ),
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    children: [
                      Checkbox(
                        value: false,
                        onChanged: (value) {},
                      ),
                      const Text('data'),
                    ],
                  ),
                ),
              ),
            );
          },
        ),

I managed to work around this issue by approaching the problem differently, but with my method, one side of the tile needs to have a margin, which disrupts the layout and symmetrics.

ListView.builder(
          itemCount: 1,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(12),
              child: Slidable(
                endActionPane: ActionPane(
                  motion: const StretchMotion(),
                  children: [
                    SlidableAction(
                      onPressed: (context) {},
                      autoClose: true,
                      backgroundColor: Colors.red.shade300,
                      borderRadius: BorderRadius.circular(15),
                      icon: Icons.delete,
                      padding: const EdgeInsets.all(12),
                    ),
                  ],
                ),
                child: Container(
                  margin: const EdgeInsets.only(right: 4), // space between action and tile
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    children: [
                      Checkbox(
                        value: false,
                        onChanged: (value) {},
                      ),
                      const Text('data'),
                    ],
                  ),
                ),
              ),
            );
          },
        ),

Please fix this error and provide an update that allows for setting a margin for each action.

[amdaniell]

@letsar