FlutterのPageControllerでタブレット端末の画面をスクロール

PageViewに表示されるページを操作するのにPageControllerがあり、アニメーションなどの動きをつけることができます。下記コードは、４画面をスクロールで遷移でき最後に別のページに飛ぶ実装です。1~4ページ迄は行き来できるようになっています。

```lib/views/pages.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:../views/pages/hoge_first.dart';
import 'package:../views/pages/hoge_secound.dart';
import 'package:../views/pages/hoge_third.dart';
import 'package:../views/pages/hoge_fourth.dart';

class HogePageView extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
   
    final pageController = useMemoized(() => PageController());
    final currentPage = useState(0);

    useEffect(() {
      pageController.addListener(() {
        final nextPage = pageController.page!.round();
        if (currentPage.value != nextPage) {
          currentPage.value = nextPage;
        }
      });
      return;
    }, []);

    return Scaffold(
        body: PageView(
            controller: pageController,
            onPageChanged: (page) => currentPage.value = page,
            children: [
          HogeFirstView(onChangeNextPage: (isNext) {
            currentPage.value = isNext ? 2 : 0;
            pageController.animateToPage(currentPage.value,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut);
          }),
          HogeSecondView(onChangeNextPage: (isNext) {
            currentPage.value = isNext ? 3 : 1;
            pageController.animateToPage(currentPage.value,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut);
          }),
          HogeThirdView(onChangeNextPage: (isNext) {
            currentPage.value = isNext ? 4 : 2;
            pageController.animateToPage(currentPage.value,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut);
          }),
          HogeFourthView(onChangeNextPage: (isNext) async {
            if (!isNext) {
              currentPage.value = 3;
              pageController.animateToPage(currentPage.value,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut);

              return;
            }
            await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => HogeNewView(),
              ),
            );
          }),
        ]));
  }
}

```
`return container([]);`の`[ ]`内に`Text`や`Image`など動きをつけたい画像を実装して下さい。
```lib/views/pages/hoge_first.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:../views/pages/utils.dart';


class HogeFirstView extends HookConsumerWidget {
  const HogeFirstView({
    required Function this.onChangeNextPage,
  }) : super();

  final Function onChangeNextPage;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return container([]);
  }
}
```

```lib/views/pages/hoge_second.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:../views/pages/utils.dart';


class HogeSecondView extends HookConsumerWidget {
  const HogeSecondView({
    required Function this.onChangeNextPage,
  }) : super();

  final Function onChangeNextPage;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return container([]);
  }
}
```

```lib/views/pages/hoge_third.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:../views/pages/utils.dart';


class HogeThirdView extends HookConsumerWidget {
  const HogeThirdView({
    required Function this.onChangeNextPage,
  }) : super();

  final Function onChangeNextPage;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return container([]);
  }
}
```

```lib/views/pages/hoge_fourth.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:../views/pages/utils.dart';


class HogeFourthView extends HookConsumerWidget {
  const HogeFourthView({
    required Function this.onChangeNextPage,
  }) : super();

  final Function onChangeNextPage;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return container([]);
  }
}
```
`Utils`(ユーティリティ)ファイルで`container`関数を作って背景画像を返してます。上記にも使われてます、応用してお使い下さい。
```lib/views/pages/utils.dart
import 'package:flutter/material.dart';

Widget container(List<Widget> children) {
  return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage('assets/images/hoge.png'))),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: children));
}
```