【Flutter】PageControllerでPageViewを操作|ページ移動・初期ページ指定

おすすめプログラミングスクール

▶︎ 侍エンジニア
Flutterが学習できるプログラミングスクール。エキスパートコースは転職・就職サポート付き
「エキスパートコース」の詳細は無料カウセリングで相談

▶︎ DMM WEBCAMP
自社開発・受託開発企業への転職実績多数。受講開始20日以内なら無条件で全額返金。


▶︎
ポテパンキャンプ
Webエンジニア輩出No.1。開発できる開発企業への転職成功をサポート。全額返金保証あり。


▶︎
テックブースト
フリーランス特化型プログラミングスクール。スクール在籍中に案件受注から納品を体験できる。

今回はPageViewのコントローラーPageControllerの使い方を紹介します。

PageControllerを使えばPageViewの初期ページを指定、スワイプせずにページ移動できます。

スポンサーリンク

目次

PageControllerを生成

final controller = PageController();

まずはPageViewを操作するためのコントローラーPageControllerを生成します。

初期ページを指定したい場合

final controller = PageController(initialPage: 1);

初期ページを指定したい場合はinitialPageに初期ページのインデックスを渡します。

デフォルトではインデックス0のページが表示されます。

PageControllerをPageViewにセット

PageView(
  controller: controller,
  children: [
    Center(
      child: Text('Page 1'),
    ),
    Center(
      child: Text('Page 2'),
    ),
    Center(
      child: Text('Page 3'),
    ),
  ],
);

先ほど定義したコントローラーをPageViewcontrollerに渡します。

これでPageViewPageControllerを使って操作できます。

前ページ・次ページの移動

AppBar(
  title: const Text('FlutterZero'),
  actions: [
    IconButton(
      onPressed: () => controller.previousPage(
        duration: Duration(seconds: 1),
        curve: Curves.easeIn,
      ),
      icon: Icon(Icons.arrow_back_ios),
    ),
    IconButton(
      onPressed: () => controller.nextPage(
        duration: Duration(seconds: 1),
        curve: Curves.easeIn,
      ),
      icon: Icon(Icons.arrow_forward_ios),
    )
  ],
),

前ページに移動するにはPageController.previousPage、次ページに移動するにはPageController.nextPageメソッドを使用します。

どちらのメソッドでもdurationcurveで移動時間と移動アニメーションを指定する必要があります。

指定したページに移動

PageView(
  controller: controller,
  children: [
    Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Page 1'),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () => controller.animateToPage(
              1,
              duration: Duration(seconds: 1),
              curve: Curves.easeIn,
            ),
            child: Text('Page 2に移動'),
          )
        ],
      ),
    ),
    Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Page 2'),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () => controller.animateToPage(
              0,
              duration: Duration(seconds: 1),
              curve: Curves.easeIn,
            ),
            child: Text('Page 1に移動'),
          )
        ],
      ),
    )
  ],
),

指定したページに移動するにはPageController.animateToPageメソッドを使用します。

第一引数に移動するページのインデックスを渡し、durationcurveで移動時間と移動アニメーションを指定します。

一緒に読みたい

参考

スポンサーリンク

  • URLをコピーしました!
目次