Skip to content

The behavior of Dismissible with TextFormFields is different for Android and iOS #142447

@maxmitz

Description

@maxmitz

Steps to reproduce

  1. Run the code sample on Android and iOS.
  2. Dismiss an item with the red SizedBox and the TextFormField part.

Expected results

The behavior should be the same on iOS and Android. In my opinion, it should on both platforms be possible to dismiss by sliding the TextFormField.

If the TextField takes up the entire Dismissible, then it will handle the gesture.
This is also not true for iOS.

Actual results

On Android you can dismiss an item by touching the red SizedBox part but also the TextFormField part.
On iOS you can dismiss an item only by touching the red SizedBox part but not the TextFormField part.

Code sample

Code sample
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 StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  List<int> items = List<int>.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (_, index) => Dismissible(
              key: ValueKey<int>(items[index]),
              onDismissed: (DismissDirection direction) {
                setState(() {
                  items.removeAt(index);
                });
              },
              child: Row(
                children: [
                  Container(
                    width: 50,
                    height: 30,
                    color: Colors.red,
                  ),
                  SizedBox(
                      width: 200,
                      child: TextFormField(
                        initialValue: items[index].toString(),
                      )),
                  Container(
                    width: 50,
                    height: 30,
                    color: Colors.red,
                  ),
                ],
              ))),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration
Bildschirmaufnahme.2024-01-29.um.17.33.24.mov
Bildschirmaufnahme.2024-01-29.um.17.30.26.mov

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 14.0 23A344 darwin-arm64, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.85.1)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!```

</details>

Metadata

Metadata

Labels

P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsc: parityWorks on one platform but not anotherf: gesturesflutter/packages/flutter/gestures repository.f: material designflutter/packages/flutter/material repository.found in release: 3.16Found to occur in 3.16found in release: 3.19Found to occur in 3.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions