The logic for switching between branches with the navigationShell objectĪnd now that we’ve covered the core functionality, let’s make our UI responsive.To display one of these notifications, obtain the ScaffoldMessengerState for the current BuildContext via ScaffoldMessenger.of and use the. This class provides APIs for showing snack bars and material banners at the bottom and top of the screen, respectively. A custom ScaffoldWithNestedNavigation widget that declares the desired shell UI using a NavigationBar Manages SnackBar s and MaterialBanner s for descendant Scaffold s.A StatefulShellRoute which defines a list of branches.example : AppBar ( title : const Text ( ' Flutter Complete Reference 2. To make this possible, we only needed a few ingredients: The ultimate reference for Dart and Flutter. Note how the counter value is preserved when switching between tabs Here’s what the end result looks like: Stateful nested navigation example. Stateful nested navigation “just works”, and each branch remembers its own state (all the pages inside each tab).A sample video is given below to get an idea about. We can easily switch between tabs (using navigationShell.goBranch) by writing only stateless code For that under the flutter add a assets section and image like below.Stateful Nested Navigation: SummaryĪs it turns out, the code above already solves these problems: In this example, four elements are arranged into a column: an image, two rows. That’s because all the stateful logic lives inside the StatefulNavigationShell class itself - a widget that manages the state of a StatefulShellRoute, by creating a separate Navigator for each of its nested branches. What’s great about using navigationShell is that we don’t have to store and update any state (such as the selected index) inside our ScaffoldWithNestedNavigation (which is a StatelessWidget). Metadata dart:async import package:example/pages/tabbedpage.dart import package:flutter/material.dart import package:superscaffold/. What you need to do is pass the key argument when calling the constructor of ScaffoldMessenger. There is another way to get ScaffoldMessengerState. call the goBranch method so we can switch to a new branch when a new destination is selected The examples above use ScaffoldMessenger.of method to get the nearest instance of ScaffoldMessengerState.retrieve the currentIndex that we can pass to the NavigationBar.currentIndex, destinations: const, onDestinationSelected: _goBranch, ), ) Scaffold ( body: navigationShell, bottomNavigationBar: NavigationBar ( selectedIndex: navigationShell. settings )), ], onDestinationSelected: ( index ) Īs we can see, the navigationShell is passed directly to the body of the Scaffold: home )), NavigationDestination ( label: 'Section B', icon: Icon ( Icons. If you are using Flutter and VS Code, consider using Flutter Riverpod. Scaffold ( body: /* TODO: decide which page to show, depending on the selected index */, bottomNavigationBar: NavigationBar ( selectedIndex: /* TODO: where does this come from? */, destinations: const widget NavigationDestination ( label: 'Section A', icon: Icon ( Icons.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |