cómo navegar a otra página en el ejemplo de código flutter

Luego de consultar con expertos en esta materia, programadores de varias áreas y maestros dimos con la respuesta al dilema y la plasmamos en este post.

Ejemplo 1: cómo abrir una página con botón flutter

// Within the `FirstRoute` widget
onPressed: () 
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );

Ejemplo 2: navegar entre páginas 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'),
    );
  

Ejemplo 3: navegar entre páginas 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;
    final categoryName = routeParameters['title'];
    final categoryId = routeParameters['id'];

    return Scaffold(
      appBar: AppBar(
        title: Text(categoryName),
      ),
      body: Center(
        child: Text('Category Product Page $categoryId'),
      ),
    );
  

Tienes la opción de sustentar nuestro análisis fijando un comentario o valorándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador