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
CodePudding user response:
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))),
),
)
CodePudding user response:
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(),
],
);
},
),
)