[iOS] Cancelling a button press doesn't match native selection behavior #91581
Description
Use case
On iOS, when you move your finger away from a button to 'cancel', the button reverts back it's colour. But if you put your finger back near the button (all while holding down since the cancel), the button uncancels and it's colour changes again to indicate that it is selected.
This behaviour doesn't occur on iOS apps created with Flutter. I believe this is because Flutter doesn't use native components but it's own.
Below is a video showing the button cancel behaviour of a Flutter app and it's compared to the Apple Health and News apps.
Button.Cancel.mp4
Code of Flutter app shown in the video
import 'package:flutter/cupertino.dart';
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> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: const Text('Elevated Button'),
onPressed: () {},
),
TextButton(
child: const Text('Text Button'),
onPressed: () {},
),
CupertinoButton.filled(
child: const Text('Cupertino Button'),
onPressed: () {},
),
],
),
),
);
}
}
Proposal
To implement this behaviour on iOS as it is a part of the OS's design language and is second nature to many users who might find it odd that this doesn't happen in apps which are created with Flutter.
flutter doctor -v
[✓] Flutter (Channel master, 2.6.0-12.0.pre.196, on macOS 11.6 20G165
darwin-arm, locale en-AE)
• Flutter version 2.6.0-12.0.pre.196 at
/Users/hadymashhour/Developer/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 98120d19d3 (6 days ago), 2021-10-04 14:16:23 -0700
• Engine revision a36eac0a34
• Dart version 2.15.0 (build 2.15.0-177.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/hadymashhour/Library/Android/sdk
• Platform android-31, build-tools 31.0.0
• Java binary at: /Applications/Android
Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.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.10+0-b96-7249189)
[✓] VS Code (version 1.61.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.27.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 11.6 20G165 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 94.0.4606.71
• No issues found!