ListWheelScrollView not re-rendering children on setState #80776

dudizimber · 2021-04-20T08:08:18Z

Hi!
I'm using two ListWheelScrollViews where the state of the first one changes the children of the second one.
Basically, the first one lets the user pick a date and the second shows the available times.

Debugging, I could see that the children are changed after the setState called in the onSelectedItemChanged of the first ListWheelScrollViews, but they're not being rendered. Only after a hot-reload.

Both ListWheelScrollViews are inside a Stateful Widget under a BottomSheet and I tried putting them inside a StatefullBuilder but it also didn't help.

Expected results: Rendering the new children

Actual results: Only the "old" children

Logs

[√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Version 10.0.18363.1316], locale en-US)
    • Flutter version 2.0.2 at C:\flutter
    • Framework revision 8962f6dc68 (6 weeks ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Users\Admin-PC\AppData\Local\Android\Sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = C:\Users\Admin-PC\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio1\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio1
    • Flutter plugin version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.55.1)
    • VS Code at C:\Users\Admin-PC\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.21.0

[√] Connected device (2 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 89.0.4389.114

• No issues found!

The text was updated successfully, but these errors were encountered:

pedromassangocode · 2021-04-20T08:58:21Z

Hi @dudizimber
Can you please provide a minimal complete reproducible code sample?
Thank you

dudizimber · 2021-04-20T09:21:52Z

Yes.
Github Repo

You can see that once you scroll to the second "parent" item, it will render only one "child", and it will not render anything else event when you scroll to a parent item with more children.

Let me know if you need a GIF showing the issue.

pedromassangocode · 2021-04-21T07:49:06Z

Similar to #75606. They actually have the exact same root cause: the widget does not rebuild when its ListWheelChildListDelegate changes.

To reproduce, run the code bellow and select B and then A in the first list, notice that once you select A again it does not rebuild the second list because it thinks that the children param have not change.

minimal code sample

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Scaffold(
    body: Center(
        child: Builder(
          builder: (context) {
            return ElevatedButton(
              onPressed: () => showModalBottomSheet(
                context: context,
                builder: (context) => DateTimeRoller(),
              ),
              child: Text('Open BottomSheet'),
            );
          }
        )))),
);

class DateTimeRoller extends StatefulWidget {
  final int minimumWaitingPeriod;
  DateTimeRoller({this.minimumWaitingPeriod = 0});
  @override
  _DateTimeRollerState createState() => _DateTimeRollerState();
}

class _DateTimeRollerState extends State<DateTimeRoller> {
  FixedExtentScrollController dateController =
  FixedExtentScrollController(initialItem: 0);

  Map<String, List<String>> dates = {};
  int dateIndex = 0;
  String selectingDate;

  @override
  void initState() {
    super.initState();
    _fillDateMap();
  }

  _fillDateMap() {
    dates['A'] = ['0', '1', '2'];
    dates['B'] = ['0'];
    dates['C'] = ['4', '8', '1', '2', '3'];
    dates['D'] = ['0', '1'];
  }

  @override
  Widget build(BuildContext context) {
    print(dateIndex);
    return Container(
      color: Colors.white,
      constraints: BoxConstraints.tightFor(height: 300),
      child: Column(
        children: [
          Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(
                horizontal: 16,
              ),
              width: MediaQuery.of(context).size.width,
              height: 300,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width * .45,
                    height: 300,
                    child: ListWheelScrollView(
                      controller: dateController,
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: 50,
                      magnification: 1.2,
                      useMagnifier: true,
                      children: dates.keys.map((v) => Text(v)).toList(),
                      onSelectedItemChanged: (int index) {
                        String date = dates.keys.toList()[index];
                        setState(() {
                          dateIndex = index;
                          selectingDate = date + ":" + 0.toString();
                        });
                      },
                    ),
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width * .45,
                    height: 300,
                    child: ListWheelScrollView(
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: 50,
                      magnification: 1.2,
                      useMagnifier: true,
                      children: dates[dates.keys.elementAt(dateIndex)]
                          .map((v) => Text(v)).toList(),
                      onSelectedItemChanged: (int index) {
                        setState(() {
                          int dateIndex = dateController.selectedItem;
                          String date = dates.keys.toList()[dateIndex];
                          String hour = dates.values.toList()[dateIndex][0];

                          selectingDate = date + ":" + hour;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            child: Text(selectingDate != null ? selectingDate : '',
                style: TextStyle(
                  fontSize: 16,
                )),
          )
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.5, on macOS 11.2.3 20D91 darwin-x64, locale en-AO)
    • Flutter version 2.0.5 at /Users/pedromassango/Code/flutter_stable
    • Framework revision adc687823a (5 days ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 55.1.5
    • Dart plugin version 211.6693.108

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.128

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.2.0-11.0.pre.187, on macOS 11.2.3 20D91 darwin-x64, locale en-AO)
    • Flutter version 2.2.0-11.0.pre.187 at /Users/pedromassango/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5526dcc24b (35 minutes ago), 2021-04-20 22:34:02 -0700
    • Engine revision 610fd039ae
    • Dart version 2.14.0 (build 2.14.0-18.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 55.1.5
    • Dart plugin version 211.6693.108

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.128

! Doctor found issues in 1 category.

rvbiljouw · 2021-04-23T10:27:45Z

Is there a workaround for this atm? Being unable to update the children of the list view makes it unusable..

dam-ease · 2023-05-08T14:52:00Z

I am able to reproduce this issue on the latest stable and master channels.
Code Sample

flutter doctor -v

[✓] Flutter (Channel master, 3.11.0-2.0.pre.55, on macOS 13.3 22E252 darwin-arm64, locale en-NG)
    • Flutter version 3.11.0-2.0.pre.55 on channel master at /Users/dammya/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 835b892d7f (2 days ago), 2023-05-07 01:30:22 +0530
    • Engine revision 23f730efbf
    • Dart version 3.1.0 (build 3.1.0-83.0.dev)
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] VS Code (version 1.78.0)
    • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile)  • emulator-5554                        • android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro Max (mobile) • D7F3302D-D66F-4B89-B8CF-DBEE1CDB5449 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 112.0.5615.137

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

• No issues found!

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.3 22E252 darwin-arm64, locale
    en-NG)
    • Flutter version 3.7.12 on channel stable at /Users/dammya/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (3 weeks ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] VS Code (version 1.78.0)
    • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile)  • emulator-5554                        •
      android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro Max (mobile) • D7F3302D-D66F-4B89-B8CF-DBEE1CDB5449 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 112.0.5615.137

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

pedromassangocode added the in triage Presently being triaged by the triage team label Apr 20, 2021

pedromassangocode added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 20, 2021

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 20, 2021

Piinks added the P2 Important issues not at the top of the work list label Mar 17, 2023

dam-ease added found in release: 3.7 Found to occur in 3.7 found in release: 3.11 Found to occur in 3.11 and removed found in release: 2.0 Found to occur in 2.0 found in release: 2.2 Found to occur in 2.2 labels May 8, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ListWheelScrollView not re-rendering children on setState #80776

ListWheelScrollView not re-rendering children on setState #80776

dudizimber commented Apr 20, 2021

pedromassangocode commented Apr 20, 2021

dudizimber commented Apr 20, 2021

pedromassangocode commented Apr 21, 2021

rvbiljouw commented Apr 23, 2021

dam-ease commented May 8, 2023

ListWheelScrollView not re-rendering children on setState #80776

ListWheelScrollView not re-rendering children on setState #80776

Comments

dudizimber commented Apr 20, 2021

pedromassangocode commented Apr 20, 2021

dudizimber commented Apr 20, 2021

pedromassangocode commented Apr 21, 2021

rvbiljouw commented Apr 23, 2021

dam-ease commented May 8, 2023