title: Create image slider with pageView
body: <p>i tried create a image slider like this image</p>
  
  <p><a href="https://i.stack.imgur.com/Pv96n.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pv96n.jpg" alt="enter image description here"></a></p>
  
  <p>i tried create this slider with <code>PageView</code> but a have a problem with pageview</p>
  
  <p><a href="https://i.stack.imgur.com/3nfdt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nfdt.jpg" alt="enter image description here"></a></p>
  
  <p><strong>and my code :</strong></p>
  
  <pre><code>class SlideMusic extends StatefulWidget{
  
    final Size _size;
    final List&lt;String&gt; _listArts;
    double itemExtent;
  
    SlideMusic(this._size,this._listArts){
      itemExtent = _size.width / 3;
    }
  
    @override
    SlideMusicState createState() =&gt; SlideMusicState();
  }
  
  class SlideMusicState extends State&lt;SlideMusic&gt; {
  
    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&lt;ScrollNotification&gt;(
              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 &gt; 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)
                    ),
                  );
                },
              )
          ),
        )
      );
    }
  }
  </code></pre>