Navigation in Flutter, E-Commerce App 3

Although we’ve discussed navigation in Flutter before, it’s still relevant in our e-commerce app.

Firstly, we’ve seen how we can manage themes across the app with the latest Material You design. 

Secondly, we have managed to display products on our home page with the help of a provider package. Therefore we have gone over the concepts like ChangeNotifier and listeners.

Although we will restate again, because throughout the e-commerce app, state management will take an important role.

Finally, in this section, we will take a look at how we can navigate to the product detail screen.

From the products home page a user should be able to reach the product detail screen. Right? 

Let’s take a look at the home page first.

To get all the products in one place we have a products class that uses mixins with ChangeNotifier.

It has mainly one purpose. 

We can get all the products at any time. On the other hand, we can also get any particular product by its ID.

Let’s take a brief look at the code.

mport 'package:flutter/material.dart';

import 'product.dart';

class Products with ChangeNotifier {
  final List<Product> _items = [
    Product(
      id: 'p1',
      title: 'Smart Phone',
      description: 'A Smart Phone - get big Discount!',
      price: 29.99,
      imageUrl:
          'https://cdn.pixabay.com/photo/2015/12/13/16/02/ios-1091302_960_720.jpg',
    ),
    Product(
      id: 'p2',
      title: 'Smart TV',
      description: 'A Smart TV.',
      price: 59.99,
      imageUrl:
          'https://cdn.pixabay.com/photo/2015/02/07/20/58/tv-627876_960_720.jpg',
    ),
....
List<Product> get items {
    return [..._items];
  }

  Product findById(String id) {
    return _items.firstWhere((prod) => prod.id == id);
  }
...
}
// code is incomplete for brevity
// for full code snippet please visit - GitHub Repository

Next, to show any product on the product detail screen, we need to navigate with ID as arguments.

Therefore, we have used our Product item controller to use navigation.

For that Gesture Detector can help us.

...
child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(
              ProductDetailScreen.routeName,
              arguments: id,
            );
          },
...
// code is incomplete for brevity
// for full code snippet please visit - GitHub Repository

Navigation in Flutter, route name

To make navigation in Flutter successful, we have declared the route name much before.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context);
    return MaterialApp(
      title: 'E Commerce App',
      theme: theme.dark(settings.value.sourceColor),
      home: const ProductsOverviewScreen(),
      routes: {
        ProductDetailScreen.routeName: (ctx) => const ProductDetailScreen(),
      },
    );
  }
}

As a result, we can now add other routes as well. When the app grows in volume, we need to add more routes. Right? 

Similarly we can now use the product detail screen to tap the ID of the product using the Provider package.

Let’s see the code. That’ll explain.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../models/products.dart';

class ProductDetailScreen extends StatelessWidget {
  static const routeName = '/product-detail';

  /// product detail page
  ///
  const ProductDetailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final productId =
        ModalRoute.of(context)!.settings.arguments as String; // is the id!
    final loadedProduct = Provider.of<Products>(
      context,
      listen: false,
    ).findById(productId);
    return Scaffold(
      appBar: AppBar(
        title: Text(loadedProduct.title),
      ),
      body: Container(
        width: 350.0,
        height: 350.0,
        margin: const EdgeInsets.all(20.0),
        child: Image.network(
          loadedProduct.imageUrl,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Firstly, we have got the particular product ID using the Modal Route class.

With the help of this class, we can get the ID. 

How it works, we’ll discuss in the next section.

Secondly, we have used the Provider package to find out the ID by accessing that method which we have declared in Products class.

Finally we can tap any image on the product’s home page and get the detail. 

On the product’s detail page we have displayed two properties of the Products class.

In AppBar we get the title and in the body section, we get the image. 

However, navigation in Flutter works. Next we’ll design this page in a manner so that everything pops up and the user can add to cart.

If you want to clone this GitHub repository, please visit this page.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Python and Data Science

Twitter