Match CupertinoSliverRefreshControl to have a progressive ring instead of a growing down arrow

The indicator style of CupertinoSliverRefreshControl is different with iOS built-in UIRefreshControl

Any plan to match the style with it?

Screenshots:

I'll dupe it into #16069. Please let me know if the intended issue was incorrect.

@xster

@xster Yes, thanks for the quick reply.

In addition, the current icon is an arrow, while iOS native icon is a circular progress indicator. Would it be matched in the future?

Ah sure, I'll re-open this bug but scope it to the visuals of the indicator specifically.

Any updates?

Any progress so far?

Bump

Issue still exist on

[✓] Flutter (Channel dev, v1.16.3, on Mac OS X 10.15.4 19E266, locale en-GB)
    • Flutter version 1.16.3 at /Users/taha/Code/flutter_dev
    • Framework revision be3a4b37b3 (4 days ago), 2020-03-26 18:08:05 -0700
    • Engine revision b2bdeb3f0f
    • Dart version 2.8.0 (build 2.8.0-dev.17.0 1402e8e1a4)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.2
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.43.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (4 available)
    • iPhone 11  • 41EB2A85-7EB4-4FD2-8978-FBBE2A681D74 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-13-4 (simulator)
    • macOS      • macOS                                • darwin-x64     • Mac
      OS X 10.15.4 19E266
    • Chrome     • chrome                               • web-javascript •
      Google Chrome 80.0.3987.149
    • Web Server • web-server                           • web-javascript •
      Flutter Tools

• No issues found!

EDIT: Don't use this. My next comment has a much better implementation.

While we're waiting for this to be fixed, a very hacky workaround is to create an alternate implementation to the default one that can be found here:

flutter/packages/flutter/lib/src/cupertino/refresh.dart

Line 365 in 449f4a6

static Widget buildSimpleRefreshIndicator(

For example, the following shows the spinner immediately instead of a down arrow. Note that this is most definitely NOT what iOS does and still doesn't feel quite right when you see it in action, but it is far less foreign than showing a down arrow.

CupertinoSliverRefreshControl(
  ...
  builder: _buildSpinnerOnlyRefreshIndicator,
)

Widget _buildSpinnerOnlyRefreshIndicator(BuildContext context, RefreshIndicatorMode refreshState, double pulledExtent, double refreshTriggerPullDistance, double refreshIndicatorExtent) {
  const Curve opacityCurve = Interval(0.4, 0.8, curve: Curves.easeInOut);
  return Align(
    alignment: Alignment.bottomCenter,
    child: Padding(
      padding: const EdgeInsets.only(bottom: 16.0),
      child: Opacity(
        opacity: opacityCurve.transform(min(pulledExtent / refreshIndicatorExtent, 1.0)),
        child: const CupertinoActivityIndicator(radius: 14.0),
      ),
    ),
  );
}

There's quite a bit that goes on in the Apple implementation:

As you drag down, the spinner fades in
As it fades in, it draws the ticks one at a time (ie. it isn't just the spinner rotating)
Once you're refreshing, the standard spinner shows
When you're done, the spinner shrinks out of view

I've put together a much better implementation that covers most of this that you can see here: https://gist.github.com/edwardaux/eb481793aff880b8917d1445000058ad

@xster

@xster not sure if anyone has already started work on this... if not, I thought I'd have a go at submitting a PR based on the general concept in the gist above.

Conceptually, there are few states that the activity indicator can be in (see the _buildIndicator() function in the gist):

Not spinning with a fractional number of ticks being drawn - This is the state as the user pulls down
Spinning at normal size - This is the state while the refresh is occurring
Spinning with shrinking size - This is the state as the indicator shrinks after the pull has been released

My initial implementation above provides a separate implementation for the 1st case, however, it does so at the expense of some code duplication between my _DraggingActivityIndicator and Flutter's _CupertinoActivityIndicator.

So, I've got a couple of choices...

I can try to change the existing _CupertinoActivityIndicator to be able to support both spinning and non-spinning modes (which is going to make that class a lot more complicated),
I can use a separate class like I currently am... however, if this class is to be referenced from refresh.dart then it is either going to have to be:
- implemented in refresh.dart - which causes problems because a bunch of the color/width constants it needs are privately defined in activity_indicator.dart, or
- implemented in activity_indicator.dart but be marked as public - this is easier, but we've now got a publicly referencable class that should only be used internally which seems less than ideal.

Any thoughts or guidance you might have would appreciated. Thanks a lot.

As you can see from the above, #58392 has been merged to resolve this.

@edwardaux

Closing as the fix is merged. Thank you @edwardaux!

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Match CupertinoSliverRefreshControl to have a progressive ring instead of a growing down arrow #29159

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Match CupertinoSliverRefreshControl to have a progressive ring instead of a growing down arrow #29159

Description

Activity

xster commented on Mar 11, 2019

pd4d10 commented on Mar 12, 2019

xster commented on Mar 14, 2019

genert commented on Jul 17, 2019

realvotum commented on Aug 18, 2019

genert commented on Dec 6, 2019

TahaTesser commented on Mar 30, 2020

edwardaux commented on May 14, 2020

edwardaux commented on May 15, 2020

edwardaux commented on May 22, 2020

edwardaux commented on Jun 23, 2020

LongCatIsLooong commented on Jun 30, 2020

github-actions commented on Aug 19, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions