main.dart

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

extension ImageExtension on num {
  int cacheSize(BuildContext context) {
    return (this * MediaQuery.of(context).devicePixelRatio).round();
  }
}

void main() {
  debugInvertOversizedImages = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  final String imagePath = 'assets/demo.jpg';
  final String imageUrl =
      'https://unsplash.com/photos/HHduE-PP8go/download?ixid=M3wxMjA3fDB8MXx0b3BpY3x8NnNNVmpUTFNrZVF8fHx8fDJ8fDE3MDg1NTM4MTV8&force=true';

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).devicePixelRatio);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        backgroundColor: Colors.white,
        body: Center(
          child: ListView(
            children: [
              const Text('Using cacheHeight and cacheWidth'),
              Image.asset(
                imagePath,
                cacheHeight: 1439,
                cacheWidth: 1080,
              ),
              const SizedBox(
                height: 20,
              ),
              const Text('Using ResizeImage'),
              Image(
                image: ResizeImage(
                  AssetImage(imagePath),
                  height: 1439,
                  width: 1080,
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Text(
                  'Using memCacheHeigh and memCacheWidth on CachedNetworkImage'),
              CachedNetworkImage(
                imageUrl: imageUrl,
                memCacheHeight: 1619,
                memCacheWidth: 1080,
              ),
              const SizedBox(
                height: 20,
              ),
              const Text('Using ResizeImage on CachedNetworkImageProvider'),
              Image(
                image: ResizeImage(
                  CachedNetworkImageProvider(
                    imageUrl,
                    // memCacheHeight: 1619,
                    // memCacheWidth: 1080,
                  ),
                  height: 1619,
                  width: 1080,
                ),
                // height: 1619,
                // width: 1080,
              ),
              const SizedBox(
                height: 20,
              ),
              const Text('Using dynamic cache size from extension'),
              Image.asset(
                imagePath,
                cacheHeight: 550.cacheSize(context),
                cacheWidth: 410.cacheSize(context),
              ),
              const SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}