【Flutter】PageViewの現在のページ番号によるコントロール

Question

実現したいこと

ウォークスルー画面を作りたいと思っていて、最後のページになったらボタンのonTappedの処理を変えたり、ボタンのテキストを変えたりしたいです。
今試していることは、下の画像でのNextボタンがPageViewの最後のページ（3ページ目）では非活性もしくは別のボタンに切り替えられるかどうかということです。

試したこと

PageControllerのpageプロパティを参照しページ数と比較してボタンをコントロールしてみましたが上手く行きませんでした。

ソースコード

class WalkThroughPage extends StatefulWidget {
  @override
  _WalkThroughPageState createState() => _WalkThroughPageState();
}

class _WalkThroughPageState extends State<WalkThroughPage> {
  final _controller = PageController();

  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.ease;

  final List<Widget> _pages = [
    Center(
      child: Text('Page1'),
    ),
    Center(
      child: Text('Page2'),
    ),
    Center(
      child: Text('Page3'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final _size = MediaQuery.of(context).size;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: _size.height * 0.8,
              child: PageView.builder(
                  controller: _controller,
                  itemBuilder: (context, index) {
                    return _pages[index % _pages.length];
                  }),
            ),
            Row(
              children: [
                RaisedButton(
                    onPressed: () {
                      _controller.previousPage(
                          duration: _kDuration, curve: _kCurve);
                    },
                    child: Text('Back')),
                Spacer(),
                Container(
                  child: Center(
                    child: DotsIndicator(
                      controller: _controller,
                      itemCount: _pages.length,
                      onPageSelected: (int page) {
                        _controller.animateToPage(page,
                            duration: _kDuration, curve: _kCurve);
                      },
                    ),
                  ),
                ),
                Spacer(),
                _controller.page == _pages.length
                    ? RaisedButton(
                        onPressed: null,
                        child: Text('Next'),
                      )
                    : RaisedButton(
                        onPressed: () => _controller.nextPage(
                            duration: _kDuration, curve: _kCurve),
                        child: Text('Next')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  final PageController controller;
  final int itemCount;
  final ValueChanged<int> onPageSelected;
  final Color color;
  static const double _kDotSize = 8.0;
  static const double _kMaxZoom = 2.0;
  static const double _kDotSpacing = 25.0;

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

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

Answer 1

単純なことでしたが、StateWidget内に_currentPageなどStateとして値を保持しておき、 PageViewのonPageChangedに渡すメソッド内でsetStateで_currentPageに現在のページを代入すればOKでした。

以下コードです。

int _currentPage = 0;

...

PageView.builder(
  controller: _controller,
  onPageChanged: (int page) {
    setState(() {
      _currentPage = page;
    });
  },
  itemBuilder: (context, index) {
    return _pages[index % _pages.length];
  }),

...

_currentPage == _pages.length - 1
  ? RaisedButton(
      onPressed: null,
      child: Text('Finish'),
    )
  : RaisedButton(
      onPressed: () => _controller.nextPage(
        duration: _kDuration, curve: _kCurve),
      child: Text('Next')),