Tuesday, March 21, 2023
HomeiOS Developmentandroid - Flutter change GNav tab from Button

android – Flutter change GNav tab from Button


I’ve 4 pages in a GNav() Backside-Navigation-Bar and I wish to navigate to completely different web page through click on of a button.
I’m conscious that there is perhaps comparable questions on stackoverflow already, nevertheless I used to be unable to implement any of them efficiently which is why I’m posting right here as my “final effort”.

First off, my Class RootPage() which is the place I’m defining my GNav bar and the pages linked to every tab.

import 'bundle:anitan/pages/menu_bar_pages/profile_page.dart';
import 'bundle:anitan/pages/menu_bar_pages/search_page.dart';
import 'bundle:anitan/pages/menu_bar_pages/settings_pages/settings_page.dart';
import 'bundle:firebase_auth/firebase_auth.dart';
import 'bundle:flutter/materials.dart';
import 'bundle:google_nav_bar/google_nav_bar.dart';
import 'home_page.dart';

class RootPage extends StatefulWidget {
  RootPage({tremendous.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage>{
  int currentPage = 0;

  Checklist<Widget> pages = const [
    HomePage(),
    ProfilePage(),
    SearchPage(),
    SettingsPage()
  ];

  last consumer = FirebaseAuth.occasion.currentUser!;

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
          physique: pages[currentPage],
          bottomNavigationBar: Container(
            coloration: Colours.inexperienced,
            baby: Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15),
              baby: GNav(
                backgroundColor: Colours.inexperienced,
                coloration: Colours.white,
                activeColor: Colours.white,
                tabBackgroundColor: Colours.inexperienced.shade800,
                hole: 8,
                onTabChange: (index) => setState(() => currentPage = index),
                selectedIndex: currentPage,
                padding: const EdgeInsets.all(16),
                tabs: const [
                  GButton(icon: Icons.home, text: "Home"),
                  GButton(icon: Icons.person, text: "My Page"),
                  GButton(icon: Icons.search, text: "Browse"),
                  GButton(icon: Icons.settings, text: "Settings"),
                ],
              ),
            ),
          ),
    );
  }
}

Subsequent up, the HomePage which has a button. When clicked, I wish to change the chosen tab of my GNav bar. Pushing the web page and so forth. will result in the Navigation Bar disappearing which is why this is not an choice.

import 'bundle:flutter/materials.dart';

class HomePage extends StatefulWidget {
  const HomePage({tremendous.key,});
 

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Textual content("Dwelling Web page"),
        automaticallyImplyLeading: false,
        main: IconButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          icon: const Icon(Icons.arrow_back_ios),
        ),
        actions: [
          IconButton(
            onPressed: () {
              debugPrint("appBar Button");
            },
            icon: const Icon(Icons.info_outline),
          ),
        ],
      ),
      physique: SafeArea(
        baby: ElevatedButton(onPressed: (() => print("Change Web page Right here")), baby: Textual content("Change-Web page")),
      ),
    );
  }
}

I attempted a couple of issues like implementing a StreamController or utilizing a GlobalKey. However I wish to the GNav Bar as an alternative of utilizing a Tab controller due to its design.

In idea, what I’m making an attempt to do appears easy:
I wish to currentPage to a brand new index and name setState() to indicate the adjustments.

Can anybody assist me perceive how I can entry change the index and replace the chosen web page in my RootPage?
I’ve spent 2 days trying into varied options however I can not get any of them to work.

Many thanks!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments