Я новичок, чтобы трепетать и часами борюсь с его навигацией. На следующем изображении на странице 2 у нас есть AppBar, body и BottomNavigationBar, все работают.
Проблема в том, что я нажимаю на " Go на другую страницу ", я хочу полную страницу без предыдущего AppBar и BottomNavigationBar. Но я получаю это
Код для MyApp ниже
class NavApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation App',
home: NavAppPlaceholder(),
);
}
}
class NavAppPlaceholder extends StatefulWidget {
@override
State<StatefulWidget> createState() => _NavAppPlaceholderState();
}
class _NavAppPlaceholderState extends State<NavAppPlaceholder> {
final _navigatorKey = GlobalKey<NavigatorState>();
List<String> routes = ['/', '/page1', '/page2'];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
_navigatorKey.currentState.pushNamed(routes.elementAt(index));
}
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Main App'),),
body: WillPopScope(
child: Navigator(
initialRoute: '/',
key: _navigatorKey,
onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
switch (settings.name) {
case '/':
builder = (BuildContext context) => HomePage();
break;
case '/page1':
builder = (BuildContext context) => Page1();
break;
case '/page2':
builder = (BuildContext context) => Page2();
break;
case '/otherpage':
builder = (BuildContext context) => OtherPage();
break;
default:
throw Exception('Invalid route: ${settings.name}');
}
return MaterialPageRoute(
builder: builder,
settings: settings,
);
},
),
onWillPop: () async {
if (_navigatorKey.currentState.canPop()) {
_navigatorKey.currentState.pop();
return false;
}
return true;
},
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.pageview), title: Text('Page 1')),
BottomNavigationBarItem(
icon: Icon(Icons.description), title: Text('Page 2')),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Home page...!'));
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Page 1...!'));
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: FlatButton(onPressed: (){
Navigator.pushNamed(context, '/otherpage');
}, child: Text('Go to other page')));
}
}
class OtherPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Other Page')),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
],
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
],
),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
],
),
),
),
],
),
),);
}
}