Error trying to use go_router with BottomNavigationWidget

Question

I'm doing a go_router practice and I'm trying to use it with BottomNavigationWidget, but I can't get it to work correctly, because I have the following problem: when I try to navigate without debugging, I don't go to any page and it stays on the main page, this router:

import 'package:bops_app_v3/screens/add_screen.dart';
import 'package:bops_app_v3/screens/home_screen.dart';
import 'package:bops_app_v3/screens/product_screen.dart';
import 'package:bops_app_v3/screens/profile_screen.dart';
import 'package:go_router/go_router.dart';

final router = GoRouter(routes: [
  GoRoute(
    path: '/',
    builder: (context, state) => const HomeScreen(),
  ),
  GoRoute(
    path: '/product',
    builder: (context, state) => const ProductScreen(),
  ),
  GoRoute(
    path: '/add',
    builder: (context, state) => const AddScreen(),
  ),
  GoRoute(
    path: '/profile',
    builder: (context, state) => const ProfileScreen(),
  ),
]);

This main:

import 'package:flutter/material.dart';

import 'config/app_router.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      routerConfig: router,
    );
  }
}

My bottom navigation bar:

import 'package:bops_app_v3/config/app_router.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class BottomNavigationWidget extends StatelessWidget {
  const BottomNavigationWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      selectedItemColor: Colors.blue,
      unselectedItemColor: Colors.black,
      onTap: (index) {
        switch (index) {
          case 0:
            context.go('/');
            break;
          case 1:
            router.go('/product');
            break;
          case 2:
            context.go('/add');
            break;
          case 3:
            context.go('/profile');
            break;
        }
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: 'Home'),
        BottomNavigationBarItem(
            icon: Icon(Icons.production_quantity_limits_outlined),
            label: 'Product'),
        BottomNavigationBarItem(icon: Icon(Icons.add_outlined), label: 'Add'),
        BottomNavigationBarItem(
            icon: Icon(Icons.person_2_outlined), label: 'Profile'),
      ],
    );
  }
}

Esta es mi home screen y las demas son iguales solo cambia el body:

import 'package:bops_app_v3/widget/botton_navegation_widget.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Text('Home screen'),
      bottomNavigationBar: const BottomNavigationWidget(),
    );
  }
}

Is there a typo in `router.go('/product')`? Should it be `context.go()`? — jraufeisen, Mar 10 '23 at 21:51

score 0 · Answer 1 · answered Mar 14 '23 at 05:35

0

For navigation using BottomNavigationBar you don't need context.go(), you can add those pages in List and use IndexedStack inside your Scaffold. IndexedStack has field index, where you can pass index of page to be shown.

answered Mar 14 '23 at 05:35

Akhmadkhuja Ibrokhimov

31
4

score 0 · Answer 2 · answered Jun 02 '23 at 13:09

0

I think ShellRoute would work for your requirement. Please take a look at: ShellRoute documentation

If you have any doubts, please let me know and I will be happy to explain.

answered Jun 02 '23 at 13:09

Aditya Arora

351
2
7

Error trying to use go_router with BottomNavigationWidget

2 Answers2