Edit Map

The map that allows users to interact with various 2-dimensional shapes.
Inspired by FlutterGallery 2D Transformations.

Show some ❤️ and star the repo to support the project

Resources:

• Pub Package
• GitHub Repository

Getting Started

Just import EditMap widget and start interacting:

class _MyHomeView extends StatefulWidget {
  const _MyHomeView({Key? key, required this.mapImageFile}) : super(key: key);

  final File mapImageFile;

  @override
  State<_MyHomeView> createState() => _MyHomeViewState();
}

class _MyHomeViewState extends State<_MyHomeView> {
  bool isDraggableDeskShown = false;
  List<DeskPayload> desks = [];
  DeskPayload? lastModifiedObject;

  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          InkWell(
            onTap: () {
              setState(() {
                if (lastModifiedObject != null) {
                  desks = desks.toList()..add(lastModifiedObject!);
                  lastModifiedObject = null;
                }
                isDraggableDeskShown = false;
              });
            },
            child: const Center(
              child: Text('Save'),
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                isDraggableDeskShown = true;
              });
            },
            child: const AspectRatio(
              aspectRatio: 1,
              child: Center(
                child: Text(
                  '+',
                  style: TextStyle(color: Colors.white, fontSize: 34),
                ),
              ),
            ),
          )
        ],
      ),
      body: SizedBox.expand(
        child: EditMap(
          isEditMode: true,
          mapImage: widget.mapImageFile,
          deskParamsList: desks,
          selectedDesk: isDraggableDeskShown
              ? DeskPayload(deskParams: const DeskParams(id: '1'))
              : null,
          onDeskMoved: (Offset deskPosition) {
            if (kDebugMode) {
              print(
                  '---desk moved---\nx:${deskPosition.dx}\ny:${deskPosition.dy}');
            }
            WidgetsBinding.instance.addPostFrameCallback((_) async {
              setState(() {
                lastModifiedObject = DeskPayload(
                  deskParams: DeskParams(
                    id: (++index).toString(),
                    area: Area(position: deskPosition),
                  ),
                );
              });
            });
          },
        ),
      ),
    );
  }
}

Feel free to open pull requests.

Acknowledgments

This package was originally created by Artemii Oliinyk.