Search code examples
flutterflutter-layoutflutter-widget

flutter widget InteractiveViewer inside Scaffold body


I have InteractiveViewer inside Scaffold, and inside them one time I have landscape images, another time portrait image. But dimensions of InteractiveViewer always have dimension like on page startup. How to allow to display image inside InteractiveViewer on whole body? Here is code:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body:Center( child: InteractiveViewer(
          boundaryMargin: const EdgeInsets.all(20.0),
          maxScale: 5.0,
          child: FlutterLogo(size: 100),
        ),),)
      
    );
  }
}

output when I resize object inside InteractiveViewer with fingers: enter image description here but I expect: enter image description here


Solution

  • You can use clipBehavior: Clip.none, But the view depend on inner size. Also can be experiment on constrained: false

     InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(2.0),
        clipBehavior: Clip.none,
        maxScale: 5.0,
        child: FlutterLogo(size: 100)),
    

    But the child has to be bigger for InteractiveViewer

    body: Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(2.0),
        maxScale: 5.0,
        minScale: 1,
        child: SizedBox(
          width: 500, // this
          height: 500,
          child: Center(child: FlutterLogo(size: 100)),
        ),
      ),
    ),