`CircularProgressIndicator` stretches when given tight constraints with `FlexFit.tight`

[RepliedSage11]

Steps to reproduce

Place a CircularProgressIndicator inside a Flex with FlexFit.tight (or any other widget that gives it tight constraints like a SizedBox)

Expected results

The indicator should either scale keeping the aspect ratio or not scale at all.

Actual results

The indicator is stretched to fill the constraints on one of the axes.

Code sample

Code sample

```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Align( alignment: Alignment.center, child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Flexible( fit: FlexFit.tight, child: CircularProgressIndicator(), ), ], ), ), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration

https://github.com/user-attachments/assets/5d9fff1e-8cea-4292-a5f3-b7c762472e0a

Logs

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```console [✓] Flutter (Channel stable, 3.24.3, on macOS 15.0.1 24A348 darwin-arm64, locale en-GB) • Flutter version 3.24.3 on channel stable at /Users/alex/workspace/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2663184aa7 (5 weeks ago), 2024-09-11 16:27:48 -0500 • Engine revision 36335019a8 • Dart version 3.5.3 • DevTools version 2.37.3 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) • Android SDK at /Users/alex/Library/Android/sdk • Platform android-34, build-tools 33.0.1 • ANDROID_HOME = /Users/alex/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 16.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 16A242d • CocoaPods version 1.15.2 [✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio.app/Contents • 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 17.0.6+0-17.0.6b829.9-10027231) [✓] VS Code (version 1.94.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.98.0 [✓] Connected device (3 available) • Alex’s iPhone (mobile) • 00008130-001A310C0491401C • ios • iOS 18.0.1 22A3370 • macOS (desktop) • macos • darwin-arm64 • macOS 15.0.1 24A348 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.0.1 24A348 darwin-arm64 [✓] Network resources • All expected network resources are available. ```

[jaypal1046]

Expanded assigns FlexFit.tight to its child, making it expand to fill the remaining space. If you need flexible sizing behavior, consider using Flexible with FlexFit.loose instead, allowing the child to size itself based on its content.

tight → const FlexFit The child is forced to fill the available space.

The Expanded widget assigns this kind of FlexFit to its child.

[darshankawar]

@RepliedSage11 As mentioned in the docs and shared in above comment as well, using FlexFit.tight The child is forced to fill the available space and hence you are seeing the stretched widget. So, if you use FlexFit.loose`, it shows the widget in smaller size as expected.

[RepliedSage11]

I understand what a tight fit does. Replace the CircularProgressIndicator with a CupertinoActivityIndicator and it behaves like it should (in my opinion). It does not make sense for a widget like a progress indicator to be stretched in one dimension. The surrounding container is stretched to fill the available space, but the indicator should either fill the space while keeping the aspect ratio or better yet behave like the Cupertino one.

[darshankawar]

Thanks for the feedback. With CupertinoActivityIndicator, it shows as below with Flexfit.tight:

Whereas, CircularProgressIndicator stretched as shown in video. Keeping the issue open and labeling for team's tracking and on expected behavior.

Stable : 3.24.3
Master : 3.27.0-1.0.pre.120