Rounded ends on horizontal listview flutter - flutter

Question

do you know if there is any way i could make my listview ends rounded?
Ive tried wraping the listview builder in a container with box decoration, borderadius and it did not work.
Any help is appreciated.
How it looks like:
https://i.stack.imgur.com/Jr4WJ.png
my code:
Padding(
padding: EdgeInsets.only(left: 5.0),
child: Container(
color: null,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: profiles[0].skills.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15)),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
_filterselectedIndex = index;
});
print(index);
} //setState(() => _filterselected = index)
,
child: Align(
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.all(10.0),
height: 32,
//width: 100,
decoration: BoxDecoration(
color: _filterselectedIndex == index
? Theme.of(context).accentColor
: Colors.white,
borderRadius:
BorderRadius.circular(15.0),
),
child: Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
child: Align(
alignment: Alignment.center,
child: Text(
profiles[0].skills[index],
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
),
);
},
),
))

Answer 1

Yes, there are multiple ways. The easiest way i think would be using containers. Wrap your widget with a container widget. Then add decoration to it like the code below :
return ListView.builder(
itemBuilder: (context, position) {
return Container(
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0))),
child: Paste your existing code.
))
You can also do it using ClipRRect.

Answer 2

If I am correctly understanding your question you want to want to round the corner of yours listView, SO there are various method of doing that, One method is Wrapping the Listview in Container and then in decoration giving it borderRadous.
I have implemented the same functionality for you.
here is the code.
return Scaffold(
appBar: AppBar(
title: Text("App Bar"),
),
body: Container(
padding: EdgeInsets.all(26),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(
16) // <- incease the value for more rounded corner
),
child: ListView(
children: <Widget>[
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
],
),
),
);
I have a clone of app where I have implemented this type of listview with greater functionality like gestures and divider and other. (https://github.com/atul-chaudhary/country_dairy/blob/master/lib/user_func/user_menu.dart)

Answer 3

There are two ways of doing this,
First is using Container and second is ClipRRect
*Note: If you will use Container the widgets inside it will flow out if your BorderRadius will be a large number. But in ClipRRect this will not happen, it will stay inside.
See the code:
Using Container
Container(
height: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50.0))
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue,
width: 150.0,
),
);
},
itemCount: 10
),
),
Using ClipRRect
SizedBox(
height: 200.0,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue,
width: 150.0,
),
);
},
itemCount: 10
),
),
)