Badge widget alignment doesn't work as intended #119324
Description
After updating flutter version to 3.7.0, a custom Badge I was using (see code below) started conflicting with a newly added Badge to material.dart. Therefore, I've tried to use the badge provided by Material, but I can't position the label where I want.
Steps to Reproduce
- Execute
flutter runon the 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 App',
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Reproducing badge error"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// HERE
Badge(
alignment: AlignmentDirectional.topEnd,
label: Text("2"),
child: Container(width: 200, height: 200, color: Colors.amber)),
],
),
),
);
}
}Expected results:
| Badge (Custom) |
|---|
 |
Code for custom Badge (if needed)
import 'package:flutter/material.dart';
class Badge extends StatelessWidget {
final Widget child;
final String value;
final Color? color;
const Badge({
super.key,
required this.child,
required this.value,
this.color,
});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
child,
Positioned(
right: 8,
top: 8,
child: Container(
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: color ?? Colors.amber,
),
constraints: const BoxConstraints(
minWidth: 16,
minHeight: 16,
),
child: Text(
value,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 10,
),
),
),
)
],
);
}
}Actual results:
| Badge (Material) |
|---|
 |
Logs
flutter doctor -v
[✓] Flutter (Channel stable, 3.7.0, on macOS 13.0.1 22A400 darwin-x64, locale en-US)
• Flutter version 3.7.0 on channel stable at /Users/.../Programs/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b06b8b2710 (3 days ago), 2023-01-23 16:55:55 -0800
• Engine revision b24591ed32
• Dart version 2.19.0
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/.../Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• ANDROID_SDK_ROOT = /Users/.../Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
[✓] Android Studio (version 2021.1)
• 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 11.0.11+0-b60-7590822)
[✓] VS Code (version 1.74.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.58.0
[✓] Connected device (4 available)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 12 (API 31) (emulator)
[✓] HTTP Host Availability
• All required HTTP hosts are available