CODEWITHSUNDEEP
flutterdartlistviewzoomingpanning
Sharveen karunakaran
Sharveen karunakaran

Reputation: 11

Vertical direction zooming not working when listview is wrapped with interactive viewer widget in flutter

Requirement: Needs to have pinch zooming/panning in all directions and scrolling with fling support

Issue faced: To achieve this scenario tried wrapping listview.builder with interactiveviewer, but in this case, only x-axis i.e. horizontal zooming alone works, unable to zoom in the y direction. I suspect while zooming vertically, the Listview widget's gesture wins. The reason for using listView is having n number of widgets/children. So is there any workaround to achieve my requirement, kindly assist me in this, thanks in advance. I have attached the code below which I have tried.

Also kindly let me know is there any other widgets in Flutter to achieve my functionality.

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

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.red,
        child: InteractiveViewer(
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) {
              return Image.network(
                'https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
              );
            },
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 464

Answers (3)

Trees Tae
Trees Tae

Reputation: 61

use InteractiveViewer.builder()

Upvotes: 0

Grifball
Grifball

Reputation: 926

I'm not sure if this is your exact problem, but I was having trouble getting a ListView to do pinch zoom. I switched to using a "Column" wrapped inside an "InteractiveViewer" and set the "boundaryMargin" property of the InteractiveViewer to "EdgeInsets.all(double.infinity)". This lets the user see everything in the column. It also allows them to scroll infinitely in any direction, which might be problematic. I think this can be solved with more careful tuning of the boundaryMargin property.

Sources: https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html

https://api.flutter.dev/flutter/widgets/InteractiveViewer/boundaryMargin.html

Upvotes: 0

Moony-Stary
Moony-Stary

Reputation: 491

Set constrained property value false

InteractiveViewer(
  constrained: false,
...

Upvotes: 0

Related Questions