Add ability to clip `Stepper` step content by TahaTesser · Pull Request #152370 · flutter/flutter

TahaTesser · 2024-07-26T14:10:16Z

fixes Dismissible content overlays Stepper interface while dismissing it

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<String> items =
      List<String>.generate(20, (int i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.amber, width: 2),
            ),
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Column(
                children: <Widget>[
                  const SizedBox(height: 8.0),
                  Text(
                    'Dismissible Widget - Vertical Stepper Widget',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  Expanded(
                    child: Stepper(
                      clipBehavior: Clip.hardEdge,
                      steps: <Step>[
                        Step(
                          isActive: true,
                          title: const Text('Step 1'),
                          content: ColoredBox(
                            color: Colors.black12,
                            child: ListView.builder(
                              itemCount: items.length,
                              shrinkWrap: true,
                              itemBuilder: (BuildContext context, int index) {
                                final String item = items[index];
                                return Dismissible(
                                  key: Key(item),
                                  onDismissed: (DismissDirection direction) {
                                    setState(() {
                                      items.removeAt(index);
                                    });
                                    ScaffoldMessenger.of(context).showSnackBar(
                                        SnackBar(
                                            content: Text('$item dismissed')));
                                  },
                                  background: Container(color: Colors.red),
                                  child: ListTile(title: Text(item)),
                                );
                              },
                            ),
                          ),
                        ),
                        const Step(
                          title: Text('Step 2'),
                          content: Text('content'),
                        ),
                      ],
                    ),
                  ),
                  const Divider(height: 1),
                  const SizedBox(height: 8.0),
                  Text(
                    'Dismissible Widget - Horizontal Stepper Widget',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  Expanded(
                    child: Stepper(
                      clipBehavior: Clip.hardEdge,
                      type: StepperType.horizontal,
                      elevation: 0.0,
                      steps: <Step>[
                        Step(
                          isActive: true,
                          title: const Text('Step 1'),
                          content: ColoredBox(
                            color: Colors.black12,
                            child: ListView.builder(
                              itemCount: items.length,
                              shrinkWrap: true,
                              itemBuilder: (BuildContext context, int index) {
                                final String item = items[index];
                                return Dismissible(
                                  key: Key(item),
                                  onDismissed: (DismissDirection direction) {
                                    setState(() {
                                      items.removeAt(index);
                                    });
                                    ScaffoldMessenger.of(context).showSnackBar(
                                        SnackBar(
                                            content: Text('$item dismissed')));
                                  },
                                  background: Container(color: Colors.red),
                                  child: ListTile(title: Text(item)),
                                );
                              },
                            ),
                          ),
                        ),
                        const Step(
                          title: Text('Step 2'),
                          content: Text('content'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Without `Stepper` step content clipping

With `Stepper` step content clipping

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Piinks · 2024-07-29T22:06:51Z

packages/flutter/lib/src/material/stepper.dart

+  /// See also:
+  ///
+  ///  * [Clip], which explains how to use this property.
+  final Clip? clipBehavior;


Why is this nullable?

Looking at the existing clipBehavior in the framework. some are nullable and some aren't. The main reason for this, a nullable clipBehavior can be updated from the widget theme.

Rethinking after your question, maybe this one makes sense to be non-nullable as there is no Stepper theme.

Made it non-nullable and updated tests.

Thanks for the context! Nullable makes total sense to me when we have a theme - TIL! :)

Piinks · 2024-07-29T22:07:53Z

packages/flutter/test/material/stepper_test.dart

  });
+
+  // This is a regression test for https://github.com/flutter/flutter/issues/66007.
+  testWidgets('Vertical Stepper steps can be clipped', (WidgetTester tester) async {


Should we write a test for horizontal as well?

It's actually incorrect tittle. Initially I planned to test vertical and horizontal Stepper in two separate tests but it was too simple to split into two tests. Corrected the title. :)

Piinks

…52370)

Manual roll Flutter from 85960d2 to 4ff9462 (45 revisions) Manual roll requested by [email protected] flutter/flutter@85960d2...4ff9462 2024-08-01 [email protected] Fix local testing, gradle XML errors, and enable on CI. (flutter/flutter#152383) 2024-08-01 [email protected] Fix formatting issues in `search_anchor.0_test.dart` (flutter/flutter#152669) 2024-08-01 [email protected] Add tests for search anchor examples (flutter/flutter#152659) 2024-08-01 [email protected] Roll Flutter Engine from 4dc94d6f88ba to 7c4a44611abe (1 revision) (flutter/flutter#152665) 2024-08-01 [email protected] Roll Flutter Engine from f546fef7d7cd to 4dc94d6f88ba (1 revision) (flutter/flutter#152663) 2024-08-01 [email protected] Roll Flutter Engine from 0fbff219c498 to f546fef7d7cd (2 revisions) (flutter/flutter#152661) 2024-08-01 [email protected] Roll Flutter Engine from 32f788823f43 to 0fbff219c498 (5 revisions) (flutter/flutter#152658) 2024-08-01 [email protected] Manual roll Flutter Engine from 32f788823f43 to ed95b491f260 (3 revisions) (flutter/flutter#152654) 2024-08-01 [email protected] Manual roll Flutter Engine from 16332725788c to 32f788823f43 (11 revisions) (flutter/flutter#152648) 2024-07-31 [email protected] [CupertinoActionSheet] Make `_ActionSheetButtonBackground` stateless (flutter/flutter#152283) 2024-07-31 [email protected] Implementing null-aware logic in `/packages/flutter/` (flutter/flutter#152294) 2024-07-31 [email protected] Reintroduce verbose logging for hot reload flake (flutter/flutter#152639) 2024-07-31 [email protected] [material/menu_anchor.dart] Remove unused early key event listener (flutter/flutter#150915) 2024-07-31 [email protected] Improve `CupertinoCheckbox` fidelity (flutter/flutter#151441) 2024-07-31 [email protected] Update docs to support new Android version (flutter/flutter#152503) 2024-07-31 [email protected] [Android] Update integration test AVD dependency to use Android 35 emulators (flutter/flutter#152498) 2024-07-31 [email protected] Shift + click gesture support for SelectionArea on desktop platforms (flutter/flutter#148574) 2024-07-31 [email protected] Add ability to clip `Stepper` step content (flutter/flutter#152370) 2024-07-31 [email protected] Calendar font factor (flutter/flutter#152341) 2024-07-31 [email protected] Remove redundant usages of zones in skia_client.dart (flutter/flutter#149366) 2024-07-31 [email protected] Set up tests that verify we can build a fresh counter app across our Gradle/AGP/Kotlin support range (flutter/flutter#151568) 2024-07-31 [email protected] remove bringup from Windows tool_integration_tests_* (flutter/flutter#152599) 2024-07-31 [email protected] â�¨ : Animation controller now has ability to repeat animation 'n' no. of times. (flutter/flutter#150764) 2024-07-31 [email protected] Roll Flutter Engine from 3b31b21599d1 to 16332725788c (1 revision) (flutter/flutter#152631) 2024-07-31 [email protected] Roll Flutter Engine from b73367a30e9b to 3b31b21599d1 (8 revisions) (flutter/flutter#152625) 2024-07-31 [email protected] Roll Packages from 99e8606 to 46a712f (8 revisions) (flutter/flutter#152622) 2024-07-31 [email protected] Add tests for scaffold messenger examples (flutter/flutter#152536) 2024-07-31 [email protected] Add test for search_anchor.0.dart (flutter/flutter#152371) 2024-07-31 [email protected] Use decoration hint text as the default value for dropdown button hints (flutter/flutter#152474) 2024-07-31 [email protected] Deprecate invalid InputDecoration.collapsed parameters (flutter/flutter#152486) 2024-07-31 [email protected] increase sharding on Windows tool_integration_tests (flutter/flutter#152582) 2024-07-31 [email protected] Roll Flutter Engine from e2ece7e58480 to b73367a30e9b (4 revisions) (flutter/flutter#152592) 2024-07-31 [email protected] Roll Flutter Engine from 0b42657a184e to e2ece7e58480 (2 revisions) (flutter/flutter#152589) 2024-07-31 [email protected] Roll Flutter Engine from 08f9be3ab284 to 0b42657a184e (2 revisions) (flutter/flutter#152586) 2024-07-30 [email protected] Clarify and cleanup the test-exemption wording in tree-hygiene. (flutter/flutter#152402) 2024-07-30 [email protected] [web] Set COEP:credentialless on flutter run/drive. (flutter/flutter#152413) 2024-07-30 [email protected] Roll Flutter Engine from a4b88a37d511 to 08f9be3ab284 (5 revisions) (flutter/flutter#152583) 2024-07-30 [email protected] Marks Mac platform_channel_sample_test_macos to be flaky (flutter/flutter#151884) 2024-07-30 [email protected] Roll Flutter Engine from a6c5ff26c266 to a4b88a37d511 (2 revisions) (flutter/flutter#152575) 2024-07-30 [email protected] Reland #151599 (Add button semantics in list tile ) with a flag to control behavior. (flutter/flutter#152526) 2024-07-30 [email protected] Shift macOS/Android tests from Pixel 7 to mokey in staging (flutter/flutter#152571) 2024-07-30 [email protected] Roll Flutter Engine from 31bb9f98472a to a6c5ff26c266 (5 revisions) (flutter/flutter#152573) 2024-07-30 [email protected] Roll Packages from 247fb5f to 99e8606 (5 revisions) (flutter/flutter#152567) 2024-07-30 [email protected] Fix default avatar icon theme size for Material 2 (flutter/flutter#152307) ...

@OverRide

fixes [Dismissible content overlays Stepper interface while dismissing it](flutter#66007) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @OverRide State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final List<String> items = List<String>.generate(20, (int i) => 'Item ${i + 1}'); @OverRide Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.all(20), child: DecoratedBox( decoration: BoxDecoration( border: Border.all(color: Colors.amber, width: 2), ), child: Padding( padding: const EdgeInsets.all(2.0), child: Column( children: <Widget>[ const SizedBox(height: 8.0), Text( 'Dismissible Widget - Vertical Stepper Widget', style: Theme.of(context).textTheme.titleLarge, ), Expanded( child: Stepper( clipBehavior: Clip.hardEdge, steps: <Step>[ Step( isActive: true, title: const Text('Step 1'), content: ColoredBox( color: Colors.black12, child: ListView.builder( itemCount: items.length, shrinkWrap: true, itemBuilder: (BuildContext context, int index) { final String item = items[index]; return Dismissible( key: Key(item), onDismissed: (DismissDirection direction) { setState(() { items.removeAt(index); }); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('$item dismissed'))); }, background: Container(color: Colors.red), child: ListTile(title: Text(item)), ); }, ), ), ), const Step( title: Text('Step 2'), content: Text('content'), ), ], ), ), const Divider(height: 1), const SizedBox(height: 8.0), Text( 'Dismissible Widget - Horizontal Stepper Widget', style: Theme.of(context).textTheme.titleLarge, ), Expanded( child: Stepper( clipBehavior: Clip.hardEdge, type: StepperType.horizontal, elevation: 0.0, steps: <Step>[ Step( isActive: true, title: const Text('Step 1'), content: ColoredBox( color: Colors.black12, child: ListView.builder( itemCount: items.length, shrinkWrap: true, itemBuilder: (BuildContext context, int index) { final String item = items[index]; return Dismissible( key: Key(item), onDismissed: (DismissDirection direction) { setState(() { items.removeAt(index); }); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('$item dismissed'))); }, background: Container(color: Colors.red), child: ListTile(title: Text(item)), ); }, ), ), ), const Step( title: Text('Step 2'), content: Text('content'), ), ], ), ), ], ), ), ), ), ), ); } } ``` </details> ### Without `Stepper` step content clipping ![Group 1](https://github.com/user-attachments/assets/1814ad90-8d43-4e03-9f68-7da47e08c718) ### With `Stepper` step content clipping ![Group 2](https://github.com/user-attachments/assets/652ff597-7e9a-4d35-abc2-80d60cee03f4)

@OverRide

fixes [Dismissible content overlays Stepper interface while dismissing it](flutter#66007) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @OverRide State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final List<String> items = List<String>.generate(20, (int i) => 'Item ${i + 1}'); @OverRide Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.all(20), child: DecoratedBox( decoration: BoxDecoration( border: Border.all(color: Colors.amber, width: 2), ), child: Padding( padding: const EdgeInsets.all(2.0), child: Column( children: <Widget>[ const SizedBox(height: 8.0), Text( 'Dismissible Widget - Vertical Stepper Widget', style: Theme.of(context).textTheme.titleLarge, ), Expanded( child: Stepper( clipBehavior: Clip.hardEdge, steps: <Step>[ Step( isActive: true, title: const Text('Step 1'), content: ColoredBox( color: Colors.black12, child: ListView.builder( itemCount: items.length, shrinkWrap: true, itemBuilder: (BuildContext context, int index) { final String item = items[index]; return Dismissible( key: Key(item), onDismissed: (DismissDirection direction) { setState(() { items.removeAt(index); }); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('$item dismissed'))); }, background: Container(color: Colors.red), child: ListTile(title: Text(item)), ); }, ), ), ), const Step( title: Text('Step 2'), content: Text('content'), ), ], ), ), const Divider(height: 1), const SizedBox(height: 8.0), Text( 'Dismissible Widget - Horizontal Stepper Widget', style: Theme.of(context).textTheme.titleLarge, ), Expanded( child: Stepper( clipBehavior: Clip.hardEdge, type: StepperType.horizontal, elevation: 0.0, steps: <Step>[ Step( isActive: true, title: const Text('Step 1'), content: ColoredBox( color: Colors.black12, child: ListView.builder( itemCount: items.length, shrinkWrap: true, itemBuilder: (BuildContext context, int index) { final String item = items[index]; return Dismissible( key: Key(item), onDismissed: (DismissDirection direction) { setState(() { items.removeAt(index); }); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('$item dismissed'))); }, background: Container(color: Colors.red), child: ListTile(title: Text(item)), ); }, ), ), ), const Step( title: Text('Step 2'), content: Text('content'), ), ], ), ), ], ), ), ), ), ), ); } } ``` </details> ### Without `Stepper` step content clipping ![Group 1](https://github.com/user-attachments/assets/1814ad90-8d43-4e03-9f68-7da47e08c718) ### With `Stepper` step content clipping ![Group 2](https://github.com/user-attachments/assets/652ff597-7e9a-4d35-abc2-80d60cee03f4)

…52370)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 26, 2024

TahaTesser marked this pull request as ready for review July 26, 2024 14:10

TahaTesser requested a review from Piinks July 26, 2024 14:16

Piinks reviewed Jul 29, 2024

View reviewed changes

Add ability to clip Stepper step content

e899719

TahaTesser requested a review from Piinks July 30, 2024 16:41

Address feedback

4e4dc48

Piinks approved these changes Jul 31, 2024

View reviewed changes

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 31, 2024

auto-submit bot merged commit 0d154e5 into flutter:master Jul 31, 2024

TahaTesser deleted the stepper_step_content_clip branch July 31, 2024 20:00

engine-flutter-autoroll mentioned this pull request Aug 1, 2024

Roll Flutter from f817e51a3a34 to 7f4f1a0a6237 (74 revisions) flutter/packages#7275

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

9322032

…52370)

engine-flutter-autoroll mentioned this pull request Aug 1, 2024

Roll Flutter from f817e51a3a34 to 4ff9462be814 (75 revisions) flutter/packages#7277

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

c600957

…52370)

engine-flutter-autoroll mentioned this pull request Aug 1, 2024

Roll Flutter from f817e51a3a34 to 735958ef9a56 (76 revisions) flutter/packages#7279

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

0c86341

…52370)

engine-flutter-autoroll mentioned this pull request Aug 1, 2024

Roll Flutter from f817e51a3a34 to 5edec61f0e6d (77 revisions) flutter/packages#7281

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

3cbecba

…52370)

engine-flutter-autoroll mentioned this pull request Aug 1, 2024

Roll Flutter from f817e51a3a34 to 619961d96cb1 (78 revisions) flutter/packages#7283

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

127b960

…52370)

engine-flutter-autoroll mentioned this pull request Aug 2, 2024

Roll Flutter from e2e43987c4fb to 8818e60a653b (89 revisions) flutter/packages#7290

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 2, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

2b4ad06

…52370)

engine-flutter-autoroll mentioned this pull request Aug 2, 2024

Roll Flutter from e2e43987c4fb to 9cc5d7f44638 (91 revisions) flutter/packages#7291

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 2, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

3cc69fc

…52370)

engine-flutter-autoroll mentioned this pull request Aug 2, 2024

Roll Flutter from e2e43987c4fb to f10a497e4abd (92 revisions) flutter/packages#7292

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 2, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

902865a

…52370)

engine-flutter-autoroll mentioned this pull request Aug 2, 2024

Roll Flutter from e2e43987c4fb to 6206d8d73e35 (93 revisions) flutter/packages#7293

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 2, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

18d3318

…52370)

engine-flutter-autoroll mentioned this pull request Aug 3, 2024

Manual roll Flutter from 85960d24b9d2 to 4ff9462be814 (45 revisions) flutter/packages#7296

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 3, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

7b215ce

…52370)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 11, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

35cb1f2

…52370)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 12, 2024

0d154e5 Add ability to clip Stepper step content (flutter/flutter#1…

6e05874

…52370)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to clip `Stepper` step content#152370

Add ability to clip `Stepper` step content#152370
auto-submit[bot] merged 2 commits intoflutter:masterfrom
TahaTesser:stepper_step_content_clip

TahaTesser commented Jul 26, 2024

Uh oh!

Piinks Jul 29, 2024

Uh oh!

TahaTesser Jul 30, 2024 •

edited

Loading

Uh oh!

TahaTesser Jul 30, 2024

Uh oh!

Piinks Jul 31, 2024

Uh oh!

Piinks Jul 29, 2024

Uh oh!

TahaTesser Jul 30, 2024 •

edited

Loading

Uh oh!

Piinks left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

TahaTesser commented Jul 26, 2024

Code sample

Without Stepper step content clipping

With Stepper step content clipping

Pre-launch Checklist

Uh oh!

Piinks Jul 29, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jul 30, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Jul 29, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Without `Stepper` step content clipping

With `Stepper` step content clipping

TahaTesser Jul 30, 2024 •

edited

Loading

TahaTesser Jul 30, 2024 •

edited

Loading