flutter PageView實現(xiàn)左右滑動切換視圖

import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_x/base/base_appbar_page.dart';

class LeftPageViewPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
  return new LeftPageViewPageState();
 }
}

class LeftPageViewPageState extends BaseAppBarPageState<LeftPageViewPage> {
 @override
 String buildInitState() {
  buildBackBar("pageView", backIcon: Icons.arrow_back_ios);
  return null;
 }

 final _controller = new PageController();
 static const _kDuration = const Duration(milliseconds: 300);
 static const _kCurve = Curves.ease;
 final List<Widget> _pages = <Widget>[
  new ConstrainedBox(
   constraints: const BoxConstraints.expand(),
   child: new CachedNetworkImage(
    width: double.infinity,
    height: double.infinity,
    fit: BoxFit.fill,
    imageUrl:
      "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
    placeholder: (context, url) => new SizedBox(
     width: 24.0,
     height: 24.0,
     child: new CircularProgressIndicator(
      strokeWidth: 2.0,
     ),
    ),
    errorWidget: (context, url, error) => new Icon(Icons.error),
   ),
  ),
  new ConstrainedBox(
   constraints: const BoxConstraints.expand(),
   child: new CachedNetworkImage(
    width: double.infinity,
    height: double.infinity,
    fit: BoxFit.fill,
    imageUrl:
      "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
    placeholder: (context, url) => new SizedBox(
     width: 24.0,
     height: 24.0,
     child: new CircularProgressIndicator(
      strokeWidth: 2.0,
     ),
    ),
    errorWidget: (context, url, error) => new Icon(Icons.error),
   ),
  ),
  new ConstrainedBox(
    constraints: const BoxConstraints.expand(),
    child: new Stack(
     //Stack即層疊布局控件，能夠?qū)⒆涌丶盈B排列
     //alignment：此參數(shù)決定如何去對齊沒有定位（沒有使用Positioned）或部分定位的子widget。所謂部分定位，在這里特指沒有在某一個軸上定位：left、right為橫軸，top、bottom為縱軸，只要包含某個軸上的一個定位屬性就算在該軸上有定位。
     alignment: AlignmentDirectional.topStart,
     children: <Widget>[
      new CachedNetworkImage(
       width: double.infinity,
       height: double.infinity,
       fit: BoxFit.fill,
       imageUrl: "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
       placeholder: (context, url) => SizedBox(width: 24,height: 25,child: CircularProgressIndicator(strokeWidth: 2.0,),),
       errorWidget: (context, url, error) => new Icon(Icons.error),
      ),
      new Align(
       alignment: Alignment.bottomCenter,
       child: new Container(
        margin: EdgeInsets.only(bottom: 80.0),
        child: FlatButton(onPressed: (){}, child: Text("立即體驗")) ,
       ),
      ),
     ],
    )),
 ];

 @override
 Widget buildWidget(BuildContext context) {
  // TODO: implement buildWidget
  return new Stack(
   children: <Widget>[
    //pageViw
    PageView.builder(
     physics: new AlwaysScrollableScrollPhysics(),
     controller: _controller,
     itemBuilder: (BuildContext context, int index) {
      return _pages[index];
     },
     //條目個數(shù)
     itemCount: _pages.length,
    ),
    //圓點指示器
    new Positioned(
     bottom: 0.0,
     left: 0.0,
     right: 0.0,
     child: new Container(
      color: Colors.white,
      padding: const EdgeInsets.all(20.0),
      child: new Center(
       child: new DotsIndicator(
         controller: _controller,
         itemCount: _pages.length,
         onPageSelected: (int page) {
          _controller.animateToPage(
           page,
           duration: _kDuration,
           curve: _kCurve,
          );
         }),
      ),
     ),
    ),
   ],
  );
 }
}

class DotsIndicator extends AnimatedWidget {
 DotsIndicator({
  this.controller,
  this.itemCount,
  this.onPageSelected,
  this.color: Colors.red,
 }) : super(listenable: controller);

 /// The PageController that this DotsIndicator is representing.
 final PageController controller;

 /// The number of items managed by the PageController
 final int itemCount;

 /// Called when a dot is tapped
 final ValueChanged<int> onPageSelected;

 /// The color of the dots.
 ///
 /// Defaults to `Colors.white`.
 final Color color;

 // The base size of the dots
 static const double _kDotSize = 8.0;

 // The increase in the size of the selected dot
 static const double _kMaxZoom = 2.0;

 // The distance between the center of each dot
 static const double _kDotSpacing = 25.0;

 Widget _buildDot(int index) {
  double selectedness = Curves.easeOut.transform(
   max(
    0.0,
    1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
   ),
  );
  double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
  return new Container(
   width: _kDotSpacing,
   child: new Center(
    child: new Material(
     color: color,
     type: MaterialType.circle,
     child: new Container(
      width: _kDotSize * zoom,
      height: _kDotSize * zoom,
      child: new InkWell(
       onTap: () => onPageSelected(index),
      ),
     ),
    ),
   ),
  );
 }

 Widget build(BuildContext context) {
  return new Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: new List<Widget>.generate(itemCount, _buildDot),
  );
 }
}