[플러터] 탭한 위치의 위치값 찾기

탭한 위치의 위치값(Offset)을 찾으려고 한다. positioned tap detector 패키지를 사용한다.

 

패키지 호출

 

import 'package:positioned_tap_detector_2/positioned_tap_detector_2.dart';

 

 

탭할때마다, 위치값이 바뀔거고, setState처리 해주기 귀찮으니, provider 사용

 

class MyPosition with ChangeNotifier {

  TapPosition _position = TapPosition(Offset.zero, Offset.zero);

  TapPosition get position => _position;

  positionChange(TapPosition newpos) {

    _position = newpos;

    notifyListeners();

  }

}

 

 

TapPosition 값을 받아와서, provider에 전달하기 위한 메소드 작성

 

void setPosition(TapPosition newpos) =>

    context.read<MyPosition>().positionChange(newpos);

 

 

PositionedTapDetector2 앱으로 위치값을 반환할 대상 앱을 감싸주고, 위의 메소드를 onTap에 넣어줌

 

PositionedTapDetector2(

  onTap: setPosition,

  child: Container(

    width: double.infinity,

    height: double.infinity,

    color: Colors.yellow.withOpacity(0.3),

  ),

),

 

 

텍스트 위젯으로 확인해보면, ... 잘 나오는 것을 알 수 있고, orientation이 변해도 잘 작동하는 것을 알 수 있음.

 

Positioned(

  top: 60,

  left: 20,

  child: Text(

    'X position : ${context.watch<MyPosition>().position.relative!.dx.toStringAsFixed(1)}' +

        '\n'

            'Y position : ${context.watch<MyPosition>().position.relative!.dy.toStringAsFixed(1)}',

    style: const TextStyle(

      fontSize: 40,

    ),

  ),

),

 

 

끝.