質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

1回答

2096閲覧

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

OSARU_2020

総合スコア15

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2022/06/26 11:45

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のコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:funandpractise/ui/auth/signup/signup_page1.dart'; 3import 'package:funandpractise/ui/auth/signup/signup_page2.dart'; 4import 'package:funandpractise/ui/auth/signup/signup_page3.dart'; 5import 'package:smooth_page_indicator/smooth_page_indicator.dart'; 6 7class SignupPage extends StatelessWidget { 8 final _controller = PageController(); 9 10 11 Widget build(BuildContext context) { 12 return Scaffold( 13 body: SafeArea( 14 child: Column( 15 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 16 children: [ 17 // page view 18 SizedBox( 19 width: double.infinity, 20 height: MediaQuery.of(context).size.height * 0.8, 21 child: PageView( 22 controller: _controller, 23 24 children: const [ 25 SignupPage1(), 26 SignupPage2(), 27 SignupPage3(), 28 ], 29 ), 30 ), 31 32 // dot indicators 33 SmoothPageIndicator( 34 controller: _controller, 35 count: 3, 36 effect: SlideEffect( 37 activeDotColor: Theme.of(context).primaryColor, 38 dotColor: Colors.grey.shade400, 39 dotHeight: 10, 40 dotWidth: 10), 41 ), 42 ], 43 ), 44 ), 45 ); 46 } 47}

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

Dart

1import 'package:flutter/material.dart'; 2import 'package:provider/provider.dart'; 3import '../../../model/auth/registor_model.dart'; 4import '../../../widget/custom_button.dart'; 5import '../login_page.dart'; 6 7class SignupPage1 extends StatefulWidget { 8 const SignupPage1({Key? key}) : super(key: key); 9 10 11 State<SignupPage1> createState() => _SignupPage1State(); 12} 13 14class _SignupPage1State extends State<SignupPage1> { 15 16 17 Widget build(BuildContext context) { 18 final _controller = PageController(); 19 20 return ChangeNotifierProvider<RegistorModel>( 21 create: (_) => RegistorModel(), 22 child: Consumer<RegistorModel>(builder: (context, model, child) { 23 return Scaffold( 24 body: SafeArea( 25 child: Column( 26 mainAxisAlignment: MainAxisAlignment.center, 27 children: <Widget>[ 28 29//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーここのボタンでスライドを次のページへ遷移させたい 30 CustomButton( 31 label: "次へ", 32 onPressed: () => { 33 _controller.nextPage( 34 duration: const Duration(seconds: 1), 35 curve: Curves.fastOutSlowIn) 36 }, 37 borderRadius: 30, 38 ), 39//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーCustomButtonは別クラスで作ったボタンWidget 40 ], 41 ), 42 )); 43 }), 44 ); 45 } 46}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

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

dart

1import 'package:flutter/material.dart'; 2 3class SignupPage extends StatelessWidget { 4 final _controller = PageController(); 5 6 7 Widget build(BuildContext context) { 8 return Scaffold( 9 body: SafeArea( 10 child: Column( 11 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 12 children: [ 13 // page view 14 SizedBox( 15 width: double.infinity, 16 height: MediaQuery.of(context).size.height * 0.8, 17 child: PageView( 18 controller: _controller, 19 children: [ 20 SignupPage1(_controller), // 子供にコントローラーを与える 21 SignupPage2(), 22 SignupPage3(), 23 ], 24 ), 25 ), 26 ], 27 ), 28 ), 29 ); 30 } 31} 32 33class SignupPage1 extends StatefulWidget { 34 const SignupPage1(this.controller, {Key? key}) : super(key: key); 35 final PageController controller; // 親からコントローラーを受け取る 36 37 38 State<SignupPage1> createState() => _SignupPage1State(); 39} 40 41class _SignupPage1State extends State<SignupPage1> { 42 43 Widget build(BuildContext context) { 44 return ChangeNotifierProvider<RegistorModel>( 45 create: (_) => RegistorModel(), 46 child: Consumer<RegistorModel>(builder: (context, model, child) { 47 return Scaffold( 48 body: SafeArea( 49 child: Column( 50 mainAxisAlignment: MainAxisAlignment.center, 51 children: <Widget>[ 52//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーここのボタンでスライドを次のページへ遷移させたい 53 CustomButton( 54 label: "次へ", 55 onPressed: () => { 56 widget.controller.nextPage( // 親から受け取ったコントローラーを使用する 57 duration: const Duration(seconds: 1), 58 curve: Curves.fastOutSlowIn) 59 }, 60 borderRadius: 30, 61 ), 62//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーCustomButtonは別クラスで作ったボタンWidget 63 ], 64 ), 65 )); 66 }), 67 ); 68 } 69}

投稿2022/06/26 23:52

ta.fu

総合スコア1664

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OSARU_2020

2022/06/27 14:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問