Search code examples
fluttermodel-view-controllerflutter-pageviewflutter-getx

Flutter: How to control a PageView by GetxController?


Subject: PageView and GetX

I'm having trouble detaching the controls on a PageView widget from the HomeView module. I have a GlobalController with its respective GlobalBinding that are instantiated when opening the HomeView. I would like to take the setPage(int page) method to the GlobalController that would eventually make the HomeView's PageView change pages. I don't know how to get PageController from PageView to GlobalController in order to make it work. How should I proceed?


Solution

  • Something Like this? am using pageview in onboarding

    class Onboard{
    
    
     final headTitle;
      final secondarytitle;
      final discription;
      final pngimage;
     Onboardslist(this.headTitle, this.secondarytitle, this.discription, this.pngimage);
    
    }
    

    then for the controller

    class OnboardController extends GetxController{
    
    
      var selectedPagexNumber = 0.obs;
    bool get isLastPage => selectedPagexNumber.value == onBoardPages.length -1;
    var pageControll = PageController();
    
    
       forwardAct()
      {
        if(isLastPage) Get.offNamedUntil(signin, (route)=> false);
    
        else pageControll.nextPage(duration: 300.milliseconds, curve: Curves.ease);
      }
    
      List<Onboardslist> onBoardPages = 
      [
        Onboardslist("title",
        "short description",
        "long description",
        imageString),
         Onboardslist("title",
        "short description",
        "long description",
        imageString),
        Onboardslist("title",
        "short description",
        "long description",
        imageString),
        Onboardslist("title",
        "short description",
        "long description",
        imageString)
      ];
    
    }
    

    then for the view i did was simply like this

    class Onboarding extends StatelessWidget {
    
       final yourController= OnboardController();
    
      @override
      Widget build(BuildContext context) {
        SizeXGet().init(context);
         return Scaffold(
           backgroundColor: decent_white,
           appBar: AppBarCustom(
            title: 'Skip',
            button: ()=>Get.offNamedUntil(signin,(route)=>false),
          ),
          body: WillPopScope(
            onWillPop: () async => false,
              child: SafeArea(
                child: Stack(
                  children: [
                    PageView.builder(
                      controller: yourController.pageControll,
                      onPageChanged: yourController.selectedPagexNumber,
                      itemCount: yourController.onBoardPages.length,
                      itemBuilder: (context, index)
                      =>Padding(
                        padding: const EdgeInsets.only(left: 10,right: 10),
                        child: Container(
                          child:  SingleChildScrollView(
                              physics: BouncingScrollPhysics(),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                Container(
                                  height: getHeight(150),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                         Padding(
                           padding: const EdgeInsets.only(left: 20,right: 20),
                           child: Text(yourController.onBoardPages[index].headTitle,
                           style: TextStyle(
                           color: darkish_color,
                            fontSize: getHeight(20),
                           fontFamily: 'Metropolis-SemiBold' ,
                           fontWeight: FontWeight.bold
                           ),),
                         ),
                         SizedBox(height: 15,),
                         Padding(
                         padding: const EdgeInsets.only(left: 50,right: 50),
                         child: Text(yourController.onBoardPages[index].secondarytitle,
                         style: TextStyle(
                                      color: not_sopure_black,
                                      fontSize: getHeight(26),
                                      fontFamily: 'Metropolis-Bold' ,
                                      fontWeight: FontWeight.bold
                                    ),
                                    ),
                                  ),
                                  SizedBox(height: 15,),
                                  Padding(
                                   padding: const EdgeInsets.only(left: 40,right: 40),
                                    child: Text(yourController.onBoardPages[index].discription,
                                    style: TextStyle(
                                      color: not_sopure_black,
                                      fontSize: getHeight(15),
                                      fontFamily: 'Metropolis-Regular' ,
                                    ),
                                    ),
                                  ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 15,),
    
                                  Image.asset(yourController.onBoardPages[index].pngimage),
                                 
                                  
                                  
                                ],
                              ),
                            ),
                        ),
                      ),
                    ),
                 
                  ],
                ),
              
            ),
            
          ),
          bottomNavigationBar: BottomAppBar(
            color: Colors.transparent,
            elevation: 0,
            child: Container(
              height: 75,
              width: MediaQuery.of(context).size.width,
              child:  Padding(
            padding: const EdgeInsets.only(left: 25,right:25,),
            child: Container(
              width: MediaQuery.of(context).size.width,
              child: Stack(
                children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          child: Row(
                            children: List.generate(yourController.onBoardPages.length,
                            (index)=>Obx(()=>
                            AnimatedContainer(
                              duration: Duration(milliseconds: 200),
                              margin: EdgeInsets.only(right: 5),
                              height: 10,
                              width: yourController.selectedPagexNumber.value == index ? 20 : 10,
                                  decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(60),
                                  color: yourController.selectedPagexNumber.value == index
                                  ? darkish_color
                                  : not_sopure_black,),
                            ),
                            )),
                          ),
                        ),
                      ),
                    
                    Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 130,
                        height: 52,
                        child: RaisedButton(
                          elevation: 0,
                          onPressed: yourController.forwardAct,
                          splashColor: not_sopure_black,
                          color: darkish_color,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(100)
                          ),
                          child: Obx(() =>
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(yourController.isLastPage ? 'Next' : 'Next',
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Metropolis-Semibold',
                                fontSize: 16,
                              ),
                              ),
                            ],
                          ),
                          ),
                        ),
                      ),
                    )
                ],
              ),
            ),
        ),
            ),
          ),
        );
      }
    }