How to fix sidebar when using Navigation.of.push on iPad - flutter

Question

Sorry for my bad English.
Problem
I'm currently developing an application for iPad with Flutter.
It is only used on iPad, not on iPhone or Android.
I want to always display the sidebar where Items are arranged like BottomNavigationBar, but when using Navigator.of.push, moving screen with the sidebar disappeared.
What do I want to do
I wanna make the transition with the sidebar still displayed as in Twitter for iPad or Settings app for iPad, but if anyone knows how to do it, please let me know.
App top screen
Select item1 and push button
How can i set ios back button only on right screen like Settings App for iPad like this image?
I wanna create a UI like a Setting app for iPad.
Code
lib/main.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/master_detail_container.dart';
void main() => runApp(MyAppScreen());
class MyAppScreen extends StatefulWidget {
#override
_MyAppScreenState createState() => _MyAppScreenState();
}
class _MyAppScreenState extends State<MyAppScreen> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MasterDetailContainer(),
);
}
}
lib/ui/master_detail_container.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
import 'package:health_check/ui/item_listing.dart';
class MasterDetailContainer extends StatefulWidget {
#override
_ItemMasterDetailContainerState createState() =>
_ItemMasterDetailContainerState();
}
class _ItemMasterDetailContainerState extends State<MasterDetailContainer> {
Item _selectedItem;
Widget _sideBar() {
return Flexible(
flex: 1,
child: Material(
elevation: 4.0,
child: ItemListing(
itemSelectedCallback: (item) {
setState(() {
_selectedItem = item;
});
},
selectedItem: _selectedItem,
),
),
);
}
Widget _itemContent() {
return Flexible(
flex: 3,
child: ItemDetails(
item: _selectedItem,
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
_sideBar(),
_itemContent(),
],
),
);
}
}
lib/ui/item_listing.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
class ItemListing extends StatelessWidget {
ItemListing({
#required this.itemSelectedCallback,
this.selectedItem,
});
final ValueChanged<Item> itemSelectedCallback;
final Item selectedItem;
#override
Widget build(BuildContext context) {
// return
return ListView(
children: items.map((item) {
return ListTile(
title: Text(item.title),
onTap: () => itemSelectedCallback(item),
selected: selectedItem == item,
);
}).toList(),
);
}
}
lib/ui/item_details.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item1_screen.dart';
import 'package:meta/meta.dart';
class ItemDetails extends StatelessWidget {
ItemDetails({
#required this.item,
});
final Item item;
#override
Widget build(BuildContext context) {
final TextTheme textTheme = Theme.of(context).textTheme;
final Widget content = Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("Button"),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => Item1Screen()));
},
),
Text(
item?.title ?? 'No item selected!',
style: textTheme.headline,
),
Text(
item?.subtitle ?? 'Please select one on the left.',
style: textTheme.subhead,
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('Appbar'),
),
body: Center(child: content),
);
}
}
lib/ui/item1_screen.dart
import 'package:flutter/material.dart';
class Item1Screen extends StatelessWidget {
Item1Screen();
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Item1 detail'),
),
body: Center()
);
}
}
lib/ui/item.dart
import 'package:meta/meta.dart';
class Item {
Item({
#required this.title,
#required this.subtitle,
});
final String title;
final String subtitle;
}
final List<Item> items = <Item>[
Item(
title: 'Item 1',
subtitle: 'This is the first item.',
),
Item(
title: 'Item 2',
subtitle: 'This is the second item.',
),
Item(
title: 'Item 3',
subtitle: 'This is the third item.',
),
];