cached_image_hero.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'CachedNetworkImage Hero',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(),
      );
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CachedNetworkImage')),
      body: _gridView(),
    );
  }

  _gridView() {
    return GridView.builder(
        itemCount: 250,
        gridDelegate:
            const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (BuildContext context, int index) {
          final url = 'https://loremflickr.com/500/500/music?lock=$index';

          return InkWell(
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => Scaffold(
                      appBar: AppBar(title: Text('Detail')),
                      body: Center(
                        child: Hero(
                          tag: url,
                          child: CachedNetworkImage(
                            imageUrl: url,
                            placeholder: _loader,
                            errorWidget: _error,
                          ),
                        ),
                      ),
                    ))),
            child: Hero(
              tag: url,
              child: CachedNetworkImage(
                imageUrl: url,
                placeholder: _loader,
                errorWidget: _error,
              ),
            ),
          );
        });
  }

  Widget _loader(BuildContext context, String url) => Center(
        child: CircularProgressIndicator(),
      );

  Widget _error(BuildContext context, String url, dynamic error) {
    return Center(child: const Icon(Icons.error));
  }
}