Flutter using PageController to change PageView from another class

Question

Help I'm a flutter newbie and I've built a file that has OnTap TapGestureRecognizer functions, which I'm trying to manage the pageView within a second page. I've tried a few different options and but I can't work out how to get pageController to change the page view on the second page.

Root Class

class RootApp extends StatefulWidget {
  @override
  RootAppState createState() => RootAppState();
}

class RootAppState extends State<RootApp> {
  bool isFavorite = false;
  int pageIndex = 0;

  PageController _pgController = PageController();

  void pgCont(pg){
     _pgController.animateToPage(pg, duration: Duration(milliseconds: 250), curve: Curves.bounceInOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(controller: _pgController,
        children: <Widget>[
        getBody1() ,
        getBody2(),
      ]),
      bottomNavigationBar: getFooter(),
    );
  }

Header Home Class

class HeaderHomePage extends StatelessWidget {
   HeaderHomePage({
    Key ?key
  }) : super(key: key);

   RootAppState rooting = RootAppState();
 }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text.rich(
          TextSpan(
            text: "Body1",
          recognizer: TapGestureRecognizer()
        ..onTap = (){
              print('He Clicked Body1');
              rooting.pgCont(1);
        },
   SizedBox(
      width: 8,
    ),
    Text.rich(
      TextSpan(
      text: "Body2",
      recognizer: TapGestureRecognizer()
          ..onTap = (){
        print('She clicked Body2');
        rooting.pgCont(2);
          },),
      style: TextStyle(
          color: white, fontSize: 17, fontWeight: FontWeight.w500),
    )
  ],
);

Please help I'm stuck on something that seems so simple what I'm I missing or doing wrong here?

- Firstly, it's not wise to call State of another Widget from other widget. - Please elaborate expected result and actual result in separate paragraphs. - Some of your code snippets are missing! — p2kr, Jun 15 '21 at 09:31
- basically, I'm trying to change the page view from body1 to body2 when the associated text is clicked e.g. User clicks Body 1 and the page view changes to Body 1. thanks — ukholly, Jun 15 '21 at 11:56
sorry, I'm a total newb and stuck! could you show me how you would implement my code snippet pls — ukholly, Jun 15 '21 at 17:21

p2kr · Answer 1 · 2021-06-16T08:39:38.857

In RootAppState class

  void pgCont(pg){
    if(_pgController.hasClients) {
     _pgController.animateToPage(pg, duration: Duration(milliseconds: 250), curve: Curves.bounceInOut);
    }
  }

In HeaderHome class

onTap = (){
        print('She clicked Body2');
        rooting.pgCont(0); // index starts from 0
    },

It's not wise to call State of another Widget from another widget. You should use callback to deal with code from other State class.

https://www.geeksforgeeks.org/flutter-working-with-callback-functions/

LEGACY 0808 · Answer 2 · 2022-08-04T18:04:54.247

You can use a Provider:

 import 'package:flutter/material.dart';

class PageProvider extends ChangeNotifier{
//HomeScreen Navigation Bar
PageController _pageSelection=PageController(initialPage: 0);

PageController get pageSelection{
  return this._pageSelection;
}

set pageSelection(PageController i){
  this._pageSelection=i;
  notifyListeners();
}
}

In the Main you declare de providers

MultiProvider(
providers: [
ChangeNotifierProvider(create: (_)=> UIProvider()),
ChangeNotifierProvider(create: (_)=> PageProvider())
],


child: MaterialApp()
)

And finally the class where you have the button you call the provider

class Button extends StatelessWidget {

const Button({
Key? key,
}) : super(key: key);


@override
Widget build(BuildContext context) {
//Calling the Provider to control
final pageProvider = Provider.of<PageProvider>(context);

return SingleChildScrollView(
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Material(
          color: Colors.amber,
          borderRadius: BorderRadius.circular(10),
          child: TextButton(
//This is where you control the Pageview to change to the next page
            
onPressed()=>pageProvider.pageSelection.nextPage(duration: 
            Duration(milliseconds: 1000), curve: Curves.easeIn),
            child: Container(
  
        alignment: Alignment.center,
              width: 200,
              height: 50,
              child: const Text('Continuar',style: 
TextStyle(fontSize: 30, 
  fontWeight: FontWeight.bold,color: Colors.white),),
            )
          ),
        )  
     ]
    ),
  ),
 );
 }
 }

Remember to always import the packages

Flutter using PageController to change PageView from another class

2 Answers2