颤动的材料抽屉导航到页面 [英] Flutter material drawer navigate to pages
问题描述
我是Flutter的新手,我还在学习.
我按照
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(),
],
),
),
);
}
}
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,
);
},
}
这篇关于颤动的材料抽屉导航到页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!