dart - Flutter - How do I center the CustomPaint inside my InteractiveViewer? - Stack Overflow

admin管理员组

文章数量:1406344

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

Share Improve this question Follow edited Mar 13 at 6:55 ankushlokhande 1,9381111 silver badges3131 bronze badges asked Mar 12 at 6:18 Angelo HeideAngelo Heide 2133 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

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.

本文标签： dartFlutterHow do I center the CustomPaint inside my InteractiveViewerStack Overflow