Image.asset() doesn't load/render image when descendant of disabled TickerMode widget.

[champeauxr]

When an Image.asset() widget is a descendant of a TickerMode widget, the image will not load if the TickerMode widget's enabled property is set to false. Additionally, if the TickerMode widget is disabled after the image is loaded, then there is some weird behavior when the app is backgrounded and then brought back into the foreground. This foregrounding behavior is different between iOS and Android.

On iOS, if the TickerMode.enabled property is set to false after the image has loaded and then you background and foreground the app, the image will disappear. If the enabled property is then set to true, the image will reload. While the app is in the foreground and the image has been loaded, you can turn the enabled property on and off repeatedly without affecting the image. See the attached iOSBehavior.mp4 video for a demonstration.

On Android, if you set the enabled property to false, background the app, and then foreground it again, the image will still be visible. However, if you then set the enabled property to true, the image will flicker as it briefly disappears and reappears. Also, if the TickerMode.enabled property is true when the app is backgrounded and foregrounded, and then you set enabled to false, the image will disappear. Except for the first time after foregrounding, you can enable and disable the TickerMode widget without affecting the rendering of the image. See the attached AndroidBehavior.mp4 video for a demonstration.

Steps to Reproduce

An example app that demonstrates the problem can be found in this repository:

https://github.com/champeauxr/image_tickermode

The app has an Image.asset widget inside a TickerMode widget, along with a Switch widget (outside the TickerMode) that is used to enable/disable the TickerMode. The TickerMode is initially disabled.

For both iOS and Android:

1. Launch the example app
2. See that the image has not loaded.
3. Turn on the Switch widget
4. See that the image has loaded
5. Repeatedly toggle the Switch widget
6. See that the image remains visible.

For iOS behavior:
7. After the image is visible, turn the Switch widget off.
8. See that the image remains visible
9. Background and foreground the app
10. See that the image has disappeared
11. Turn the Switch widget on
12. See that the image has appeared.

For Android Behavior:
7. After the image is visible, turn the Switch widget off.
8. See that the image remains visible
9. Background and foreground the app
10. See that the image remains visible
11. Turn the Switch widget on.
12. See the image flicker as it briefly disappears and reappears.
13. With the Switch widget on, background and foreground the app
14. See that the image remains visible
15. Turn the Switch widget off
16. See that the image disappears

Code Example

The following is the app code contained in the example app. Reproducing the issue requires an image asset, so it is recommended to clone the following repository:

https://github.com/champeauxr/image_tickermode

The app has an Image.asset widget inside a TickerMode widget, along with a Switch widget (outside the TickerMode) that is used to enable/disable the TickerMode. The TickerMode is initially disabled.

import 'package:flutter/material.dart';

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

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

 // This widget is the root of your application.
 @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({super.key, required this.title});

 final String title;

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

class _MyHomePageState extends State<MyHomePage> {
 bool _tickerEnabled = false;

 void onTickerEnabledChanged(bool value) {
 setState(() {
 _tickerEnabled = value;
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 ),
 body: Center(
 child: Column(
 children: [
 TickerMode(
 enabled: _tickerEnabled,
 child: Image.asset('assets/17644.png'),
 ),
 const Text('Image by rawpixel.com on Freepik.com'),
 const SizedBox(height: 32),
 Row(
 children: [
 const Text('Ticker Mode'),
 Switch(value: _tickerEnabled, onChanged: onTickerEnabledChanged)
 ],
 )
 ],
 ),
 ),
 );
 }
}

flutter analyze

flutter analyze
Analyzing image_tickermode... 
No issues found! (ran in 2.8s)

flutter doctor -v

flutter doctor -v
[✓] Flutter (Channel stable, 3.3.10, on macOS 12.6.1 21G217 darwin-x64, locale en)
 • Flutter version 3.3.10 on channel stable at /Users/richchampeaux/flutter
 • Upstream repository https://github.com/flutter/flutter.git
 • Framework revision 135454af32 (5 weeks ago), 2022-12-15 07:36:55 -0800
 • Engine revision 3316dd8728
 • Dart version 2.18.6
 • DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
 • Android SDK at /Users/richchampeaux/Library/Android/sdk
 • Platform android-33, build-tools 33.0.1
 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
 • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
 • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
 • Xcode at /Applications/Xcode.app/Contents/Developer
 • Build 14C18
 • CocoaPods version 1.11.3
[✓] Chrome - develop for the web
 • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
 • 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.13+0-b1751.21-8125866)
[✓] Connected device (4 available)
 • Pixel 3a (mobile) • 941AY0HYEJ • android-arm64 • Android 12 (API 32)
 • 160-TP iPhone 7 Plus (mobile) • ee2789b3974ca47255609a936e7172e58f01325b • ios • iOS 14.4.2 18D70
 • macOS (desktop) • macos • darwin-x64 • macOS 12.6.1 21G217 darwin-x64
 • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.87
[✓] HTTP Host Availability
 • All required HTTP hosts are available
• No issues found!

iOSBehavior.mp4

AndroidBehavior.mp4

[darshankawar]

Thanks @champeauxr for the detailed report.

For iOS behavior: 7. After the image is visible, turn the Switch widget off. 8. See that the image remains visible 9. Background and foreground the app 10. See that the image has disappeared 11. Turn the Switch widget on 12. See that the image has appeared.

I ran your code sample on latest versions (master and stable) and for iOS, I get a slightly different behavior than mentioned.

On master, after coming back to foreground, I see the image still on screen as shown below:

118709_m.mov

However, on stable, I see the same behavior as you reported.

Can you also try the same on latest master and see if behavior persists or you see same result as mine ?

flutter channel master
flutter upgrade

[champeauxr]

@darshankawar Yes, I see that on the latest master, the iOS build no longer removes the image when you bring the app back into the foreground when the TickerMode enable property is set to false.

However, it now behaves like the Android build. So, if you turn off the switch on the app to disable TickerMode, then background and foreground the app, the image will still be displayed, but if you then turn on the switch, you will see the image flicker as it is removed and reloaded. But, more concerning is that if the TickerMode is enabled when the app is backgrouded and foregrounded, then you turn the TickerMode off, the image will disappear.

So, when the app is in the foreground, you can repeatedly turn the TickerMode on and off without affecting the rendering of the image. However, if the TickerMode is on and you background and foreground the app, then the next time you turn off the TickerMode, the image will disappear. This behavior is demonstrated in the AndroidBehavior.mp4 video.

I did some investigating of the Flutter code and see that the Image widget intentionally checks the TickerMode state in _ImageState.didChangeDependencies() and explicitly does not listen to the image stream if the TickerMode is off. This code has been there for 5 years.

 @override
 void didChangeDependencies() {
 _updateInvertColors();
 _resolveImage();

 if (TickerMode.of(context)) {
 _listenToStream();
 } else {
 _stopListeningToStream(keepStreamAlive: true);
 }

 super.didChangeDependencies();
 }

I can understand that if animations are disabled via the TickerMode widget, you would not want to animate GIFs or hold onto the image stream. However, I would think you would want to still display the first frame of the image, even if animations are disabled, particularly for non-animating images like a .PNG.

So even though it's currently intentional, I think it's a bug that the Image widget won't even decode the first (or only) frame of an image when animations are disabled. But even if it's determined that it is desired behavior, it seems like a bug that the behavior of setting TickerMode.enabled to false changes depending on whether the app just came back into the foreground.

[darshankawar]

Thanks for the feedback.

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 3.3.10, on macOS 12.2.1 21D62 darwin-x64, locale
 en-GB)
 • Flutter version 3.3.10 on channel stable at
 /Users/dhs/documents/fluttersdk/flutter
 • Upstream repository https://github.com/flutter/flutter.git
 • Framework revision 135454af32 (15 hours ago), 2022-12-15 07:36:55 -0800
 • Engine revision 3316dd8728
 • Dart version 2.18.6
 • DevTools version 2.15.0

[!] 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.7.0-24.0.pre.21, on macOS 12.2.1 21D62
 darwin-x64, locale en-GB)
 • Flutter version 3.7.0-24.0.pre.21 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 52d1205b88 (21 minutes ago), 2023-01-19 23:50:24 -0500
 • Engine revision 730e88fb67
 • Dart version 3.0.0 (build 3.0.0-136.0.dev)
 • DevTools version 2.20.0
 • 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.