Skip to content

Cupertino icons are misaligned in latest beta #143069

@DanTup

Description

@DanTup

Steps to reproduce

While updating icons for https://github.com/flutter/tools_metadata, I noticed all of the Cupertino icons showed as modified. The ones I checked all appear to have shifted up slightly.

So I tried rendering an icon in a standard Flutter app with a border:

child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: const Icon(CupertinoIcons.xmark_shield_fill, size: 50),
          ),

And I see the same thing - the icon looks slightly too far up. This seems to have come up before at #66285 but that was fixed a long time ago and I can't see why it would have changed since. Both examples are using cupertino_icons 1.0.6.

Expected results

Icon should be centered in the box.

Actual results

Icon is too far up in the latest beta. In current stable it is centered.

Left: stable
Right: beta

Screenshot 2024-02-07 at 12 08 35

Tested on macOS device.

Code sample

Code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: const Icon(CupertinoIcons.xmark_shield_fill, size: 50),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Beta:

Screenshot 2024-02-07 at 12 05 30

Stable / Beta comparison:

Screenshot 2024-02-07 at 12 08 35 Screenshot 2024-02-07 at 11 45 11

Flutter Doctor output

Doctor output
[!] Flutter (Channel beta, 3.19.0-0.4.pre, on macOS 13.4 22F66 darwin-x64, locale en-GB)
    ! Warning: `dart` on your path resolves to /Users/danny/Dev/Dart SDKs/stable/bin/dart, which is not inside your current Flutter SDK checkout at
      /Users/danny/Dev/Google/flutter. Consider adding /Users/danny/Dev/Google/flutter/bin to the front of your path.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.86.0)
[✓] VS Code (version 1.79.0-insider)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: regressionIt was better in the past than it is nowf: cupertinoflutter/packages/flutter/cupertino repositoryfound in release: 3.19Found to occur in 3.19found in release: 3.20Found to occur in 3.20frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_iconsCupertino icon setteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions