Skip to content

CircularProgressIndicator renders strangely since 3.7.0 #121100

@m-gug

Description

@m-gug

Steps to Reproduce

  1. Execute flutter run on the code sample on an android device/emulator
  2. Click 'Open route' button

Expected results:
You should immediately see a spinning CircularProgressIndicator.

Actual results:
When the second route is opened, only a CircularProgressIndicator should be displayed there.
But before you see the actual CircularProgressIndicator, for a short moment there is a fraction of the indicator visible in the center (looks more like a pixel).

This behavior started with Flutter version 3.7.0. If you downgrade to 3.3.10, the behavior is correct again and you can see the CircularProgressIndicator spinning.

It seems that only Android is affected, the problem does not exist on iOS.
On Android, it is present on the emulator and on a real device.

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}
Logs
Analyzing flutter_application_1...                                      
No issues found! (ran in 1.5s)
[√] Flutter (Channel stable, 3.7.3, on Microsoft Windows [Version 10.0.22621.1265], locale de-DE)
    • Flutter version 3.7.3 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9944297138 (12 days ago), 2023-02-08 15:46:04 -0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1

[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\gug\AppData\Local\Android\Sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\Users\gug\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop for Windows (Visual Studio Enterprise 2022 17.4.4)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise
    • Visual Studio Enterprise 2022 version 17.4.33213.308
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)

[√] VS Code (version 1.75.1)
    • VS Code at C:\Users\gug\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.58.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22621.1265]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 109.0.5414.120
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 105.0.1343.33

[√] HTTP Host Availability
    • All required HTTP hosts are available

It's hard to see in the GIF, but right after the button click you see the blue dot in the middle before the indicator comes up.
flutter

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: animationAnimation APIsfound in release: 3.7Found to occur in 3.7found in release: 3.8Found to occur in 3.8frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: solvedIssue is closed as solved

    Type

    No type

    Projects

    Status

    Issue closed with comment

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions