I have a bottom navbar but in some pages i want to hide it. How can i make it ? For example i want to see appbar in HomeScreen but i dont want see it on search screen. My code is like :
Scaffold(
backgroundColor: _selectedIndex == 0 ? Colors.transparent : Colors.white,
extendBodyBehindAppBar: _selectedIndex == 0 ? true : false,
bottomNavigationBar: _navBarItems,
body: Navigator(
onGenerateRoute: (settings) {
Widget page = const HomeScreen();
if (settings.name == '/help_center') {
page = const HelpCenterScreen();
} else if (settings.name == '/search') {
page = const SearchScreen();
}
return MaterialPageRoute(builder: (_) => page);
},
),
);
CodePudding user response:
Simple wrap _navBarItems with Visibility widget:
//class variable
bool _isVisible = true;//default true
Scaffold(
backgroundColor: _selectedIndex == 0 ? Colors.transparent : Colors.white,
extendBodyBehindAppBar: _selectedIndex == 0 ? true : false,
bottomNavigationBar: Visibility(
visible: _isVisible,
child: _navBarItems,
),
body: Navigator(
onGenerateRoute: (settings) {
Widget page = const HomeScreen();
if (settings.name == '/help_center') {
page = const HelpCenterScreen();
setState(() {
_isVisible = true;
});
} else if (settings.name == '/search') {
setState(() {
_isVisible = false;
});
page = const SearchScreen();
}
return MaterialPageRoute(builder: (_) => page);
},
),
);
And change visibility in if else structure with setState method.