ClipRRect not working properly using carousel inside listview(scrollview) - flutter

Question

I am using a carousel from the package https://pub.dev/packages/carousel_slider, inside my listview (scrollview). I want to make my images have a round corner border.
I used clipRRect and it works (clip corner image with round border). But something strange happens to my apps. Here my result, I upload to google drive, please download first
https://drive.google.com/open?id=1YNRk3q87-wD080eNvLa9OQ1j2KytvaJW
And here my code
class HomeScreen extends StatelessWidget {
Widget menus(){
return Container(
margin: EdgeInsets.symmetric(horizontal: 21, vertical: 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Layanan favorit',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
Text(
'Lihat Semua',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: Color(0xFFFF2800)
),
),
],
),
Container(
margin: EdgeInsets.only(top: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconMenu(
text: 'Token Listrik',
image: SvgPicture.asset(ICON_ELECTRICITY),
),
IconMenu(
text: 'Pulsa',
image: SvgPicture.asset(ICON_BALANCE),
),
IconMenu(
text: 'Paket Data',
image: SvgPicture.asset(ICON_DATA),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 28),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconMenu(
text: 'Kereta Api',
image: SvgPicture.asset(ICON_TRAIN),
),
IconMenu(
text: 'e Money',
image: SvgPicture.asset(ICON_EMONEY),
),
IconMenu(
text: 'Pasca Bayar',
image: SvgPicture.asset(ICON_POSTPAID),
),
],
),
)
],
),
);
}
Widget offers(){
return Container(
margin: EdgeInsets.symmetric(vertical: 18),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 21),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Hot offers',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
Text(
'Lihat Semua',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: Color(0xFFFF2800)
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 8),
child: CarouselOffers(),
)
],
),
);
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
appBar: HomeAppBar(),
body: Container(
child: ListView(
children: <Widget>[
Card(
margin: EdgeInsets.fromLTRB(21, 21, 21, 18),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(20, 11, 20, 11),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0)),
color: Theme.of(context).primaryColor
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
child: Text(
'Kasku Balance',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w700
),
),
),
),
Container(
margin: EdgeInsets.only(right: 8),
child: Text(
'Rp 2.000.000',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w700
)
),
),
Container(
child: GestureDetector(
child: Icon(
Icons.refresh,
color: Colors.white,
),
),
),
],
),
),
Container(
padding: EdgeInsets.only(top: 16, bottom: 16),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: Radius.circular(8.0),
bottomRight: Radius.circular(8.0)),
color: Colors.white
),
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Container(
child: SvgPicture.asset(ICON_TOPUP),
),
Container(
margin: EdgeInsets.only(top: 12),
child: Text(
'Isi Saldo',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12,
color: Color(0xFF231F20)
),
),
)
],
),
),
Container(
width: 1,
height: 54,
color: Color(0xFFD8D8D8),
),
Expanded(
child: Column(
children: <Widget>[
Container(
child: SvgPicture.asset(ICON_PAY),
),
Container(
margin: EdgeInsets.only(top: 12),
child: Text(
'Bayar',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12,
color: Color(0xFF231F20)
),
),
)
],
),
),
Container(
width: 1,
height: 54,
color: Color(0xFFD8D8D8),
),
Expanded(
child: Column(
children: <Widget>[
Container(
child: SvgPicture.asset(ICON_TRANSFER),
),
Container(
margin: EdgeInsets.only(top: 12),
child: Text(
'Transfer',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12,
color: Color(0xFF231F20)
),
),
)
],
),
),
],
),
),
],
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
menus(),
offers(),
news(),
news2()
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Jelajah'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('Layanan'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('Transaksi'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('Profile'),
),
],
type: BottomNavigationBarType.fixed,
),
),
);
}
}
class CarouselOffers extends StatefulWidget{
#override
_CarouselOffersState createState() => _CarouselOffersState();
}
class _CarouselOffersState extends State<CarouselOffers> {
int _current = 0;
List<Widget> widgets(){
return ['https://cdn2.tstatic.net/lampung/foto/bank/images/bukalapak-promo-bulan-ramadan_20180511_135232.jpg', 'https://cdn2.tstatic.net/lampung/foto/bank/images/bukalapak-promo-bulan-ramadan_20180511_135232.jpg'].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
i,
fit: BoxFit.fill,
),
),
);
},
);
}).toList();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
CarouselSlider(
pauseAutoPlayOnTouch: Duration(seconds: 3),
aspectRatio: 16/6,
items: widgets(),
onPageChanged: (index) {
setState(() {
_current = index;
});
},
autoPlay: true,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(widgets(), (index, url) {
return Container(
width: 6.0,
height: 6.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 4.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index ? Theme.of(context).primaryColor : Color.fromRGBO(0, 0, 0, 0.4)
),
);
}),
)
],
);
}
}
what is wrong with my code? any ideas?

Answer 1

Sorry for late answer.
Everything is fine when using real device. I do not know why ClipperRRect not working properly when using emulator (Genymotion).