Блог

Я создаю приложение для отслеживания расстояния между 2 точками на футбольном поле.

Я знаю, какой длины поле на самом деле, скажем, 100 метров для удобства. Я хочу иметь возможность измерять расстояние между 2 точками, независимо от размера экрана (его необходимо перевести в реальные измерения, такие как метры или ярды).

Ресурс изображения будет установлен в качестве фона для контейнера. В настоящее время я могу отслеживать местоположение точек, в которых я размещаю начальную позицию и конечную позицию, но это отображается только в координатах X и Y в соответствии с моим экраном.

Как я могу сделать это измерение независимым от экрана и преобразовать его в счетчики точно и последовательно, независимо от используемого устройства?

Спасибо!

Простой способ определения расстояния между Offset ними похож на

(_goalKeeper! - _playerOffset!).distance .

Для адаптивного пользовательского интерфейса я использую LayoutBuilder

 class _TState extends Statelt;Tgt; {  Offset? _goalKeeper;  Offset? _playerOffset;   @override  Widget build(BuildContext context) {  return Scaffold(  body: LayoutBuilder(  builder: (context, constraints) {  return GestureDetector(  onPanUpdate: (details) {  // you can choose others method like tapDown etc that will provide details  //* goal keeper point  _goalKeeper =  Offset(constraints.maxWidth / 2, 0); // top center point   // global or local depends on code-structure check offical doc for more  _playerOffset =  Offset(details.localPosition.dx, details.localPosition.dy);   setState(() {});  },  child: Container(  // full body will take touch event  color: Colors.green,  child: Stack(  children: [  const Align(  alignment: Alignment.topCenter,  child: Icon(Icons.ac_unit),  ),  if (_playerOffset != null)  Text(  "distance ${(_goalKeeper! - _playerOffset!).distance}"),  if (_playerOffset != null)  Positioned(  left: _playerOffset!.dx,  top: _playerOffset!.dy,  child: Icon(Icons.person))  ],  ),  ),  );  },  ),  );  } }