Skip to content

ListWheelScrollView renders children with offset, if they were hidden on the first render #123497

Description

@nt4f04uNd

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Tap the Floating action button to reveal the children of the ListWheelScrollView

Expected results: Items correctly rendered. This can be achieved by setting visible = true on the first render.

Actual results: Items have a half-screen offset. If you drag the list up and down, so items are recreated, they receive the correct offset.

Code sample
import 'dart:developer';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FixedExtentScrollController scrollController;

  bool visible = false;

  @override
  void initState() {
    scrollController = FixedExtentScrollController();
    super.initState();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(visible ? Icons.visibility : Icons.visibility_off),
        onPressed: () {
          setState(() {
            visible = !visible;
          });
        },
      ),
      body: ListWheelScrollView(
        controller: scrollController,
        renderChildrenOutsideViewport: false,
        clipBehavior: Clip.none,
        physics: const FixedExtentScrollPhysics(),
        itemExtent: 110,
        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
            .map(
              (letter) => Visibility(
                visible: visible,
                child: GestureDetector(
                  onTap: () => log('Letter "$letter" is pressed.'),
                  child: Container(
                    margin: const EdgeInsets.all(10),
                    height: 90,
                    color: Colors.yellow,
                    child: Center(
                      child: Text(
                        letter,
                        style: const TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}
Logs
[!] Flutter (Channel unknown, 3.8.0-15.0.pre.26, on macOS 12.0.1 21A559 darwin-x64, locale ru-RU)
    ! Flutter version 3.8.0-15.0.pre.26 on channel unknown at /Users/nt4f04und/development/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    ! Unknown upstream repository.
      Reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    • Framework revision 19b2aa14c0 (3 hours ago), 2023-02-23 09:03:39 -0500
    • Engine revision c87028288a
    • Dart version 3.0.0 (build 3.0.0-266.0.dev)
    • DevTools version 2.22.1
    • Pub download mirror https://pub.dartlang.org
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
    • Android SDK at /Users/nt4f04und/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] VS Code (version 1.75.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)             • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone SE (3rd generation) (mobile) • D4DF8A02-4DAA-40CF-9774-AF505CB3520B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5
      (simulator)
    • macOS (desktop)                     • macos                                • darwin-x64     • macOS 12.0.1 21A559 darwin-x64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 110.0.5481.100

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
Screenshots expected actual

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    f: scrollingViewports, list views, slivers, etc.
    a: layoutSystemChrome and Framework's Layout Issues
    on Mar 26, 2023
  2. added
    P2Important issues not at the top of the work list
    on Mar 28, 2023
  3. added a commit that references this issue on Apr 18, 2023
    3ba249a
  4. github-actions commented on May 2, 2023

    @github-actions

    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.

  5. locked as resolved and limited conversation to collaborators on May 2, 2023
  6. added
    r: fixedIssue is closed as already fixed in a newer version
    on Jun 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: layoutSystemChrome and Framework's Layout Issuesf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions