如何在 flutter 的抽屉小部件中使用与底部导航栏相同的导航路线？

Question

I already have a bottom navigation bar which navigates to different pages. then I add a drawer which I want it to change the widget in the body only, but the issue is that I made the drawer in another page and I called it, so it is not responding or I'm not calling it perfectly as I should.

Below is the navigation for the bottomnavigationbar, I have imported all necessary files

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentTab = 0;
  final tabs = [
    IndexPage(),
    Save(),
    Invest(),
    Wallet(),
    Cards(),
  ];

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.grey[900],
      debugShowCheckedModeBanner: false,
      title: 'Flochristos App',
      theme: ThemeData(),
      home: Scaffold(
        backgroundColor: Colors.black,
        resizeToAvoidBottomPadding: false,
        resizeToAvoidBottomInset: false,
        key: _scaffoldKey,
        appBar: AppBar(
          backgroundColor: Colors.grey[900],
          title: Text(
            'PettySave',
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.brightness_7_outlined),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.keyboard_arrow_down_sharp),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.account_circle_rounded),
              onPressed: () {},
            ),
          ],
          //shadowColor: Colors.grey,
        ),


        body: tabs[currentTab], //this is where I want to change the pages



        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int index) {
            setState(() {
              currentTab = index;
            });
          },
          currentIndex: currentTab,
          backgroundColor: Colors.grey[900],
          unselectedIconTheme: IconThemeData(color: Colors.grey),
          selectedItemColor: Colors.green,
          unselectedItemColor: Colors.grey,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home_filled),
              // ignore: deprecated_member_use
              title: Text(
                "Home",
              ),
            ),
            BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.pagelines),
              // ignore: deprecated_member_use
              title: Text(
                "Save",
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.trending_up),
              // ignore: deprecated_member_use
              title: Text(
                "Invest",
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_balance_wallet_outlined),
              // ignore: deprecated_member_use
              title: Text(
                "Wallet",
              ),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.credit_card),
              // ignore: deprecated_member_use
              title: Text(
                "Cards",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

}

that's the main.dart code

body: tabs[currentTab], //this is where I want to change the pages

then I created another page for drawer which I called all appropriate pages

from one of the list style in the slidedrawer.dart, I'm trying to set currentTab to any index I want.... but it's not working.

ListTile(
                  contentPadding: EdgeInsets.fromLTRB(30, 0, 0, 0),
                  leading: Icon(
                    Icons.trending_up,
                    color: Colors.grey[500],
                  ),
                  title: Text(
                    'Investments',
                    style: TextStyle(
                      color: Colors.grey[300],
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      currentTab = 1;
                    });
                  },
                ),

I want the index to turn to Save()

Answer 1

List<Widget> tabs = [
    IndexPage(),
    Save(),
    Invest(),
    Wallet(),
    Cards(),
  ];

Answer 2

There are many ways to add a drawer to an app, but the most common one is to use the drawer property thats within the Scaffold() Widget.

ex

Scaffold(
  appBar: AppBar(
  ...
  ),
  drawer: Drawer() // This is where you call the new Widget(class) that you made the drawer in
  body: tabs[currentTab],
);

This is how I understood your question, correct me if I misunderstood it.

This is an example how I used a navigation tab bar in one of my projects.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../../providers/auth.dart';
import '../../../widgets/auth/admin/main_drawer.dart';
import '../../auth/profile_screen.dart';
import '../../home_screen.dart';
import './../projects_screen.dart';

class AdminTabBarScreen extends StatefulWidget {
  static const routeName = 'auth-tab-bar-view';
  @override
  _AdminTabBarScreenState createState() => _AdminTabBarScreenState();
}

class _AdminTabBarScreenState extends State<AdminTabBarScreen>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final auth = Provider.of<Auth>(context);
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('SHTEGU'),
      // ),
      extendBody: true,
      drawer: MainDrawer(), // this is where I called my drawer
      body: Container(
        // color: Colors.blueAccent,
        child: TabBarView(
          children: <Widget>[
            HomeScreen(),
            ProjectsScreen(),
            ProfileScreen(),
            // LoginScreen(),
          ],
          controller: _tabController,
        ),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.all(16.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(
            Radius.circular(50.0),
          ),
          child: Container(
            color: Colors.black26,
            child: TabBar(
              labelColor: Color(0xFFC41A3B),
              unselectedLabelColor: Colors.white,
              labelStyle: TextStyle(fontSize: 13.0),
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(color: Colors.black54, width: 0.0),
                insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
              ),
              //For Indicator Show and Customization
              indicatorColor: Colors.black54,
              tabs: <Widget>[
                Tab(
                  text: 'Home',
                ),
                Tab(
                  text: 'Projects',
                ),
                Tab(
                  text: 'Profile',
                ),
                // Tab(
                //   text: 'Login',
                // ),
              ],
              controller: _tabController,
            ),
          ),
        ),
      ),
    );
  }
}

Here is how I called the class above to check if admin

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../screens/auth/admin/admin_tab_bar_screen.dart';
import '../../screens/auth/user_tab_bar_screen.dart';
import '../../providers/auth.dart';

class AuthTabBarScreen extends StatelessWidget {
  static const routeName = 'auth-tab-bar-view';
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Provider.of<Auth>(context, listen: false).isAdmin(),
      builder: (context, snapshot) => snapshot.hasData
          ? snapshot.data
              ? AdminTabBarScreen()
              : UserTabBarScreen()
          : CircularProgressIndicator(), // while you're waiting for the data, show some kind of loading indicator
    );
  }
}

And here is my drawer:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../../screens/auth/admin/register_user_screen.dart';
import '../../../screens/auth/auth_tab_bar_screen.dart';
import '../../../screens/tab_bar_screen.dart';
import '../../../providers/auth.dart';

class MainDrawer extends StatelessWidget {
  Widget buildListTile(
      String title, IconData icon, Function tapHandler, BuildContext ctx) {
    return ListTile(
      tileColor: Color(0xffF2F7FB),
      selectedTileColor: Theme.of(ctx).accentColor,
      leading: Icon(
        icon,
        size: 26,
        color: Theme.of(ctx).primaryColor,
      ),
      title: Text(
        title,
        style: TextStyle(
          fontFamily: 'RobotoCondensed',
          fontSize: 16,
          fontWeight: FontWeight.bold,
          color: Theme.of(ctx).primaryColor,
        ),
      ),
      onTap: tapHandler,
    );
  }

  @override
  Widget build(BuildContext context) {
    final authData = Provider.of<Auth>(context, listen: false);
    return Drawer(
      child: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              buildListTile(
                'Home',
                Icons.home_rounded,
                () {
                  Navigator.of(context)
                      .pushReplacementNamed(AuthTabBarScreen.routeName);
                },
                context,
              ),
              buildListTile(
                'Add user',
                Icons.person_add_alt_1_rounded,
                () {
                  // Navigator.of(context).pop();
                  Navigator.of(context)
                      .pushReplacementNamed(RegisterUserScreen.routeName);
                },
                context,
              ),
              buildListTile(
                'Sign Out',
                Icons.exit_to_app_rounded,
                () {
                  authData.signOut();
                },
                context,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Hope this is at least of help to you:D