In `AnimatedList`, AnimationController should forward when `_itemBuilder()` is called but not `insertItem()` #148379

SageMik · 2024-05-15T06:18:04Z

Steps to reproduce

See code example please.

Expected results

When I scroll to items outside screen, their animation should start forwarding.

Actual results

When I insert items into AnimatedList, their animations will forward immediately.
This causes when I scroll to those items outside screen, they have no animation, since AnimationControllers have disposed after animation duration.

flutter/packages/flutter/lib/src/widgets/animated_scroll_view.dart

Lines 1135 to 1137 in ddd6c86

    
           controller.forward().then<void>((_) { 
        
             _removeActiveItemAt(_incomingItems, incomingItem.itemIndex)!.controller!.dispose(); 
        
           });

What I wish is that when I scroll to other items, _itemBuilder will be called and their AnimationControllers should forward at this time.

flutter/packages/flutter/lib/src/widgets/animated_scroll_view.dart

Lines 1076 to 1092 in ddd6c86

    
           Widget _itemBuilder(BuildContext context, int itemIndex) { 
        
             final _ActiveItem? outgoingItem = _activeItemAt(_outgoingItems, itemIndex); 
        
             if (outgoingItem != null) { 
        
               return outgoingItem.removedItemBuilder!( 
        
                 context, 
        
                 outgoingItem.controller!.view, 
        
               ); 
        
             } 
        
             final _ActiveItem? incomingItem = _activeItemAt(_incomingItems, itemIndex); 
        
             final Animation<double> animation = incomingItem?.controller?.view ?? kAlwaysCompleteAnimation; 
        
             return widget.itemBuilder( 
        
               context, 
        
               _itemIndexToIndex(itemIndex), 
        
               animation, 
        
             ); 
        
           }

Code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final listKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: AnimatedList(
            key: listKey,
            itemBuilder: buildItem,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            listKey.currentState!.insertAllItems(0, 100);
          },
        ),
      ),
    );
  }

  Widget buildItem(
      BuildContext context, int index, Animation<double> animation) {
    print(index);
    return KeepAliveWrapper(
      child: FadeTransition(
        opacity: animation,
        child: Container(
          height: 80,
          color: Colors.orange,
          child: Center(child: Text('Item $index')),
        ),
      ),
    );
  }
}

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper({
    super.key,
    this.keepAlive = true,
    required this.child,
  });

  final bool keepAlive;
  final Widget child;

  @override
  KeepAliveWrapperState createState() => KeepAliveWrapperState();
}

class KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }

  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if (oldWidget.keepAlive != widget.keepAlive) {
      updateKeepAlive();
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  bool get wantKeepAlive => widget.keepAlive;
}

Screenshots or Video

Screenshots / Video demonstration

Expected: When I scroll to those items outside screen, they start fading in.
https://github.com/flutter/flutter/assets/73378246/a8531a9f-636e-44b4-91f8-12147041b3ef

In fact: Animations have already completed.
https://github.com/flutter/flutter/assets/73378246/4b6343cc-6193-4681-a5e8-3ea2a53d1448

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

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

darshankawar · 2024-05-15T12:08:49Z

Thanks for the detailed report. I was able to replicate this in latest versions.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.22.0, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.22.0 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (5 days ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.22.0-30.0.pre.11, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.22.0-30.0.pre.11 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c90e18c6f5 (2 hours ago), 2024-05-09 20:32:11 -0700
    • Engine revision c0917b14fc
    • Dart version 3.5.0 (build 3.5.0-138.0.dev)
    • DevTools version 2.36.0-dev.5
    • 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 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

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

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

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

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

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

darshankawar added the in triage Presently being triaged by the triage team label May 15, 2024

chinmoy12c linked a pull request May 18, 2024 that will close this issue

Adds lazyAnimation property to AnimatedList and AnimatedGrid. #148613

Draft

9 tasks

Piinks added triaged-framework Triaged by Framework team P3 Issues that are less important to the Flutter project c: new feature Nothing broken; request for a new capability labels May 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In `AnimatedList`, AnimationController should forward when `_itemBuilder()` is called but not `insertItem()` #148379

In `AnimatedList`, AnimationController should forward when `_itemBuilder()` is called but not `insertItem()` #148379

SageMik commented May 15, 2024

darshankawar commented May 15, 2024

In AnimatedList, AnimationController should forward when _itemBuilder() is called but not insertItem() #148379

In AnimatedList, AnimationController should forward when _itemBuilder() is called but not insertItem() #148379

Comments

SageMik commented May 15, 2024

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

darshankawar commented May 15, 2024

In `AnimatedList`, AnimationController should forward when `_itemBuilder()` is called but not `insertItem()` #148379

In `AnimatedList`, AnimationController should forward when `_itemBuilder()` is called but not `insertItem()` #148379