【flutter】PageViewのボタンでのスライドについて

Question

PageViewを使ってユーザー登録ページを作成していて、

• SignupPage1
• SignupPage2
• SignupPage3

に登録に必要な情報を入力してもらおうと考えています。
各ページのクラスにボタンを設置し、
押すと次のスライドに移動するようにしたいのですが上手くいきません。

_controller.nextPageを使ってスライドさせようとしているのですが、
このコードが上手く走らない理由をご存知の方は教えて頂きたいです。

onPressed: () => {
                  _controller.nextPage(
                      duration: const Duration(seconds: 1),
                      curve: Curves.fastOutSlowIn)
                },

＜エラー文言＞

PageController page cannot be accessed before a PageView is built with it

＜コード全文＞

PageViewのコード

import 'package:flutter/material.dart';
import 'package:funandpractise/ui/auth/signup/signup_page1.dart';
import 'package:funandpractise/ui/auth/signup/signup_page2.dart';
import 'package:funandpractise/ui/auth/signup/signup_page3.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class SignupPage extends StatelessWidget {
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // page view
            SizedBox(
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.8,
              child: PageView(
                controller: _controller,

                children: const [
                  SignupPage1(),
                  SignupPage2(),
                  SignupPage3(),
                ],
              ),
            ),

            // dot indicators
            SmoothPageIndicator(
              controller: _controller,
              count: 3,
              effect: SlideEffect(
                  activeDotColor: Theme.of(context).primaryColor,
                  dotColor: Colors.grey.shade400,
                  dotHeight: 10,
                  dotWidth: 10),
            ),
          ],
        ),
      ),
    );
  }
}

SignupPage1,SignupPage2ページのコード（共通）※色々省略しています

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../model/auth/registor_model.dart';
import '../../../widget/custom_button.dart';
import '../login_page.dart';

class SignupPage1 extends StatefulWidget {
  const SignupPage1({Key? key}) : super(key: key);

  @override
  State<SignupPage1> createState() => _SignupPage1State();
}

class _SignupPage1State extends State<SignupPage1> {

  @override
  Widget build(BuildContext context) {
    final _controller = PageController();

    return ChangeNotifierProvider<RegistorModel>(
      create: (_) => RegistorModel(),
      child: Consumer<RegistorModel>(builder: (context, model, child) {
        return Scaffold(
            body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーここのボタンでスライドを次のページへ遷移させたい
              CustomButton(
                label: "次へ",
                onPressed: () => {
                  _controller.nextPage(
                      duration: const Duration(seconds: 1),
                      curve: Curves.fastOutSlowIn)
                },
                borderRadius: 30,
              ),
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーCustomButtonは別クラスで作ったボタンWidget
            ],
          ),
        ));
      }),
    );
  }
}

Answer 1

SignupPageで宣言しPageViewで使用している_controller をSignupPage1で使用していないからでは。
PageControllerはPageViewと関連付けされていることが前提ですが、SignupPage1側はbuild内で新規作成されたものをPageViewと関連付けされてなく使用しようとしたので、

PageController page cannot be accessed before a PageView is built with it
PageViewが構築される前にPageControllerページにアクセスすることはできません

というエラーが出たのだと思います。

SignupPageからSignupPage?にPageControllerを渡すようにしたらうまくいきませんか。

以下は、変更後のコード例です。（動かせないので正しく動作するかは不明ですが）
「コントローラー」とコメントが入っているところが関連個所です。

import 'package:flutter/material.dart';

class SignupPage extends StatelessWidget {
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // page view
            SizedBox(
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.8,
              child: PageView(
                controller: _controller,
                children: [
                  SignupPage1(_controller),   // 子供にコントローラーを与える
                  SignupPage2(),
                  SignupPage3(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class SignupPage1 extends StatefulWidget {
  const SignupPage1(this.controller, {Key? key}) : super(key: key);
  final PageController controller;    // 親からコントローラーを受け取る

  @override
  State<SignupPage1> createState() => _SignupPage1State();
}

class _SignupPage1State extends State<SignupPage1> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<RegistorModel>(
      create: (_) => RegistorModel(),
      child: Consumer<RegistorModel>(builder: (context, model, child) {
        return Scaffold(
            body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーここのボタンでスライドを次のページへ遷移させたい
              CustomButton(
                label: "次へ",
                onPressed: () => {
                  widget.controller.nextPage(       // 親から受け取ったコントローラーを使用する
                      duration: const Duration(seconds: 1),
                      curve: Curves.fastOutSlowIn)
                },
                borderRadius: 30,
              ),
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーCustomButtonは別クラスで作ったボタンWidget
            ],
          ),
        ));
      }),
    );
  }
}

Comments

[OSARU_2020]

回答ありがとうございます！
こちらのアドバイス通りにしたら上手く動きました！！！