7

How do you implement a bidirectional scroll view in Flutter? ListView has a scrollDirection field however it can only take either Axis.horizontal or Axis.vertical. Is is possible to have both?

user3217522
  • 5,786
  • 7
  • 26
  • 34

2 Answers2

7

Here's a potential solution using an outer SingleChildScrollView. You could also use a PageView of multiple ListViews if you're ok with the offscreen ListViews being torn down.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return new Scaffold(
      body: new SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: new SizedBox(
          width: 1000.0,
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int i) {
              return new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: new List.generate(5, (int j) {
                  return new Text("$i,$j", style: themeData.textTheme.display2);
                }),
              );
            },
          ),
        ),
      ),
    );
  }
}
Collin Jackson
  • 110,240
  • 31
  • 221
  • 152
  • Interesting. Any thoughts on if it would be possible to scroll on a diagonal? meaning both horizontal and vertical scrolling are performed at the same time? – user3217522 Jul 17 '17 at 16:08
  • Unless you have a lot of content, I think you should probably just use a `GestureDetector` to reposition an element when the user drags, rather than making it scrollable... the main thing that Scrollables provide is bounce physics and overscrow glow when you get to the end... how much do you care about that? – Collin Jackson Jul 17 '17 at 16:13
  • Oh then it sounds like repositioning elements is really what I need. So my content is gonna go beyond horizontal and vertical limits of the screen. So whichever direction I fling, or drag, I'd like to reposition my items while adding deceleration when the user releases his or her finger for a more natural feel – user3217522 Jul 17 '17 at 16:21
1

See my answer on this question that I posted and self-answered. I'm not aware of a way to do it with a single Scrollable, although I can imagine it being useful.

You can't easily solve this with an infinite-length ListView.builder because it only goes in one direction. If you want to wrap in both directions, it is possible to simulate bidirectional wrapping with a Stack of two Viewports going in opposite directions.

There's a code sample on the question too (you might have to modify the answer a bit if you don't want wrapping).

Collin Jackson
  • 110,240
  • 31
  • 221
  • 152