Flutter create infinite screen

Question

I imagine a new kind of screen, and I would like to do it with Flutter since it's very powerful for rendering fast and smoothly.

I want to achieve a kind of infinite screen with kind of square or zone where you can move into. Actually exactly like a map (in fact not infinite but very large) but where I can:

• Drag and translate
• Zoom in and out
• Click and press on the different component of the screen (square or whatever)

I imagine use GestureDetector on my widget "map" combine with transform on each component insde and refresh the screen after each move, or redrawing each component with draw but I'm not sure it's the best way to follow with this.

Thanks for helping if you have any idea !!

Answer 1

I've implemented part of things you asked for except for the "infinite map". The code is quite beefy so I've described this stuff in an article on Medium. It allows:

• move map by dragging
• place new objects on the map
• zoom in/out
• click objects

GitHub repo.

Answer 2

Interesting proposal. I don't have the implementation, after all, it's up to you but I have some pointers.

Translation, I imagine, can easily be handled by 2 nested ListViews. One, that scrolls X and one that scrolls in Y direction. ScrollController can be queries for all kinds of info.

Zoom is also fairly easy at first blick: you can wrap the entire screen in a Transform.scale() widget.

You could wrap each tappable widget in a GuestureDetector, query for their RenderBox to get their position on screen in local or global coordinates, get their size.

Note: in games, there is a concept called clipping distance. Figuring out how to implement that in Flutter is going to be a fun challenge. It allows you not to render those Widgets that are too small, you zoomed out a lot eg. Let me know how it goes! Curious.

---