Alex
Alex

Reputation: 33

Dart/Flutter - Scroll all columns/rows in ListView.builder / ListView.builder synchronously

Using ListView.builder, i need to display a 1000x1000 array on the smartphone screen and shift the array on the screen horizontally and vertically.

  1. How to make synchronous scrolling of all columns/rows while scrolling one column/row?

I tried to do it through the controller, but each nested column / row needs its own controller, and since there can be up to 1000 columns, you need to write all 1000 controllers (and this is a lot of code) and you need to synchronize them. Is it possible to write controllers through Map/List? If possible, how to do it?

  1. How to find out by how many pixels a column/row was scrolled in ListView.builder?

In the controller, i can specify how much to scroll / shift the column / row (to which the controller belongs), but I did not find how to find out how much the column / row was shifted.

import 'package:flutter/material.dart';

var users = List.generate(300, (j) => List.generate(300, (i) => '$j\n$i'));

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            ListView.builder(
              padding: const EdgeInsets.all(0),
              scrollDirection: Axis.horizontal,
              itemCount: users.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  width: 40,
                  height: 40,                  
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    addAutomaticKeepAlives: false,
                    shrinkWrap: true,
                    primary: false,
                    itemCount: users.length,
                    itemBuilder: (BuildContext context, int indexF) {
                      return Container(
                        width: 40,
                        height: 40,
                        margin: const EdgeInsets.only(right: 1.0, bottom: 1.0),
                        color: Colors.blueAccent,
                        child: Center(
                          child: Text(
                            users[index][indexF],
                            textAlign: TextAlign.center,
                            style: const TextStyle(fontSize: 12),
                          ),
                        ),
                      );
                    },
                  ),
                );
              },
            ),
          ],
        ),
      ),
    ),
  );
}

I couldn't find answers in the documentation. On the Internet, too, I could not find anything useful on the controller in ListView.builder.

Upvotes: 0

Views: 70

Answers (0)

Related Questions