Page 1 rebuilt when call Navigator.pushNamed to Page 2

Hi,
I have product list page, when i clicked on Product to see it details, the whole product page is rebuild. Let me know what could be the issue.

2 Likes

Hey,
Could you provide some of your code for that page? It’s hard to pinpoint the problem without the code.

2 Likes

Below is the code of two class,

In ProductItem I use Navigator to call other screens. when I tap on an image the Product Detail screen load.but also Product Item is reloaded. I used the print statement to see either it is calling or not.

ProductItem widgets Class

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../screens/product_detail_screen.dart';
import '../providers/product.dart';

class ProductItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context,listen: false);
    print('Product Build ');
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(ProductDetailScreen.routeName,
                arguments: product.id);
          },
          child: Image.network(
            product.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        footer: GridTileBar(
          leading: Consumer<Product>(
            builder: (ctx, product, child) => IconButton(
              icon: Icon(
                  product.isFavorite ? Icons.favorite : Icons.favorite_border),
              onPressed: () {
                product.toggleFavouriateStatus();
              },
              color: Theme.of(context).accentColor,
              //tooltip: child.toString(),
            ),
            //child: Text(product.title),
          ),
          backgroundColor: Colors.black87,
          title: Text(
            product.title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {},
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }
}

ProductDetailScreen

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

import '../providers/products.dart';

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

  @override
  Widget build(BuildContext context) {
    final productID = ModalRoute.of(context).settings.arguments as String;
    final loadedProduct = Provider.of<Products>(
      context,
      listen: false,
    ).findByID(productID);
    return Scaffold(
      appBar: AppBar(
        title: Text(loadedProduct.title),
      ),
      body: Center(
        child: Text('ProductDetailScreen'),
      ),
    );
  }
}

This behaviour is actually intended. It’s an open issue. If it’s affecting your performance a lot try using the const keyword ahead of the widgets.

This has some insight on how const will help.