Bug Report: CupertinoListTile Remains backgroundColorActivated After launchUrl(url)

Steps to reproduce

Tap on a CupertinoListTile to launchUrl(url).
Observe that the tile occasionally remains in the backgroundColorActivated state (gray background color) after launchUrl.

Expected results

The CupertinoListTile should not remain in the backgroundColorActivated state after navigation. The background color should reset to the default state.

Actual results

The CupertinoListTile occasionally remains in the backgroundColorActivated state (gray background color) after navigation.

Code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';

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

  Future<void> _launchPrivacyPolicy() async {
    final Uri url = Uri.parse(
        'https://www.apple.com/legal/internet-services/itunes/dev/stdeula/');
    if (!await launchUrl(url)) {
      throw Exception('Could not launch $url');
    }
  }

  Future<void> _launchTermsOfUse() async {
    final Uri url = Uri.parse(
        'https://www.apple.com/legal/internet-services/itunes/dev/stdeula/');
    if (!await launchUrl(url)) {
      throw Exception('Could not launch $url');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<AppStateModel>(
      builder: (context, model, child) {
        return CupertinoPageScaffold(
          child: CustomScrollView(
            semanticChildCount: 2,
            slivers: <Widget>[
              CupertinoSliverNavigationBar(
                largeTitle: Text('Settings'),
              ),
              SliverSafeArea(
                top: false,
                minimum: EdgeInsets.only(top: 10),
                sliver: SliverList.separated(
                  itemCount: 2,
                  itemBuilder: (BuildContext context, int index) {
                    if (index == 0) {
                      return CupertinoListTile(
                        title: Text('Privacy Policy',
                            style: GoogleFonts.poppins(
                              fontSize: 17,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: _launchPrivacyPolicy,
                      );
                    } else if (index == 1) {
                      return CupertinoListTile(
                        title: Text('Terms of Use',
                            style: GoogleFonts.poppins(
                              fontSize: 17,
                              fontWeight: FontWeight.w400,
                            )),
                        onTap: _launchTermsOfUse,
                      );
                    }
                    return null;
                  },
                  separatorBuilder: (BuildContext context, int index) =>
                      Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: Divider(
                      height: 1,
                      thickness: 1,
                      color: Colors.grey[300],
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-x64, locale zh-Hans-CN)
    • Flutter version 3.27.1 on channel stable at /Users/liyue/Developer/SDK/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (4 weeks ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/liyue/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2023.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 17.0.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (4 available)
    • iPhone 16 Pro (mobile) • 17B20026-583C-4CD7-BDD3-5595615B4A60 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 15.2 24C101 darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 131.0.6778.266

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

• No issues found!

This issue appears to be caused by the need for the click event to wait for execution to complete.

flutter/packages/flutter/lib/src/cupertino/list_tile.dart

Line 380 in f545df5

await widget.onTap!();

But I’m not sure if it was intentional. You can see there’s a section in the test file:

flutter/packages/flutter/test/cupertino/list_tile_test.dart

Line 443 in f545df5

    
           testWidgets('onTap with delay does not throw an exception', (WidgetTester tester) async {

A reproducible minimal demo.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

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

  Future<void> _launchPrivacyPolicy() async {
    await Future.delayed(const Duration(seconds: 2), () {});
    return;
  }

  Future<void> _launchTermsOfUse() async {
    print("_launchTermsOfUse");
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CustomScrollView(
        semanticChildCount: 2,
        slivers: <Widget>[
          const CupertinoSliverNavigationBar(
            largeTitle: Text('Settings'),
          ),
          SliverSafeArea(
            top: false,
            minimum: const EdgeInsets.only(top: 10),
            sliver: SliverList.separated(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                if (index == 0) {
                  return CupertinoListTile(
                    title: const Text('Privacy Policy'),
                    onTap: _launchPrivacyPolicy,
                  );
                } else if (index == 1) {
                  return CupertinoListTile(
                    title: const Text('Terms of Use'),
                    onTap: _launchTermsOfUse,
                  );
                }
                return null;
              },
              separatorBuilder: (BuildContext context, int index) => Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                child: Divider(
                  height: 1,
                  thickness: 1,
                  color: Colors.grey[300],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

It seems that in some cases, clicking doesn’t require waiting for the execution to complete. I suggest adding a property to control whether the style update should wait for the execution to finish.

Solution 1: Remove the wait

Solution 2:

Add a ‘real-time update’ property, with the default value set to false.
When set to true, remove the waiting.

If the solution is acceptable, you can assign the task to me, and I would be happy to implement the feature.

Reproducible using the code sample in #161790 (comment)

flutter doctor -v

[✓] Flutter (Channel stable, 3.27.2, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.27.2 on channel stable at /Users/deanli/dev/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68415ad1d9 (4 days ago), 2025-01-13 10:22:03 -0800
    • Engine revision e672b006cb
    • Dart version 3.6.1
    • DevTools version 2.40.2

[!] Flutter (Channel master, 3.28.0-2.0.pre.38778, on macOS 15.1.1 24B91 darwin-arm64, locale en-US) [7.6s]
    • Flutter version 3.28.0-2.0.pre.38778 on channel master at /Users/deanli/dev/master
    • Framework revision f545df54ff (5 hours ago), 2025-01-16 20:46:23 -0800
    • Engine revision f545df54ff
    • Dart version 3.8.0 (build 3.8.0-1.0.dev)
    • DevTools version 2.42.0

As a workaround: if you set the onTap to a synchronous callback instead of a Future, then it will show the darkened background briefly before returning to normal. Good for if you are expecting a significant delay.

So instead of

onTap: _launchPrivacyPolicy

you can provide

onTap: () {_launchPrivacyPolicy}

It waits for the Future to resolve to match iOS behavior: https://api.flutter.dev/flutter/cupertino/CupertinoListTile/onTap.html

However it's reasonable to assume that launchUrl would not cause difficulties. A question I have for diagnosing the issue: is the Future from launchUrl never resolving? Or is it resolving while the CupertinoListTile is not mounted?

A question I have for diagnosing the issue: is the Future from launchUrl never resolving?

There are known cases where that happens when using in-app display, FWIW. E.g.:

[url_launcher] When not fully loaded, clicking close causes the callb…

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.

[url_launcher] When not fully loaded, clicking close causes the callb…

Navigation Menu

Repository navigation

Bug Report: CupertinoListTile Remains backgroundColorActivated After launchUrl(url) #161790

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug Report: CupertinoListTile Remains backgroundColorActivated After launchUrl(url) #161790

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

StanleyCocos commented on Jan 17, 2025

danagbemava-nc commented on Jan 17, 2025

MitchellGoodwin commented on Feb 6, 2025

stuartmorgan-g commented on Feb 7, 2025

github-actions commented on Apr 16, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions