Flutter: Route to a specific page of pageview widget from another dart file

Issue

I am currently working on a webapp and want to route from one page to a specific page of a pageview widget. I know, that I can jump to pages in the same class using the jumpTo method of the pagecontroller. But I can not access the pagecontroller from another dart file.
Currently I route to the pageview an can scroll to all the pages (thats fine). The pages contain different beerstyles. Now I have another dart file in the project which lists all my beers in the fridge on one page. From there I want to jump to a specific page of the pageview, or in other words to a specific beer. Eg I have Porter in the fridge, then I want a button next to it, that jumps to the Port-page in the pageview widget.

How can I do that?

This is what the pageview looks like currently:

import 'package:flutter/material.dart';

class AboutView extends StatefulWidget {
  @override
  State<AboutView> createState() => _AboutViewState();
}

class _AboutViewState extends State<AboutView> {
  PageController controller = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: PageView(
        controller: controller,
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('Porter'),
                SizedBox(
                  width: 60,
                ),
                CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage:
                      AssetImage("assets/ShirtLogoBierNEWFrontMedium.png"),
                ),
              ],
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('IPA'),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('Pale Ale'),
            ),
          ),
        ],
      ),
    ));
  }
}

Solution

When you want to redirect to specific page, you can navigate it with your selected index and PageController(initialPage: 0) will set your specific Page like below is your class,

import 'package:flutter/material.dart';

class AboutView extends StatefulWidget {
  int selectedIndex;
    
  AboutView(this.selectedIndex);
    
  @override
  State<AboutView> createState() => _AboutViewState();
}

class _AboutViewState extends State<AboutView> {
  PageController? controller;

  @override
  void initState() {
  // TODO: implement initState
  super.initState();
  controller = PageController(initialPage: widget.selectedIndex);
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: PageView(
        controller: controller,
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('Porter'),
                SizedBox(
                  width: 60,
                ),
                CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage:
                      AssetImage("assets/ShirtLogoBierNEWFrontMedium.png"),
                ),
              ],
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('IPA'),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('Pale Ale'),
            ),
          ),
        ],
      ),
    ));
  }
}

And when you want to navigate from another dart file,

Navigator.push(context, new MaterialPageRoute(builder: (context) => AboutView(2)));

Answered By – Bhoomika Chauhan

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *