Question 76858 in Flutter Question posted in
The official Flutter documentation can be found here.

How Can I change index of PageView from a Widget inside one of the pages? – Flutter

My ultimate goal is to animate a widget from one Page to another in a PageView, if you can help with that it would mean a lot. But for now, I can’t even change the page by tapping on the widget let alone animating it. I tried a similar approach to this video and initially I was able to make it work but just till the point where I could change the pages from BottomNavigationBar and by swiping the pages (which I could do normally too) but when I tried to apply it to change the values using the Widget, I wasn’t able to. It did not give any errors but it simply did nothing. I am unable to share the code now as I tried way too many things and now its a complete mess, Please mention if the code is an important requirement I will rewrite it and attach.

Note: If for the animation part somehow you can give me a way with Hero Widget it would be the best as with or without Hero I am trying to achieve the same animation as Hero would provide. I have only seen Hero being used with pictures, I don’t know if other widgets are possible.

I tried the solution mentioned in this StackOverflow answer it works but it opens a new page for me on top of the current page. This defeats the purpose I want to later incorporate which is animating the widget. Or if you can give me a way to solve it with that method will also be helpful.

These below are some screenshots of the UI of the app and I have mentioned what I want to achieve in the description of the problem.

Home Widget Page (Source) "home_widget.dart" contains the code for this.

TO

Search Widget Page (Destination) "search_widget.dart" contains the code for this.

These are 2 Pages in the PageView of my "home.dart" file

I want to tap on the search bar in "Home Widget Page" which will change the index of my BottomNavigationBar and also my PageView Controller so that the "Search Widget Page" shows.

EDIT 1:-

File/Class Structure of my project:-

lib
    screens
        home.dart    [code for the homepage contains the PageView and 
        the BottomNavBar]
    widgets
        home_widget.dart     [code for the First Page for PageView]
        search_widget.dart   [code for the Second Page for PageView]

The BottomNavBar and PageView are connected together which switch page together in the home.dart file and I want to tap the "Search bar" inside home_widget.dart and the Page index in home.dart should be updated to now render search_widget.dart

Tags:

2

Answers


  1. 0

    You need to give access that page to manipulate your page and tab controllers. Generally they will be passed as a parameter. Or You can declare them as static for StatefulWidget(or Stateless) class NOT STATE CLASS

    Login or Signup to reply.
  2. 0

    Use tab bar in bottom nav bar and pass the same tab controller there

    bottomNavigationBar: Card(
              margin: EdgeInsets.zero,
              elevation: 20,
              child: TabBar(
                  controller: _controller,
                  isScrollable: false,
                  labelColor: Colors.blue,
                  unselectedLabelColor: Colors.grey,
                  indicator: const BoxDecoration(),
                  labelStyle: AppTextStyle.kTitleMedium,
                  labelPadding: const EdgeInsets.only(bottom: 20, top: 10),
                  indicatorSize: TabBarIndicatorSize.label,
                  padding: EdgeInsets.zero,
                  indicatorColor: AppColors.kWhiteColor,
                  automaticIndicatorColorAdjustment: false,
                  onTap: homeBloc.togglePageOnIndex,
                  tabs: const [
                    Tab(
                      icon: Icon(
                        Icons.home,
                        size: 32,
                      ),
                      iconMargin: EdgeInsets.symmetric(vertical: 4),
                      text: 'home',
                    ),
                    Tab(
                      icon: Icon(
                        Icons.search,
                        size: 32,
                      ),
                      iconMargin: EdgeInsets.symmetric(vertical: 4),
                      text: 'search',
                    ),
                  ]),
            ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search