如何使用 Buttons 和 BottomNavigationBar Flutter 进行导航？答案

【问题标题】：How to navigate with Buttons and BottomNavigationBar Flutter?如何使用 Buttons 和 BottomNavigationBar Flutter 进行导航？
【发布时间】：2021-01-24 20:01:21
【问题描述】：

我是 Flutter 的新手，遇到了一个大问题。我想使用 BottomNavBar 来切换屏幕，并且我想在这些屏幕中拥有按钮，我可以在其中导航到另一个屏幕。当我试图将带有按钮的书面代码放入 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),
            ),
          ),
        ),
      ],
    ),
       ),
     );
    }
}

【问题讨论】：

链接的文件有 5941 行长……这对于任何人来说都太长了。你能只显示最相关的部分吗？
您好，即使您的问题包含示例代码（在外部链接中），我还是建议您将其减少到最低限度的可重现示例。我这样说是因为您提供的链接有 5,941 行代码，这让任何想要提供帮助的人都难以承受。
哦，是的，对不起，我会修复它
我已经修好了，现在好点了吗？

标签： ios flutter dart button navigation

【解决方案1】：

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

【讨论】：