Implementing a bidirectional listview in Flutter

Question

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?

Answer 1

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);
                }),
              );
            },
          ),
        ),
      ),
    );
  }
}