Horizontal ScrollableList can't be centered

Issue by HansMuller
Monday Sep 21, 2015 at 22:46 GMT
Originally opened as https://github.com/flutter/engine/issues/1263

A ScrollableList with scrollDirection: ScrollDirection.horizontal ends up consuming all available vertical space. Having it occupy its "natural" vertical extent instead, i.e. the height of the highest element seen so far, would be more intuitive. As a result, centering a horizontal scrolling list can be frustrating. Centering it in terms of its natural height doesn't appear to be possible.

import 'dart:async';
import 'package:sky/widgets.dart';
import 'package:sky/rendering.dart';

// This app wants to put a horizontal ScrollableList in the center
// of the screen. What happens instead is that the occupies
// all available height.
//
// The code that's not commented out was my hopeful approach.

class TestApp extends App {
  static const double itemExtent = 50.0;

  Widget build() {
    Widget list = new ScrollableList<int>(
      scrollDirection: ScrollDirection.horizontal,
      items: new List.generate(50, (n) => n),
      itemExtent: itemExtent,
      itemBuilder: (n) {
        return new Container(
          key: new ValueKey<int>(n),
          width: itemExtent,
          // Surprisingly, providing an item height doesn't affect the layout.
          // Don't want to specify a height anyway.
          // height: 100.0,
          decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FF00)),
          child: new Text("Item $n")
        );
      }
    );

    // This works but requires giving the list a fixed height. FTR: specifying
    // shrinkWrap: ShrinkWrap.height for Center doesn't change anything.
    // return new Center(child: new Container(child: list, height: 100.0));

    // This fails, the list ends up at the top of the screen and extends to the bottom.
    return new Center(child: list);
  }
}

void main() {
  runApp(new TestApp());
  //new Timer(new Duration(seconds: 1), debugDumpRenderTree);
}

This issue is WONTFIX. We don't use the intrinsic height by default because it's slow. In the example in this bug report, ScrollableList is designed to have a very large number of children, many of which aren't visible and won't be materialized. If we used the intrinsic height, then we'd need to materialize all the children.

Block (which eagerly materializes its children) does support this feature if you wrap the Block in an IntrinsicHeight widget. This API is intentionally verbose to emphasize that measuring the intrinsic height is slow.

Another approach is to use a Viewport and a Row. That approach will produce a widget that sizes itself to its children's height and scrolls horizontally. However, that's also slow because it requires eagerly materializing all the children.

Disable LTO (flutter#168)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Horizontal ScrollableList can't be centered #168

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Horizontal ScrollableList can't be centered #168

Description

Activity

abarth commented on Mar 30, 2016

github-actions commented on Aug 17, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions