PageScrollZoom

import 'dart:typed_data';
import 'dart:ui';

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

class PageScrollZoom extends StatefulWidget {
  const PageScrollZoom({super.key});

  @override
  State<PageScrollZoom> createState() => _PageScrollZoomState();
}

final GlobalKey _cropperKey = GlobalKey(debugLabel: 'cropperKey');

final List<ProductModel> products = [
  ProductModel(
      image: Assets.images.menu1.path,
      name: 'Express Bowl Ayam Rica',
      category: ProductCategory.food,
      price: 32000,
      stock: 10),
  // ProductModel(
  //     image: Assets.images.menu2.path,
  //     name: 'Crispy Black Pepper Sauce',
  //     category: ProductCategory.food,
  //     price: 36000,
  //     stock: 10),
  // ProductModel(
  //     image: Assets.images.menu3.path,
  //     name: 'Mie Ayam Teriyaki',
  //     category: ProductCategory.food,
  //     price: 33000,
  //     stock: 10),
];

class _PageScrollZoomState extends State<PageScrollZoom> {
  int _pointersCount = 0;

  static Future<Uint8List?> crop({
    required GlobalKey cropperKey,
    double pixelRatio = 3,
  }) async {
    print('crop');
    // Get cropped image
    final renderObject = cropperKey.currentContext!.findRenderObject();
    final boundary = renderObject as RenderRepaintBoundary;
    final image = await boundary.toImage(pixelRatio: pixelRatio);

    // Convert image to bytes in PNG format and return
    final byteData = await image.toByteData(
      format: ImageByteFormat.png,
    );
    final pngBytes = byteData?.buffer.asUint8List();

    return pngBytes;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics:
          _pointersCount == 2 ? const NeverScrollableScrollPhysics() : null,
      child: Listener(
        onPointerDown: (_) => setState(() => _pointersCount++),
        onPointerUp: (_) => setState(() => _pointersCount--),
        child: Container(
          child: Column(
            children: [
              RepaintBoundary(
                key: _cropperKey,
                child: InteractiveViewer(
                    child: Image.asset(
                  products.first.image,
                  fit: BoxFit.fitWidth,
                )),
              ),
              for (var product in products) ...[
                const SizedBox(
                    width: double.infinity,
                    child: Divider(
                      thickness: 5,
                    )),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ClipOval(
                        child: CircleAvatar(
                          radius: 24,
                          child: Assets.icons.snack.svg(),
                        ),
                      ),
                    ),
                    const Text('User1'),
                  ],
                ),
                InteractiveViewer(
                    child: Image.asset(
                  product.image,
                  fit: BoxFit.fitWidth,
                )),
                const Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(Icons.favorite),
                    ),
                    Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(Icons.comment),
                    ),
                  ],
                )
              ],
              ElevatedButton(
                  onPressed: () {
                    print('value = ');
                    crop(cropperKey: _cropperKey).then((value) {
                      if (value != null) {
                        showDialog(
                            context: context,
                            builder: (_) => Image.memory(value));
                      }
                    });
                  },
                  child: Text('Crop'))
            ],
          ),
        ),
      ),
    );
  }
}