Badge With IconButton.outlined Behind Outline
Introduction
In Flutter, the IconButton widget provides a convenient way to display an icon that can be pressed. However, when using the IconButton.outlined variant, the badge that is displayed on top of the icon is sometimes behind the outline of the icon. This is a known issue that can be frustrating for developers who are trying to create a visually appealing user interface.
Steps to reproduce
- Run the example code provided below.
- Observe that the badge with
IconButton.outlinedis behind the outline of the icon. - Compare this with the other
IconButtonvariants, where the badge is displayed in front of the icon.
Expected results
The badge with IconButton.outlined should be displayed in front of the outline of the icon.
Actual results
The badge with IconButton.outlined is displayed behind the outline of the icon.
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(
debugShowCheckedModeBanner: false,
title: 'Flutter Badge Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Badge Example'),
actions: [
IconButton.outlined(
iconSize: 40,
isSelected: false,
onPressed: () {},
icon: Badge(
backgroundColor: Theme.of(context).colorScheme.primary,
label: Text('3', style: TextStyle(fontSize: 18)),
child: Icon(Icons.lightbulb_rounded),
),
),
],
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton.outlined(
iconSize: 40,
isSelected: false,
onPressed: () {},
icon: Badge(
backgroundColor: Theme.of(context).colorScheme.primary,
label: Text('3', style: TextStyle(fontSize: 18)),
child: Icon(Icons.lightbulb_rounded),
),
),
IconButton.outlined(
iconSize: 40,
isSelected: true,
onPressed: () {},
icon: Badge(
backgroundColor: Theme.of(context).colorScheme.primary,
label: Text('3', style: TextStyle(fontSize: 18)),
child: Icon(Icons.lightbulb_rounded),
),
),
IconButton.outlined(
iconSize: 40,
isSelected: false,
onPressed: () {},
icon: Badge(
backgroundColor: Theme.of(context).colorScheme.primary,
label: Text('Ad', style: TextStyle(fontSize: 18)),
child: Icon(Icons.lightbulb_rounded),
),
),
IconButton.filled(
iconSize: 40,
isSelected: false,
onPressed: () {},
icon: Badge(
backgroundColor: Theme.of(context).colorScheme.primary,
label: Text('Ad', style: TextStyle(fontSize: 18)),
child: Icon(Icons.lightbulb_rounded),
),
),
],
),
),
);
}
}
Screenshots or Video
Logs
[Paste your logs here]
Flutter Doctor output
[✓] Flutter (Channel stable, 3.29.3, on macOS 15.4 24E248 darwin-arm64, locale
ru-RU) [1 510ms]
• Flutter version 3.29.3 on channel stable at
/Users/denis/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ea121f8859 (7 days ago), 2025-04-11 19:10:07 +0000
• Engine revision cf56914b32
• Dart version 3.7.2
• DevTools version 2.42.3
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[6,0s]
• Android SDK at /Users/denis/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on
this machine.
To manually set the JDK path, use: `flutter config
--jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [2,4s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16E140
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [16ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.2) [16ms]
• 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 21.0.3+-79915917-b509.11)
[✓] VS Code (version 1.99.3) [14ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.108.0
[✓] Connected device (5 available) [7,2s]
• Pixel 6 (mobile) • 26101FDF60002Q • android-arm64 • Android
15 (API 35)
• iPad (Денис) (wireless) (mobile) • 00008030-001600623E22202E • ios • iOS
18.4 22E240
• macOS (desktop) • macos • darwin-arm64 • macOS
15.4 24E248 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS
15.4 24E248 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google
Chrome 135.0.7049.96
! Error: Browsing on the local area network for iPhone (Денис). Ensure the device is
unlocked and attached with a cable or associated with the same local area network as
this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [1 032ms]
• All expected network resources are available.
• No issues found!
Conclusion
Q: What is the issue with the badge with IconButton.outlined?
A: The issue is that the badge with IconButton.outlined is displayed behind the outline of the icon, rather than in front of it.
Q: Why is this happening?
A: This is a known issue in Flutter, and it is caused by the way that the IconButton.outlined widget is implemented. The IconButton.outlined widget uses a custom Material widget to create the outline effect, and this widget is not designed to work well with the Badge widget.
Q: Are there any workarounds for this issue?
A: Yes, there are several workarounds that can be used to achieve the desired visual effect. One approach is to use the Badge widget with a custom Stack widget, which allows you to position the badge on top of the icon. Another approach is to use the Material widget with a custom Elevation property, which allows you to create a custom outline effect that can be used to display the badge in front of the icon.
Q: How can I use the Stack widget to position the badge on top of the icon?
A: To use the Stack widget to position the badge on top of the icon, you can create a custom Stack widget that contains both the IconButton.outlined widget and the Badge widget. You can then use the alignment property of the Stack widget to position the badge on top of the icon.
Q: How can I use the Material widget with a custom Elevation property to create a custom outline effect?
A: To use the Material widget with a custom Elevation property to create a custom outline effect, you can create a custom Material widget that contains the IconButton.outlined widget. You can then use the elevation property of the Material widget to create a custom outline effect that can be used to display the badge in front of the icon.
Q: Are there any other issues with the badge with IconButton.outlined?
A: Yes, there are several other issues with the badge with IconButton.outlined. For example, the badge may not be displayed correctly on certain platforms, or it may not be displayed at all on certain devices. Additionally, the badge may not be responsive, which means that it may not adapt to different screen sizes or orientations.
Q: How can I troubleshoot issues with the badge with IconButton.outlined?
A: To troubleshoot issues with the badge with IconButton.outlined, you can use the Flutter debugger to inspect the widget tree and identify any issues with the badge. You can also use the Flutter console to print out any error messages that may be related to the badge. Additionally, you can use the Flutter documentation to learn more about the IconButton.outlined widget and how to use it correctly.
Q: Are there any best practices for using the badge with IconButton.outlined?
A: Yes, there are several best practices for using the badge with IconButton.outlined. example, you should always use the Badge widget with a custom Stack widget to position the badge on top of the icon. You should also use the Material widget with a custom Elevation property to create a custom outline effect that can be used to display the badge in front of the icon. Additionally, you should always test your app on different platforms and devices to ensure that the badge is displayed correctly.