Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the RefreshProgressIndicator widget to the 2024 Material Design appearance #164384

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update the RefreshProgressIndicator widget to the 2024 Material Design appearance #164384

wants to merge 1 commit into from
+158 −36

Conversation

TahaTesser
Copy link
Member

@TahaTesser TahaTesser commented Feb 28, 2025 •
edited
Loading

Fixes RefreshIndicator is not displaying same as M3 specs

Description

This PR updates RefreshProgressIndicator with year2023 flag which can be used to opt into the 2024 RangeSlider design appearance. The RefreshProgressIndicator specific tokens don't exit as this RefreshProgressIndicator isn't mentioned in M3 specs but based on the CircularProgressIndicator guidelines it exist and can be found in Jetpack Compose so I've matched the new arrow head and container background manually. This PR extends CircularProgressIndicator defaults for RefreshProgressIndicator as well.

The updated RefreshProgressIndicator has:

  1. New arrow head style.
  2. Stroke roundness is updated based on drag value (when dragging it uses square stroke cap and rounded when released)

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(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Refresh Indicator Example'),
        ),
        body: RefreshIndicator(
          onRefresh: onRefresh,
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }

  Future<void> onRefresh() async {
    await Future<void>.delayed(const Duration(seconds: 2));
  }
}

Preview

Screenshot 2025-02-27 at 16 33 17

Pre-launch Checklist

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

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 28, 2025
@TahaTesser TahaTesser marked this pull request as ready for review February 28, 2025 18:52
@TahaTesser TahaTesser removed the request for review from matanlurey February 28, 2025 18:53
@flutter-dashboard
Copy link

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #164384 at sha 566908f

@flutter-dashboard flutter-dashboard bot added the will affect goldens Changes to golden files label Feb 28, 2025
@dkwingsmt dkwingsmt requested a review from QuncCccccc March 12, 2025 18:48
QuncCccccc
QuncCccccc reviewed Mar 15, 2025
View reviewed changes
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If users want a native M3 refresh progress indicator, would it be enough to just change the refreshBackgroundColor and color? Seems that's the only difference from the screenshots listed in the issue. If this is true, I think a code snippet in documentation would be enough. WDYT:)?

@TahaTesser
Copy link
Member Author

If users want a native M3 refresh progress indicator, would it be enough to just change the refreshBackgroundColor and color? Seems that's the only difference from the screenshots listed in the issue. If this is true, I think a code snippet in documentation would be enough. WDYT:)?

There are two major differences besides just color.

  1. A different arrow head.
  2. Stroke roundness (when the dragging it uses square stroke cap and rounded when released)

@TahaTesser
Copy link
Member Author

If users want a native M3 refresh progress indicator, would it be enough to just change the refreshBackgroundColor and color? Seems that's the only difference from the screenshots listed in the issue. If this is true, I think a code snippet in documentation would be enough. WDYT:)?

There are two major differences besides just color.

  1. A different arrow head.
  2. Stroke roundness (when the dragging it uses square stroke cap and rounded when released)

Also updated the original description to highlight what's new.

@TahaTesser TahaTesser requested a review from QuncCccccc March 18, 2025 15:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@QuncCccccc QuncCccccc Awaiting requested review from QuncCccccc

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. will affect goldens Changes to golden files
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

RefreshIndicator is not displaying same as M3 specs
2 participants
@TahaTesser @QuncCccccc