Flutter 材质抽屉导航到页面

Question

I'm new to Flutter and I'm still learning.

I have created a plutter project with a material driven sidebar by following the tutorial of Techie Blossom

Techie however did not explain how to add navigation to different pages in his tutorial. I have been wrecking my brain trying to figure out how to do it but no luck yet.

Can you guys please help me. I have added my project to GitHub where you guys can find the code .

Thank you

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: drawerBackgroundColor,
        title: Text('MD Drawer'),
      ),
      body: BlocProvider<CmdNavBloc>(
        create: (context) => CmdNavBloc(),
        child: Stack(
          children: <Widget>[
            BlocBuilder<CmdNavBloc, NavigationStates>(
              builder: (context, state) {
                if (state is Dashboard) {
                  return DashBoardPage();
                } else if (state is Search) {
                  return SearchPage();
                } else if (state is Notifications) {
                  return SearchPage();
                } else if (state is Errors) {
                  return SearchPage();
                } else if (state is Settings) {
                  return SearchPage();
                }
              },
            ),
            CmdDrawer(),
          ],
        ),
      ),
    );
  }
}

Answer 1

There are many ways to do what you are looking for, but I saw that you were trying to use a Bloc to achieve that. It's a good option, so what you can do is use it, in the MyHomePage class as you can see below:

BlocProvider<CmdNavBloc>(
    create: (context) => CmdNavBloc(),
    child: Stack(
      children: <Widget>[
        BlocBuilder<CmdNavBloc, NavigationStates>(
          builder: (context, state) {
            if (state is Dashboard) {
              return DashBoardPage();
            } else {
              if (state is Search) {
                return SearchPage();
              } else {
                ....
              }
            }
          },
        ),
        CmdDrawer(),
      ],
    ),
  ),

Remember that Bloc works with Events and States, so you can add a state for each page as follows in your CmdNavBloc class and also yield this states instead of a Widget:

abstract class NavigationStates {}

class Dashboard extends NavigationStates {}

class Search extends NavigationStates {}

...

class CmdNavBloc extends Bloc<NavigationEvents, NavigationStates> {
  @override
  NavigationStates get initialState => Dashboard();

  @override
  Stream<NavigationStates> mapEventToState(NavigationEvents event) async* {
    switch (event) {
      case NavigationEvents.DashboardClickedEvent:
        yield Dashboard();
        break;
      case NavigationEvents.SearchClickedEvent:
        yield Search();
        break;

      ...
    }
  }
}

Next, you have a list of each item to populate in your Menu Drawer, you can add a Event to each item to make the things easy in the navigation, there are a lot of options to achieve this too, but is the easiest by the moment:

class CmdNavModel {
  String title;
  IconData icon;
  NavigationEvents navigationEvent;

  CmdNavModel({this.title, this.icon, this.navigationEvent});
}

List<CmdNavModel> navigationItems = [
  CmdNavModel(
      title: 'Dashboard',
      icon: Icons.insert_chart,
      navigationEvent: NavigationEvents.DashboardClickedEvent),
  CmdNavModel(
      title: 'Search',
      icon: Icons.search,
      navigationEvent: NavigationEvents.SearchClickedEvent),
  CmdNavModel(
      title: 'Notifications',
      icon: Icons.error,
      navigationEvent: NavigationEvents.NotificationsClickedEvent),
  CmdNavModel(
      title: 'Errors',
      icon: Icons.notifications,
      navigationEvent: NavigationEvents.ErrorsClickedEvent),
  CmdNavModel(
      title: 'Settings',
      icon: Icons.settings,
      navigationEvent: NavigationEvents.SettingsClickedEvent),
];

And finally, you can use the Bloc in the CmdDrawer as follows, and add the events to the Bloc from the onTap in your item: `

@override
Widget build(BuildContext context) {
    final CmdNavBloc bloc = BlocProvider.of<CmdNavBloc>(context);

    return AnimatedBuilder(
        animation: _animationController,
        builder: (context, widget) => getWidget(bloc,context, widget),
    );
}

...


Widget getWidget(CmdNavBloc bloc,context, widget) {
    ...
    itemBuilder: (context, counter) {
        return CollapsingListTile(
            onTap: () {
              setState(() {
                bloc.add(navigationItems[counter].navigationEvent);
                currentSelectedIndex = counter;
              });
            },
            isSelected: currentSelectedIndex == counter,
            title: navigationItems[counter].title,
            icon: navigationItems[counter].icon,
            animationController: _animationController,
          );
        },

}