ListView inside FittedBox not scrollable

user_2233706 0
Viewed 278

Although the FittedBox scales the ListView properly, I cannot scroll the ListView horizontally:

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      home: Scaffold(
          body: Container(
        height: 200,
        child: FittedBox(
          alignment: Alignment(-1, -1),
          fit: BoxFit.fitHeight,
          child: Container(
            height: 100,
            child: ListView.builder(
                itemCount: 20,
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemBuilder: (context, index) => Container(
                    width: 100,
                    height: 100,
                    child: Text(index.toString()),
                    decoration: BoxDecoration(border: Border.all(width: 3, color: Colors.red)))),
          ),
        ),
      )),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

Instead, the first few visible containers are displayed. The ListView scrolls properly without the FittedBox.

What's interesting is that if I specify a ScrollController() with an initialScrollOffset, the ListView is initially displayed at the specified scroll offset, but then animates back to offset 0.

dart flutter
1 Answers

I ended up wraping each ListView item inside a FittedBox. In my actual code, each list item is complex, so wrapping them in a FittedBox allows me to scale them responsively. It would have been nice if I could do the above while being able to scroll.

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      home: Scaffold(
          body: Row(
        children: [
          SizedBox(width: 30),
          Expanded(
            child: Container(
              height: 200,
              child: ListView.builder(
                  itemCount: 20,
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemBuilder: (context, index) => Container(
                        height: 200,
                        child: FittedBox(
                          alignment: Alignment.topLeft,
                          fit: BoxFit.fitHeight,
                          child: Container(
                              width: 100,
                              height: 100,
                              child: Text(index.toString()),
                              decoration: BoxDecoration(border: Border.all(width: 3, color: Colors.red))),
                        ),
                      )),
            ),
          ),
        ],
      )),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}
user_22337060
Related