How to open a screen on flutter bottom navigation bar by passing selected index

1.3k Views Asked by At

I have three screens in my bottom navigation bar. One screen contains to button to the other screen. Normally when i click on the button, I want it to open the respective screen while maintaining the scaffold. This is how I proceeded: I added a variable in my bottom nav so that when I can pass an index in the route navigator in order to open that specific screen but i'm getting errors

this is my code


    import 'dart:ui';
    import 'package:anime_quiz/components/appbar.dart';
    import 'package:anime_quiz/components/quizDrawer.dart';
    import 'package:anime_quiz/screens/newsScreen/NewsScreen.dart';
    import 'package:anime_quiz/screens/homeScreen/homeScreen.dart';
    import 'package:anime_quiz/screens/quizScreens/quizScreen.dart';
    import 'package:anime_quiz/utilities/constants.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_svg/flutter_svg.dart';
    
    final _scaffoldKey = GlobalKey<ScaffoldState>();
    
    class LayOutScreen extends StatefulWidget {
      static const String id = "layOutScreen";
      final int selectedIndex;
      LayOutScreen({this.selectedIndex});
    
      @override
      _LayOutScreenState createState() => _LayOutScreenState();
    }
    
    class _LayOutScreenState extends State<LayOutScreen> {
      
      int _selectedIndex = 1;
      String _title;
    
      @override
      initState(){
        super.initState();
        _selectedIndex = widget.selectedIndex;
        _title = 'Home';
      }
    
      void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
          switch(index) {
            case 0: { _title = 'Anime Quiz'; }
            break;
            case 1: { _title = 'Home'; }
            break;
            case 2: { _title = 'Anime News'; }
            break;
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          key: _scaffoldKey,
          resizeToAvoidBottomInset: false,
          resizeToAvoidBottomPadding: false,
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(kH50),
            child: AppBarAQ(
              title: _title,
              onPress: () => _scaffoldKey.currentState.openDrawer(),
              leadIcon: 'assets/icons/icons8-naruto-50.png',
              actionIcon: null,
            ),
          ),
          bottomNavigationBar: SizedBox(
    
            height: 52,
            child: Container(
            height: 40,
              child: BottomNavigationBar(
                backgroundColor: kWhiteColor,
                unselectedItemColor: kGreyColor,
                selectedIconTheme: IconThemeData(),
                // showUnselectedLabels: false,
                items: <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                    icon: SvgPicture.asset(
                        'assets/icons/shuriken2.svg',
                        width: kH20),
                    label: 'Quiz',
                  ),
                  BottomNavigationBarItem(
                    icon: SvgPicture.asset(
                        'assets/icons/icons8-naruto-sign (2).svg',
                        width: kH20),
                    label: 'Home',
                  ),
                  BottomNavigationBarItem(
                    icon: SvgPicture.asset(
                        'assets/icons/scroll2.svg',
                        width: kH20),
                    label: 'News',
                  ),
                ],
                currentIndex: _selectedIndex,
                selectedItemColor: kPrimaryColor,
                onTap: _onItemTapped,
              ),
            ),
          ),
          drawer: QuizDrawer(),
    
          body: IndexedStack(
            index: _selectedIndex,
            children: [
              QuizScreen(),
              HomeScreen(),
              NewsScreen(),
            ],
          ),
        );
      }
    }

Here is how I use it


 SimpleCard(
     title1: 'ANIME',
     title2: 'QUIZ',
     onTap: () {Navigator.push(
       context,
       MaterialPageRoute(
            builder: (context) =>
                LayOutScreen(selectedIndex: 0)
       )
    );},
  ),

and i get this error

[what i'm getting] [1]: https://i.stack.imgur.com/pnuzf.png

here is the console

my console

1

There are 1 best solutions below

0
Taqi Tahmid Tanzil On

try like this

  1. declare a final int currentIndex;
  2. declare a constructor for your class yourclass({ this.currentIndex = 0 }); 0 is for first page
  3. navigate like yourclass(currentIndex: 0));