I have this issue where the CustomPaint is always aligned left with InteractiveViewer and when panning while zoomed in I can't pan the whole image. I tried wrapping the InteractiveViewer in a SizedBox to no avail. I am a beginner at Flutter and am very confused, so any help is appreciated.

The code for reference:

class Home extends StatefulWidget {
  const Home({super.key});
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  final TransformationController _controller = TransformationController();

  Future<List<Map<String, dynamic>>> initialize() async {
    String svgFilePath = await loadSvgAsset('assets/svg/vmunimap.svg');
    return extractPathElements(svgFilePath);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('VMUniMap')),

      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        selectedIndex: currentPageIndex,
        destinations: const <Widget>[
          NavigationDestination(icon: Icon(Icons.map), label: 'Map'),
          NavigationDestination(icon: Icon(Icons.info), label: 'Info'),
        ],
      ),

      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: initialize(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else if (snapshot.hasData) {
            return InteractiveViewer(
              // clipBehavior: Clip.none,
              // transformationController: _controller,
              // constrained: false,
              maxScale: 1.5,
              minScale: 1,
              alignment: Alignment.center,
              // boundaryMargin: EdgeInsets.all(100),
              child: SizedBox(
                child: CanvasTouchDetector(
                  gesturesToOverride: [GestureType.onTapDown],
                  builder:
                      (context) => CustomPaint(
                        size: Size(
                          MediaQuery.of(context).size.width,
                          MediaQuery.of(context).size.height,
                        ),
                        painter: InteractiveMapPainter(
                          context: context,
                          pathList: snapshot.data!,
                        ),
                      ),
                ),
              ),
            );
          } else {
            return Text('No data');
          }
        },
      ),
    );
  }
}

I have this issue where the CustomPaint is always aligned left with InteractiveViewer and when panning while zoomed in I can't pan the whole image. I tried wrapping the InteractiveViewer in a SizedBox to no avail. I am a beginner at Flutter and am very confused, so any help is appreciated.

The code for reference:

class Home extends StatefulWidget {
  const Home({super.key});
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  final TransformationController _controller = TransformationController();

  Future<List<Map<String, dynamic>>> initialize() async {
    String svgFilePath = await loadSvgAsset('assets/svg/vmunimap.svg');
    return extractPathElements(svgFilePath);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('VMUniMap')),

      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        selectedIndex: currentPageIndex,
        destinations: const <Widget>[
          NavigationDestination(icon: Icon(Icons.map), label: 'Map'),
          NavigationDestination(icon: Icon(Icons.info), label: 'Info'),
        ],
      ),

      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: initialize(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else if (snapshot.hasData) {
            return InteractiveViewer(
              // clipBehavior: Clip.none,
              // transformationController: _controller,
              // constrained: false,
              maxScale: 1.5,
              minScale: 1,
              alignment: Alignment.center,
              // boundaryMargin: EdgeInsets.all(100),
              child: SizedBox(
                child: CanvasTouchDetector(
                  gesturesToOverride: [GestureType.onTapDown],
                  builder:
                      (context) => CustomPaint(
                        size: Size(
                          MediaQuery.of(context).size.width,
                          MediaQuery.of(context).size.height,
                        ),
                        painter: InteractiveMapPainter(
                          context: context,
                          pathList: snapshot.data!,
                        ),
                      ),
                ),
              ),
            );
          } else {
            return Text('No data');
          }
        },
      ),
    );
  }
}

• flutter
• dart
• svg
• alignment
• center

2 Answers 2

You are using the size of the screen as the size of the InteractiveViewer content. Try wrapping the Interactive viewer with a LayoutBuilder and setting those constraints to the CustomPainter size.

Also make sure you render the paint correctly respecting the given bounds

I fixed the issue of not being able to pan when zoomed in by using alignment top left, the only issue left is maybe the logic that I'm using to paint the paths.