如何导航与按钮和底部导航栏颤振?

Question

我是新来的扑动，我有一个大问题。我想使用一个底部导航栏，用于切换屏幕，我想在这些屏幕上有按钮，在那里我可以导航到另一个屏幕。当我试图将我写的代码与按钮放入onTab中时，它说它有上下文问题，我曾经使用按钮进行导航。有人能帮我吗?谢谢你的回答。这是我的代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
debugShowCheckedModeBanner: false,
home: FirstRoute(),
));
}
class FirstRoute extends StatefulWidget {
@override
_FirstRouteState createState() => _FirstRouteState();
}
class _FirstRouteState extends State<FirstRoute> {
int _currentIndex = 0;
final tabs = [
Center(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.indigo),
title: Text(
"Home",
style: TextStyle(color: Colors.indigo),
),
backgroundColor: Colors.indigo),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
color: Colors.indigo,
),
title: Text(
"Settings",
style: TextStyle(color: Colors.indigo),
),
backgroundColor: Colors.indigo),
BottomNavigationBarItem(
icon: Icon(Icons.folder, color: Colors.indigo),
title: Text(
"Saved",
style: TextStyle(color: Colors.indigo),
),
backgroundColor: Colors.indigo),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
appBar: PreferredSize(
preferredSize: Size.fromHeight(35.0),
child: AppBar(
title: Text(
"BeGentle",
),
backgroundColor: Colors.indigo,
),
),
body: Center(
child: new ListView(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(1.0),
spreadRadius: 5,
blurRadius: 10,
// changes position of shadow
),
],
),
height: 120.0,
width: 400.0,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.all(5.0),
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 
SecondRoute1()),
);
},
child: Text(
"Öffentlichkeit",
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(1.0),
spreadRadius: 5,
blurRadius: 10,
// changes position of shadow
),
],
),
height: 120.0,
width: 400.0,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.all(5.0),
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 
SecondRoute2()),
);
},
child: Text(
"Gesprächsthemen",
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(1.0),
spreadRadius: 5,
blurRadius: 10,
// changes position of shadow
),
],
),
height: 120.0,
width: 400.0,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.all(5.0),
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 
SecondRoute3()),
);
},
child: Text(
"Essen",
style: TextStyle(
fontSize: 34.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(1.0),
spreadRadius: 5,
blurRadius: 10,
// changes position of shadow
),
],
),
height: 120.0,
width: 400.0,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.all(5.0),
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 
SecondRoute4()),
);
},
child: Text(
"Treffen",
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(1.0),
spreadRadius: 5,
blurRadius: 10,
// changes position of shadow
),
],
),
height: 120.0,
width: 400.0,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.all(5.0),
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 
SecondRoute5()),
);
},
child: Text(
"Social Interacting",
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
],
),
),
);
}
}

Answer 1

使用IndexedStack小部件作为底部导航栏屏幕的主体，并使用此链接中的任何包作为底部导航栏https://pub.dev/packages?q=Bottom+Navigation+Bar并将您的屏幕名称粘贴到IndexedStack中，并使用导航栏上的onPressed更新索引变量。