Dismissible content overlays Stepper interface while dismissing it #66007
Description
I'm reporting unexpected effect while swiping Dismissible tile inside a Stepper widget. The Dismissible content can be swiped perfectly but overlays its Stepper widget.
Steps to Reproduce
- Below is the code with Stepper (the unexpected effect of using Dismissible inside Stepper).
code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
final items = List<String>.generate(20, (i) => "Item ${i + 1}");
@override
Widget build(BuildContext context) {
final title = 'Dismissing Items';
return MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.red,
),
child: Stepper(
currentStep: 0,
steps: [
Step(
isActive: true,
title: Text('Step 1'),
content: Container(
padding: const EdgeInsets.all(20),
color: Colors.black12,
child: ListView.builder(
itemCount: items.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
key: Key(item),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
});
Scaffold.of(context).showSnackBar(
SnackBar(content: Text("$item dismissed")));
},
background: Container(color: Colors.red),
child: ListTile(title: Text('$item')),
);
},
),
),
),
Step(
title: Text('Step 2'),
content: Text('content'),
),
],
),
),
),
);
}
}- And below is the example code of Dismissible from the docs with padding addition using Container (the expected effect).
code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
final items = List<String>.generate(20, (i) => "Item ${i + 1}");
@override
Widget build(BuildContext context) {
final title = 'Dismissing Items';
return MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(padding: EdgeInsets.all(20), color: Colors.black12, child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
// Each Dismissible must contain a Key. Keys allow Flutter to
// uniquely identify widgets.
key: Key(item),
// Provide a function that tells the app
// what to do after an item has been swiped away.
onDismissed: (direction) {
// Remove the item from the data source.
setState(() {
items.removeAt(index);
});
// Then show a snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text("$item dismissed")));
},
// Show a red background as the item is swiped away.
background: Container(color: Colors.red),
child: ListTile(title: Container(color: Colors.black12, child: Text('$item')),)
);
},
),
),),
);
}
}Expected results:
Same behavior as without Stepper, the content should be swiped without overlaying the parent widget like Container or Padding.
Actual results:
The content overlays the parent widget, which is Stepper and doesn't do the same effect as expected.
Details
[√] Flutter (Channel stable, 1.20.4, on Microsoft Windows [Version 10.0.18363.1082], locale en-ID)
• Flutter version 1.20.4 at C:\flutter
• Framework revision fba99f6cf9 (2 days ago), 2020-09-14 15:32:52 -0700
• Engine revision d1bc06f032
• Dart version 2.9.2
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at C:\Android\Sdk
• Platform android-29, build-tools 29.0.3
• ANDROID_HOME = C:\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[√] Android Studio (version 4.0)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 46.0.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
[√] VS Code, 64-bit edition (version 1.49.0)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.14.1
[√] Connected device (1 available)
• Redmi Note 8 (mobile) • 152aa503 • android-arm64 • Android 9 (API 28)
• No issues found!