Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding #129556

TahaTesser · 2023-06-26T14:01:30Z

fixes AnimatedList does not take SafeArea into account when building the list

Description

This PR fixes an issue for AnimatedList & AnimatedGrid where MediaQuery padding isn't applied.

While the ListView or GridView applies MediaQuery padding to its inner SliverPadding. See the source. This is missing from AnimatedList & AnimatedGrid.

The fix applies MediaQuery padding to the inner SliverPadding in AnimatedList & AnimatedGrid.

Code sample

expand to view the 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 MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const Example(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample'),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              children: <Widget>[
                const Text('ListView'),
                Expanded(
                  child: ListView.builder(
                    itemCount: 50,
                    itemBuilder: (_, int index) {
                      return ColoredBox(
                        color: Theme.of(context).colorScheme.primaryContainer,
                        child: Center(
                          child: Text('$index', textAlign: TextAlign.center),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          const VerticalDivider(width: 4),
          Expanded(
            child: Column(
              children: <Widget>[
                const Text('AnimatedList'),
                Expanded(
                  child: AnimatedList(
                    initialItemCount: 50,
                    itemBuilder: (_, int index, __) {
                      return ColoredBox(
                        color: Theme.of(context).colorScheme.primaryContainer,
                        child: Center(
                          child: Text('$index', textAlign: TextAlign.center),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          const VerticalDivider(width: 4),
          Expanded(
              child: Column(
            children: <Widget>[
              const Text('AnimatedGrid'),
              Expanded(
                child: AnimatedGrid(
                  initialItemCount: 50,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemBuilder: (_, int index, __) {
                    return ColoredBox(
                      color: Theme.of(context).colorScheme.primaryContainer,
                      child: Center(
                        child: Text('$index', textAlign: TextAlign.center),
                      ),
                    );
                  },
                ),
              ),
            ],
          ))
        ],
      ),
    );
  }
}

Before

After

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.
All existing and new tests are passing.

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

HansMuller

LGTM and beautifully illustrated.

…` padding (flutter/flutter#129556)

Roll Flutter from 042c036 to 96a2c05 (60 revisions) flutter/flutter@042c036...96a2c05 2023-06-26 49699333+dependabot[bot]@users.noreply.github.com Bump ossf/scorecard-action from 2.1.3 to 2.2.0 (flutter/flutter#129453) 2023-06-26 [email protected] Roll Flutter Engine from 63582320d20e to 4032a9bc964e (2 revisions) (flutter/flutter#129569) 2023-06-26 [email protected] Updated TextMagnifierExampleApp to M3 (flutter/flutter#129381) 2023-06-26 [email protected] Roll Flutter Engine from debee7cece49 to 63582320d20e (3 revisions) (flutter/flutter#129563) 2023-06-26 [email protected] Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding (flutter/flutter#129556) 2023-06-26 [email protected] Process only specific labels. (flutter/flutter#129475) 2023-06-26 [email protected] Roll Packages from d041934 to 6b70804 (7 revisions) (flutter/flutter#129559) 2023-06-26 [email protected] Make bug templates more consistent (flutter/flutter#129460) 2023-06-26 [email protected] Roll Flutter Engine from be46101e952d to debee7cece49 (1 revision) (flutter/flutter#129544) 2023-06-26 [email protected] Roll Flutter Engine from 88ff46e1efc1 to be46101e952d (2 revisions) (flutter/flutter#129540) 2023-06-26 [email protected] Roll Flutter Engine from 317673b3278a to 88ff46e1efc1 (1 revision) (flutter/flutter#129534) 2023-06-26 [email protected] Roll Flutter Engine from 593e1d9a9cf5 to 317673b3278a (3 revisions) (flutter/flutter#129531) 2023-06-25 [email protected] Roll Flutter Engine from 5178e8ab7764 to 593e1d9a9cf5 (1 revision) (flutter/flutter#129514) 2023-06-25 [email protected] Roll Flutter Engine from 100f6fc854b4 to 5178e8ab7764 (1 revision) (flutter/flutter#129508) 2023-06-25 [email protected] Roll Flutter Engine from a9f446e25f0c to 100f6fc854b4 (1 revision) (flutter/flutter#129498) 2023-06-25 [email protected] Roll Flutter Engine from 5b1b98305768 to a9f446e25f0c (1 revision) (flutter/flutter#129495) 2023-06-24 [email protected] Roll Flutter Engine from 72c902ce3b81 to 5b1b98305768 (2 revisions) (flutter/flutter#129493) 2023-06-24 [email protected] Roll Flutter Engine from f2976add9414 to 72c902ce3b81 (1 revision) (flutter/flutter#129489) 2023-06-24 [email protected] Roll Flutter Engine from 76a5e971dc09 to f2976add9414 (1 revision) (flutter/flutter#129487) 2023-06-24 [email protected] Roll Flutter Engine from 79fd6beea087 to 76a5e971dc09 (1 revision) (flutter/flutter#129483) 2023-06-24 [email protected] Roll Flutter Engine from 30ac9107f2f9 to 79fd6beea087 (1 revision) (flutter/flutter#129479) 2023-06-24 [email protected] Roll Flutter Engine from ee65380bf3fd to 30ac9107f2f9 (1 revision) (flutter/flutter#129476) 2023-06-24 [email protected] Roll Flutter Engine from 240a86f40781 to ee65380bf3fd (2 revisions) (flutter/flutter#129474) 2023-06-24 [email protected] Fix issues with no response bot. (flutter/flutter#129470) 2023-06-24 [email protected] Roll Flutter Engine from 5e6dcf959ea0 to 240a86f40781 (1 revision) (flutter/flutter#129473) 2023-06-24 [email protected] Roll Flutter Engine from 550bfedc8760 to 5e6dcf959ea0 (1 revision) (flutter/flutter#129468) 2023-06-24 [email protected] Roll Flutter Engine from c1abd1f17ab1 to 550bfedc8760 (3 revisions) (flutter/flutter#129466) 2023-06-24 [email protected] [devicelab] Add platform view scroll benchmarks for Impeller on Android (flutter/flutter#129455) 2023-06-23 [email protected] Roll Flutter Engine from eca910dd5e3f to c1abd1f17ab1 (3 revisions) (flutter/flutter#129456) 2023-06-23 [email protected] Roll Flutter Engine from f8a39cb4dc56 to eca910dd5e3f (3 revisions) (flutter/flutter#129451) 2023-06-23 [email protected] Roll Flutter Engine from 74ef61859bdc to f8a39cb4dc56 (2 revisions) (flutter/flutter#129445) 2023-06-23 [email protected] Add CallbackShortcuts widget of the week video (flutter/flutter#129296) 2023-06-23 [email protected] Roll Flutter Engine from 060cd9c17df3 to 74ef61859bdc (3 revisions) (flutter/flutter#129444) 2023-06-23 [email protected] Roll Flutter Engine from cd30a48ef889 to 060cd9c17df3 (3 revisions) (flutter/flutter#129440) 2023-06-23 [email protected] Roll Flutter Engine from 27f3498286ff to cd30a48ef889 (4 revisions) (flutter/flutter#129437) 2023-06-23 [email protected] Add a devicelab test to recipes cq. (flutter/flutter#129411) 2023-06-23 [email protected] fix: Inconsistency of SelectionArea when scrolling (flutter/flutter#128765) 2023-06-23 [email protected] Run misc test shard when examples/api/** change (flutter/flutter#129433) 2023-06-23 49699333+dependabot[bot]@users.noreply.github.com Bump ubuntu from `b795f8e` to `db8bf6f` in /dev/ci/docker_linux (flutter/flutter#128740) 2023-06-23 [email protected] Add r: timeout label to bugs/pr closed by no response bot. (flutter/flutter#129408) 2023-06-23 [email protected] Remove .github/move.yml. (flutter/flutter#129409) 2023-06-23 [email protected] Roll Packages from 95bc1c6 to d041934 (6 revisions) (flutter/flutter#129429) 2023-06-23 [email protected] Roll Flutter Engine from aca26b2afc27 to 27f3498286ff (16 revisions) (flutter/flutter#129421) 2023-06-23 [email protected] Add comments to .ci.yaml that were removed from recipes. (flutter/flutter#129321) 2023-06-23 [email protected] Update no response to use core action. (flutter/flutter#129405) 2023-06-23 [email protected] Revert "[web] Migrate framework to fully use package:web" (flutter/flutter#129400) ...

…` padding (#129556)" This reverts commit c8e42b4.

…ply `MediaQuery` padding" (#129645) Reverts #129556. Context: b/288993600 quoting, "the failure (in internal tests) appears to be due to a workaround for the issue fixed by this pr".

flutter#129556

#129556 (#129860) Reland #129556 which had failed an internal test (see Google internal link b/288993600) and was reverted in #129645. This PR must be landed with G3 Fix cl/543755631

…` padding (flutter/flutter#129556)

Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding

013ee80

github-actions bot added f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels. labels Jun 26, 2023

TahaTesser marked this pull request as ready for review June 26, 2023 14:35

TahaTesser requested review from HansMuller and Piinks June 26, 2023 14:35

HansMuller approved these changes Jun 26, 2023

View reviewed changes

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 26, 2023

auto-submit bot merged commit c8e42b4 into flutter:master Jun 26, 2023

TahaTesser deleted the animated_scrollables_padding branch June 26, 2023 16:19

engine-flutter-autoroll mentioned this pull request Jun 26, 2023

Roll Flutter from 042c0366c9a9 to c8e42b47f5ea (56 revisions) flutter/packages#4309

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 26, 2023

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

a779e90

…` padding (flutter/flutter#129556)

engine-flutter-autoroll mentioned this pull request Jun 26, 2023

Roll Flutter from 042c0366c9a9 to cef9a8c54b76 (57 revisions) flutter/packages#4310

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 26, 2023

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

3119ad8

…` padding (flutter/flutter#129556)

engine-flutter-autoroll mentioned this pull request Jun 26, 2023

Roll Flutter from 042c0366c9a9 to 96a2c0535810 (60 revisions) flutter/packages#4313

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 26, 2023

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

d0a7288

…` padding (flutter/flutter#129556)

XilaiZhang added a commit that referenced this pull request Jun 27, 2023

Revert "Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

3e2b152

…` padding (#129556)" This reverts commit c8e42b4.

XilaiZhang mentioned this pull request Jun 27, 2023

[flutter roll] Revert "Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding" #129645

Merged

HansMuller mentioned this pull request Jun 30, 2023

Flutter Framework Team: Notable Commits #121415

Closed

HansMuller mentioned this pull request Jun 30, 2023

Reland Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding #129556 #129860

Merged

HansMuller added a commit to HansMuller/flutter that referenced this pull request Jul 5, 2023

Reland Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding

7504673

flutter#129556

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

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

e561c63

…` padding (flutter/flutter#129556)

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

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

cf0a98d

…` padding (flutter/flutter#129556)

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

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

ab395c8

…` padding (flutter/flutter#129556)

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

c8e42b4 Fix AnimatedList & AnimatedGrid doesn't apply `MediaQuery…

a41a7d6

…` padding (flutter/flutter#129556)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding #129556

Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding #129556

Uh oh!

TahaTesser commented Jun 26, 2023 •

edited

Loading

Uh oh!

HansMuller left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding #129556

Fix AnimatedList & AnimatedGrid doesn't apply MediaQuery padding #129556

Uh oh!

Conversation

TahaTesser commented Jun 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Code sample

Before

After

Pre-launch Checklist

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding #129556

Fix `AnimatedList` & `AnimatedGrid` doesn't apply `MediaQuery` padding #129556

TahaTesser commented Jun 26, 2023 •

edited

Loading