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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example01-Lab12',
      home: MyBox(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class MyBox extends StatefulWidget {
  @override
  State<MyBox> createState() => _MyBoxState();
}
class _MyBoxState extends State<MyBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Thao tác cử chỉ trên mobile'),),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            padding: EdgeInsets.all(10),
            color: Colors.white60,
            child: Text('Chạm vào hình giữ và kéo hoặc zoom',style: TextStyle(fontSize: 26),),
          ),
        ],
      ),
    );
  }
}

Positioned(
 top: 0, //giá trị này sẽ phải cập nhật lại khi sự kiện thay đổi
 left: 0, //giá trị này sẽ phải cập nhật lại khi sự kiện thay đổi
 child: GestureDetector(
        onScaleStart: (detail){}, //sự kiện bắt đầu thay đổi
        onScaleUpdate:(detail){}, //sự kiện cập nht thay đổi
        child: SizedBox(
               width: 100, //giá trị này sẽ phải cập nhật lại khi sự kiện thay đổi
               height: 100, //giá trị này sẽ phải cập nhật lại khi sự kiện thay đổi
               child: const CircleAvatar(backgroundImage: AssetImage("assets/icon-support.png"), backgroundColor: Colors.white60,),
                       ),
           )
)

class _MyBoxState extends State<MyBox> {
  //tiêu điểm bắt đầu
  late Offset _startingFocalPoint;
  //vị trí trước
  late Offset _previousOffset;
  //vị trí hiện tại
  Offset _offset = Offset.zero;
  //giá trị zoom trước
  late double _previousZoom;
  //giá trị zoom ban đầu
  double _zoom = 1.0;
  //kích thước hình ban đầu
  final containerSize = const Size(100, 100);
  //phương thức đáp ứng sự kiện bắt đầu thay đổi tỉ lệ
  void _handleScaleStart(ScaleStartDetails details) {
    setState(() {
      _startingFocalPoint = details.focalPoint;
      _previousOffset = _offset;
      _previousZoom = _zoom;
    });
  }
  //phương thức đáp ứng sự kiện cập nhật lại giá trị khi thay đổi
  void _handleScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      _zoom = _previousZoom * details.scale;
      final Offset normalizedOffset = (_startingFocalPoint - _previousOffset) / _previousZoom;
      _offset = details.focalPoint - normalizedOffset * _zoom;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Thao tác cử chỉ trên mobile'),),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            padding: EdgeInsets.all(10),
            color: Colors.white60,
            child: Text('Chạm vào hình giữ và kéo hoặc zoom',style: TextStyle(fontSize: 26),),
          ),
          Positioned(
              top: _offset.dy,
              left: _offset.dx,
              child: GestureDetector(
                onScaleStart: _handleScaleStart, //sự kiện bắt đầu thay đổi
                onScaleUpdate:_handleScaleUpdate, //sự kiện cập nht thay đổi
                child: SizedBox(
                  width: containerSize.width * _zoom,
                  height: containerSize.height * _zoom,
                  child: const CircleAvatar(backgroundImage: AssetImage("assets/icon-support.png"), backgroundColor: Colors.white60,),
                ),
              )
          ),
        ],
      ),
    );
  }
}