Флаттер создает бесконечный экран

Я представляю себе новый вид экрана, и я хотел бы сделать это с Flutter, так как он очень мощный для рендеринга быстро и плавно.

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

Перетащите и переведите
Увеличение и уменьшение масштаба
Нажмите и нажмите на другой компонент экрана (квадратный или любой другой)

Я предполагаю, что GestureDetector на моей карте "виджет" сочетается с transform на каждом компоненте insde и обновляет экран после каждого перемещения или перерисовывает каждый компонент с помощью draw но я не уверен, что это лучший способ следовать этому.

Спасибо за помощь, если у вас есть идеи!

Ответ 1

Интересное предложение. В конце концов, у меня нет реализации, но у меня есть некоторые указания.

Перевод, я думаю, может быть легко обработан двумя вложенными ListViews. Один, который прокручивает X, а другой - в направлении Y. ScrollController может быть запросами для всех видов информации.

Зум также довольно прост с первого взгляда: вы можете обернуть весь экран в виджет Transform.scale().

Вы можете обернуть каждый tappable виджет в GuestureDetector, запросить их RenderBox чтобы получить их положение на экране в локальных или глобальных координатах, получить их размер.

Примечание: в играх существует концепция, называемая расстоянием отсечения. Выяснить, как реализовать это во Флаттере, будет весело. Это позволяет вам не отображать слишком малые виджеты, например, масштабирование. Дайте мне знать, как это происходит! Любопытно.

Ответ 2

Я реализовал часть вещей, которые вы просили, за исключением "бесконечной карты". Код довольно навороченный, поэтому я описал этот материал в статье на Medium. Это позволяет:

переместить карту перетаскиванием
разместить новые объекты на карте
увеличить/уменьшить
щелкните объекты

GitHub репо.