I have two screen A and B, screen A has a bottom navigation bar.
After i pushed screen A to screen B, bottom navigation bar of screen A still pin on screen B.
I want show full screen B without bottom navigation of screen A.
This is a screen A, it has a bottom naviagtion bar:
class Parent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TechOne',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: MyParentPage(title: 'TechOne'),
);
}
}
/*StatefulWidget is Widget with mutable*/
class MyParentPage extends StatefulWidget {
MyParentPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyParentPageState createState() => _MyParentPageState();
}
/*State is a manager of StatefulWidget*/
class _MyParentPageState extends State<MyParentPage>
with SingleTickerProviderStateMixin {
var _itemSelected = 0;
TabController _tabController;
final _bodyUI = [
HomeUI(),
SearchUI(),
Center(
child: Text('Notification'),
),
Center(
child: Text('Account'),
),
];
_onBottomNavigationBarTap(int index) {
print(_itemSelected);
setState(() {
_itemSelected = index;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
_tabController.animateTo(_itemSelected);
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: Values.itemsBottomNavigationBar,
onTap: (index) {
_onBottomNavigationBarTap(index);
},
currentIndex: _itemSelected,
selectedItemColor: Colors.red,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: <Widget>[
_bodyUI[0],
_bodyUI[0],
_bodyUI[2],
_bodyUI[3],
]));
}
}
Inside _bodyUI[0] widget, I push to screen B:
Navigator.push(context, MaterialPageRoute(builder: (context) => SearchUI()));
This is a screen B, bottom navigation bar still pin on here, i want hidden it:
class SearchUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'Search',
theme: ThemeData(primarySwatch: Colors.red),
home: MySearchPage(),
);
}
}
class MySearchPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MySearchState();
}
}
class _MySearchState extends State<MySearchPage> {
final TextEditingController _textEditingController = TextEditingController();
final FocusNode _focusNode = FocusNode();
TextField _appBarTitle;
@override
void initState() {
// TODO: implement initState
super.initState();
_appBarTitle = TextField(
controller: _textEditingController,
focusNode: _focusNode,
autofocus: true,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.sentences,
cursorColor: Colors.white,
cursorRadius: Radius.circular(16),
maxLines: 1,
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(
Icons.search,
color: Colors.white,
),
suffixIcon: IconButton(icon: Icon(Icons.clear, color: Colors.white,), onPressed: (){
_textEditingController.clear();
}),
hintText: 'Search...',
hintStyle:
TextStyle(color: Colors.white.withOpacity(0.5), fontSize: 18)));
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: _appBarTitle,
),
body: Center(
child: Text('Search Screen'),
),
);
}
}
Your code is calling a SearchUI() class as one of the TabBarViews :
Which means it's going to only change the view and keep the bar there.