zoom_view 0.0.13

Widget that allows both zooming and scrolling a ListView or other Scrollables

Widget that allows both zooming and scrolling a ListView or other Scrollables

Features

Scroll a ListView while it is zoomed in with fling velocity

Usage

Using ListView

import 'package:flutter/material.dart';
import 'package:zoom_view/zoom_view.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

class _MyAppState extends State<MyApp> {
  ScrollController controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomListView(
        child: ListView.builder(
            controller: controller,
            itemCount: 10000,
            itemBuilder: (context, index) {
              return Center(
                  child: Text("text $index")
              );
            }
        ),
      ),
    );
  }
}

Note that the controller argument most be set for your ListView.

Using some other scrolling list

class ZoomViewExample extends StatefulWidget {
  const ZoomViewExample({super.key});

  @override
  State<ZoomViewExample> createState() => _ZoomViewExampleState();
}

class _ZoomViewExampleState extends State<ZoomViewExample> {
  ScrollController controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomView(
        controller: controller,
        child: ListView.builder(
            controller: controller,
            itemCount: 10000,
            itemBuilder: (context, index) {
              return Center(
                  child: Text("text $index")
              );
            }
        ),
      ),
    );
  }
}

Note that here the controller is given both to the ZoomView and the List.

Using ScrollablePositionedList

add this class:

class ScrollOffsetToScrollController extends ScrollController{
  ScrollOffsetToScrollController({required this.scrollOffsetController});
  final ScrollOffsetController scrollOffsetController;

  @override
  ScrollPosition get position => scrollOffsetController.position;

  @override
  double get offset => 0.0;

  @override
  void jumpTo(double value){
    scrollOffsetController.jumpTo(value);
  }
}

Usage:

final ScrollOffsetController scrollOffsetController = ScrollOffsetController();

Column(
      children:[
        Expanded(
          child: ZoomView(
            controller: ScrollOffsetToScrollController(
                scrollOffsetController: scrollOffsetController,
            ),
            child: ScrollablePositionedList.builder(
              scrollOffsetController : scrollOffsetController,
              itemBuilder: (context, index) => Text('Item $index'),
            ),
          ),
        )
      ]
    );