0

I have bottom navigation implemented and I listed pages inside stateful widget class with list Widget as explained in official documentation. But on tap nothing is happening. Did I miss anything? Sorry if the question is too obvious, here is my code:

    class _LevelSelectionScreenState extends State<LevelSelectionScreen> {

    int currentPageIndex = 0;

    final destinations = [
    const MainMenuScreen(),
    const AvailabilityScreen(),
    const SettingsScreen(),
    ];

    @override
    Widget build(BuildContext context) {
    final playerProgress = context.watch<PlayerProgress>();

    return Scaffold(
    extendBody: true,
    bottomNavigationBar:
    
       Container(
         child: NavigationBar(
          
               onDestinationSelected: (int index) {
                 setState(() {
          currentPageIndex = index;
                 });
               },
               destinations: const <Widget>[
               NavigationDestination(
               selectedIcon: Icon(Icons.home),
               icon: Icon(Icons.home_outlined),
               label: 'Home',
                 ),
                 NavigationDestination(
               selectedIcon: Icon(Icons.book),
               icon: Icon(Icons.book_outlined),
               label: 'Learn',
                 ),
                 NavigationDestination(
               selectedIcon: Icon(Icons.person),
               icon: Icon(Icons.person_outlined),
               label: 'Profile',
                 ),
                ],
                ),
               ),
               ),
         
    
               body: 
    
               ResponsiveScreen(    
                .....
               ),
               )
        
               );
               [currentPageIndex];    
               }

               }

Full code: https://gist.github.com/ElenaEpstein/0c271bd8f3252eb30edae685831c4cb9

  • 1
    Could you add a link to the official documentation that you mentioned? Have you tried debugging the app? Does the onDestinationsSelected code get called? – John Weidner Aug 27 '23 at 19:54
  • Hello! I think I used this link https://api.flutter.dev/flutter/material/NavigationBar-class.html – Elena Epshtein Aug 27 '23 at 21:46
  • 2
    It looks like the most important part for what is going to be displayed is the "body" part and it doesn't look like you are including all of that in your question. Please update your question to show more of your code. – John Weidner Aug 28 '23 at 02:02
  • your body should be a list of widgets . Currently its ResponsiveScreen which is a single widget. – Clevino Alrin Aug 28 '23 at 08:43
  • @ClevinoAlrin, yes, thank you, but I need to keep them both, because the whole content is now placed inside the responsive screen – Elena Epshtein Aug 28 '23 at 12:48
  • @JohnWeidner, thank you! I just posted link on https://gist.github.com/ElenaEpstein/0c271bd8f3252eb30edae685831c4cb9, because the whole code doesn't fit. – Elena Epshtein Aug 28 '23 at 13:08
  • 1
    In the example of `NavigationBar` by Flutter, there's only one widget in body at an instance, thats why the [][currentPageIndex] is used ( which is array notation). Since you have a wrapper widget for the children , i suggest you try adding the children into `TabBarView`. More here https://api.flutter.dev/flutter/material/TabBarView-class.html – Clevino Alrin Aug 28 '23 at 15:10
  • @ClevinoAlrin Thank you very much! Can I use Persistent Bottom Navigation Bar instead? – Elena Epshtein Aug 29 '23 at 11:05
  • 1
    Sure thing! They both go better together. – Clevino Alrin Aug 29 '23 at 13:19

0 Answers0