flutter navigator between pages code example
Example 1: navigate between pages flutter
class Categories extends StatelessWidget {
void showCategoryProductPage(BuildContext ctx) {
Navigator.of(ctx).push(MaterialPageRoute(builder: (_) {
return CategoryProducts();
}));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView(
children: [
InkWell(
onTap: () => showCategoryProductPage(context),
child: Container(
child: Text(
'Fist Category',
),
),
),
],
),
);
}
}
class CategoryProducts extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Meal App'),
),
body: Text('Category Product Page'),
);
}
}
Example 2: navigate between pages flutter
############ USING NAMED ROUTES #############
void main() => runApp(MaterialApp(
home: Categories(),
routes: {
'/category-products': (ctx) => CategoryProducts()
},
));
class Categories extends StatelessWidget {
@override
Widget build(BuildContext context) {
void showCategoryProductPage(BuildContext ctx) {
Navigator.of(ctx).pushNamed('/category-products', arguments: {
'id': '125',
'title': 'Italian Dishes',
});
}
return Scaffold(
body: GridView(
children: [
InkWell(
onTap: () => showCategoryProductPage(context),
child: Container(
child: Text(
'Italian Dishes',
),
),
),
],
),
);
}
}
class CategoryProducts extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeContext = Theme.of(context);
final routeParameters = ModalRoute.of(context).settings.arguments as Map<String, String>;
final categoryName = routeParameters['title'];
final categoryId = routeParameters['id'];
return Scaffold(
appBar: AppBar(
title: Text(categoryName),
),
body: Center(
child: Text('Category Product Page $categoryId'),
),
);
}
}