Create image slider with pageView - flutter

Question

i tried create a image slider like this image
i tried create this slider with PageView but a have a problem with pageview
and my code :
class SlideMusic extends StatefulWidget{
final Size _size;
final List<String> _listArts;
double itemExtent;
SlideMusic(this._size,this._listArts){
itemExtent = _size.width / 3;
}
#override
SlideMusicState createState() => SlideMusicState();
}
class SlideMusicState extends State<SlideMusic> {
double currentPage = 0;
PageController _pageController = PageController(
viewportFraction: 0.3333,
);
#override
void setState(fn) {
super.setState(fn);
_pageController.addListener((){
currentPage = _pageController.page;
});
}
#override
Widget build(BuildContext context) {
return SizedBox(
width: widget._size.width,
height: widget.itemExtent,
child: Container(
color: Colors.green,
child: NotificationListener<ScrollNotification>(
onNotification: _onNotification,
child: PageView.builder(
controller: _pageController,
physics: BouncingScrollPhysics(),
itemCount: widget._listArts.length,
itemBuilder: (context, index){
return itemArt(widget._listArts[index], index);
},
),
)
)
);
}
bool _onNotification(ScrollNotification notification){
setState(() {
currentPage = _pageController.page;
print(currentPage);
});
}
double itemOffset(int index){
return (index - currentPage ).abs()* widget.itemExtent;
}
Widget itemArt(String image , int index){
Offset offset = Offset.zero;
if(index > currentPage.round())
offset = Offset(-itemOffset(index)/2,0);
else
offset = Offset(itemOffset(index)/2,0);
return Align(
alignment: Alignment.center,
child: Transform.translate(
offset: offset,
child: Container(
color: Colors.lightBlue,
child: LayoutBuilder(
builder: (context,constrat){
return SizedBox(
width: constrat.maxWidth - itemOffset(index)/3.5,
height: constrat.maxHeight - itemOffset(index) /3.5,
child: Center(
child: Image.asset(image)
),
);
},
)
),
)
);
}
}

Answer 1

Check out the Picture slider widget made with carousel_slider.
Don't mind the jankyness of GIF.
Code:
class PictureSlideShow extends StatefulWidget {
#override
_PictureSlideShowState createState() => _PictureSlideShowState();
}
class _PictureSlideShowState extends State<PictureSlideShow> {
#override
Widget build(BuildContext context) {
return Center(
child: CarouselSlider(
height: 200.0,
enlargeCenterPage: true,
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: 400,
height: 400,
margin: EdgeInsets.all(0.5),
decoration:
BoxDecoration(color: Colors.lightBlue[100 * (i % 5)]),
child: Center(
child: Text(
'text $i',
style: TextStyle(fontSize: 16.0),
),
),
);
},
);
}).toList(),
),
);
}
}
This is a similiar design to what you wanted.