Android: When used on a stack on top of a circle-shape container, the CirclePercentIndicator widget is not rendered properly.

[nebooz]

It works completely fine on the iOS simulator, but there is something weird happening while using the Circle Percent Indicator in a Stack widget on top of a container also made to look like a circle using BoxShape.

What is even weirder is that when Debug Paint is on, it looks properly rendered.

I think the images make it clear.

Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    Container(
      width: 44.0,
      height: 40.0,
      color: Colors.grey[700],
    ),
    Container(
      width: 36.0,
      height: 36.0,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(18),
      ),
    ),
    Container(
      alignment: Alignment.center,
      //color: Colors.transparent,
      height: 34.0,
      width: 34.0,
      child: CircularPercentIndicator(
        radius: 30.0,
        lineWidth: 4.0,
        animation: true,
        animationDuration: 1000,
        percent: movies[index].voteAverage / 10,
        center: Row(
          crossAxisAlignment:
              CrossAxisAlignment.center,
          mainAxisAlignment:
              MainAxisAlignment.center,
          children: <Widget>[
            Text(
              (((movies[index].voteAverage) * 10)
                  .toStringAsFixed(0)),
              style: TextStyle(
                  fontSize: 11.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold),
            ),
            Text(
              "%",
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 6.0),
            )
          ],
        ),
        circularStrokeCap:
            CircularStrokeCap.round,
        progressColor: progressColor,
        backgroundColor: progressColor.shade900,
      ),
    ),
  ],
)

[diegoveloper]

Hello, I tested your code on my android device running Android Pie (9.0) and it works fine.
This is my flutter version:

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.1.4, on Mac OS X 10.14.2 18C54, locale en-PE)

what version are you using?

[nebooz]

Hi. This is what I'm running:
Flutter (Channel beta, v1.0.0, on Mac OS X 10.13.6 17G65, locale en-US)

And the emulator:
Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

[diegoveloper]

Try changing to 'stable' version.

run : flutter channel stable

[nebooz]

I changed to stable and the issue remains. Just for fun, I tried running it on Android Pie and same thing. Anything else I might try?

[diegoveloper]

Could you add a screenshot to check how it looks like? Also add the flutter doctor log here.

…

On Sun, Jan 20, 2019, 6:58 PM Maximiliano Diaz ***@***.*** wrote: I changed to stable and the issue remains. Just for fun, I tried running it on Android Pie and same thing. Anything else I might try? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEq90O9aMJ7uW5qh5zT05LCB4gjNHVCJks5vFQKggaJpZM4aJ3fi> .

[nebooz]

Here is the doctor log:

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.6 17G65, locale en-US)
    • Flutter version 1.0.0 at /Users/maxdiaz/dev/flutter
    • Framework revision 5391447fae (7 weeks ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/maxdiaz/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    ✗ Verify that all connected devices have been paired with this computer in Xcode.
      If all devices have been paired, libimobiledevice and ideviceinstaller may require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    • ios-deploy 1.9.4
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 31.3.3
    • Dart plugin version 182.5124
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[✓] Connected device (2 available)
    • Android SDK built for x86 • emulator-5554                        • android-x86 • Android 9 (API 28) (emulator)
    • iPhone XR                 • 26D7DAE6-A4FB-4F31-9CB7-1A7C8D5EAC00 • ios         • iOS 12.1 (simulator)

! Doctor found issues in 1 category.
Process finished with exit code 0

Here is a screenshot:

And a video, in which you can see for a couple of frames that it draws correctly before being over imposed by the black circle container:
https://streamable.com/mt3hw

[diegoveloper]

Oh ok , I thought stable version had an upper version. so try using dev channel , just for testing:

run: flutter channel dev

[nebooz]

That fixed it. Wonder what was the issue... guess I'll stay in the dev channel from now on. Thanks! 👍