How to design the layout with side cut in listview (Flutter)

Question

I am beginner in flutter. I am trying to design a list view. When item is selected it is slightly cut from side. This is my code

                         Container(
                          margin: const EdgeInsets.only(left: SizeSystem.size30,right: SizeSystem.size30),
                          padding: const EdgeInsets.symmetric(
                            vertical: SizeSystem.size24,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(
                              SizeSystem.size20,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: ColorSystem.blue1.withOpacity(0.15),
                                blurRadius: 12.0,
                                spreadRadius: 1.0,
                              ),
                            ],
                          ),
                          child: ListView.separated(
                            shrinkWrap: true,
                            itemCount: teamTaskList.length,
                            physics: const NeverScrollableScrollPhysics(),
                            separatorBuilder: (BuildContext context, int index) {
                              return Container(
                                margin: const EdgeInsets.symmetric(
                                  horizontal: PaddingSystem.padding24,
                                ),
                                color: ColorSystem.black.withOpacity(0.1),
                                height: SizeSystem.size1,
                              );
                            },
                            itemBuilder: (BuildContext context, int index) {
                              return child...;
                            },
                          ),
                        )

and this is what I have achieved so far.

but I want to achieve this

You can see on the right side of tile there is a cut I need your help guys

user_18340828 · Answer

I have used ClipPath to achieve the UI asked in the question, check out the below code.

Card(
     elevation: 2,
     child: ClipPath(
       child: Container(
              height: 100,
              decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.green, width: 5))),
            ),
       clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(3))),
               ),
    )

user_10306997 · Answer

try this:

Container(
        clipBehavior: Clip.none,
        margin: const EdgeInsets.only(left: 30, right: 30),
        padding: const EdgeInsets.symmetric(
          vertical: 24,
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.blueAccent.withOpacity(0.15),
              blurRadius: 12.0,
              spreadRadius: 1.0,
            ),
          ],
          borderRadius: BorderRadius.circular(
            20,
          ),
        ),
        child: ListView.separated(
          clipBehavior: Clip.none,
          shrinkWrap: true,
          itemCount: 10,
          physics: const NeverScrollableScrollPhysics(),
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              margin: EdgeInsets.symmetric(horizontal: 24),
              color: Colors.black.withOpacity(0.1),
              height: 8,
            );
          },
          itemBuilder: (BuildContext context, int index) {
            return Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: Colors.red,
                  ),
                  height: 50,
                ),
                index == 2
                    ? Positioned(
                        right: -30,
                        top: 0,
                        bottom: 0,
                        child: Container(
                          width: 100,
                          height: 50,
                          color: Theme.of(context).scaffoldBackgroundColor,
                        ),
                      )
                    : SizedBox(),
              ],
            );
          },
        ),
      )

How to design the layout with side cut in listview (Flutter)

2 Answers