how to navigate from one page to another in flutter 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'),
      ),
    );
  }
}