How to Integrate Icons into an Overflow Menu in Flutter?
I'm working on a Flutter application and aim to achieve a design similar to the Material Design 3 overflow menu, as shown in the image below.
Here's my current code snippet for creating an AppBar with various icons:
child: Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 255, 202, 55),
title: ResponsiveWeb(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, right: 0),
child: Row(
children: [
const Icon(
FontAwesomeIcons.checkDouble,
size: 25,
color: const Color(0xff3B3B3B),
),
],
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 0),
child: Row(
children: [
Tooltip(
message: 'Daily goals',
child: Semantics(
label: 'Pomodoro timer daily goals',
enabled: true,
readOnly: true,
child: IconButton(
icon: Icon(
Icons.military_tech_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer daily goals',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SettingsUIPomodoro()),
);
},
),
),
),
Tooltip(
message: 'Settings',
child: Semantics(
label: 'Pomodoro timer settings',
enabled: true,
readOnly: true,
child: IconButton(
icon: Icon(
Icons.settings_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Settings',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SettingsUIPomodoro()),
);
},
),
),
),
Tooltip(
message: 'Analytics',
child: Semantics(
label: 'Pomodoro timer Analytics',
enabled: true,
readOnly: true,
child: IconButton(
icon: Icon(
Icons.show_chart_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Analytics',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Text('goal')),
);
},
),
),
),
Tooltip(
message: 'Profile',
child: Semantics(
label: 'Pomodoro timer Profile',
enabled: true,
readOnly: true,
child: IconButton(
icon: Icon(
Icons.face_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Profile',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Profile()),
);
},
),
),
),
Tooltip(
message: 'More',
child: Semantics(
label: 'Pomodoro timer More',
enabled: true,
readOnly: true,
child: IconButton(
icon: Icon(
Icons.more_vert_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer More',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Profile()),
);
},
),
),
),
],
),
)
],
),
),
),
),
I specifically want to integrate the following two icons into the overflow menu icon, mirroring the design from Material 3:
- 'daily goals' icon (
Icons.military_tech_outlined) - 'analytics' icon (
Icons.show_chart_outlined)
Here's how these icons are currently implemented:
child: IconButton(
icon: Icon(
Icons.military_tech_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer daily goals',
),
child: IconButton(
icon: Icon(
Icons.show_chart_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Analytics',
),
And I want to nest these inside the 'more' icon in my AppBar:
child: IconButton(
icon: Icon(
Icons.more_vert_outlined,
color: const Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer More',
),
How can I nest these specific icons within the overflow menu icon, mimicking the Material Design 3 example?
Thanks for any help you can provide.
Solution
You can archive this using popupMenubutton.
also check bellow links for more reference.
try this your edited code:
Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 255, 202, 55),
title: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8),
child: Row(
children: const [
Icon(
Icons.abc,
size: 25,
color: Color(0xff3B3B3B),
),
Text.rich(
TextSpan(
text: ' pomo',
style: GoogleFonts.nunito(
fontSize: 25,
color: Color(0xff3B3B3B),
fontWeight: FontWeight.w700),
children: <TextSpan>[
TextSpan(
text: 'work',
style: GoogleFonts.nunito(
color: Color(0xff3B3B3B),
decoration: TextDecoration.underline,
decorationThickness: 3,
fontWeight: FontWeight.w700),
),
TextSpan(
text: 'o.com',
style: GoogleFonts.nunito(
fontSize: 25,
color: Color(0xff3B3B3B),
fontWeight: FontWeight.w700),
),
],
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8),
child: Row(
children: [
Tooltip(
message: 'Settings',
child: Semantics(
label: 'Pomodoro timer settings',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Settings',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SettingsUIPomodoro()),
);
},
),
),
),
Tooltip(
message: 'Profile',
child: Semantics(
label: 'Pomodoro timer Profile',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.face_outlined,
color: Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Profile',
),
onPressed: () {
/* Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Profile()),
); */
},
),
),
),
],
),
)
],
),
),
actions: [
PopupMenuButton(
icon: Tooltip(
message: 'More',
child: Semantics(
label: 'Pomodoro timer More',
enabled: true,
readOnly: true,
child: const Icon(
Icons.more_vert_outlined,
color: Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer More',
),
),
),
itemBuilder: ((context) => [
PopupMenuItem(
child: Tooltip(
message: 'Daily goals',
child: Semantics(
label: 'Pomodoro timer daily goals',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.military_tech_outlined,
color: Color(0xff3B3B3B),
size: 25,
semanticLabel:
'Pomodoro timer daily goals',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SettingsUIPomodoro()),
);
},
),
),
),
),
PopupMenuItem(
child: Tooltip(
message: 'Analytics',
child: Semantics(
label: 'Pomodoro timer Analytics',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.show_chart_outlined,
color: Color(0xff3B3B3B),
size: 25,
semanticLabel: 'Pomodoro timer Analytics',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const Text('goal')),
);
},
),
),
),
)
],
),
),
],
),
)
- *[SEVERE]* Failed to precompile build script .dart_tool/build/entrypoint/build.dart. This is likely caused by a misconfigured builder definition
- App Store Approved status, what to do next?
- How can I change the drag handle color of a bottom sheet in Flutter
- Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl. [Flutter]
- Flutter xcodebuild: error: Unable to find a destination matching the provided destination specifier
- flutter: Module 'path_provider_foundation' not found
- Flutter how to change app icon that generated using very_good cli (Very Good Venture)
- Flutter: include of non-modular header inside framework module 'firebase_core.FLTFirebasePlugin'
- Flutter app is crash when adding YoutubePlayer in some cases
- How do I use Flutter's hot reload for a web app that uses Firebase?
- Failed to build iOS app when I add Google MLkit Barcode Scanning
- Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator
- How to use registerForActivityResult in Flutter's MainActivity?
- Run Dart process as admin on Windows
- VSCode: Quickly switch between flutter versions
- FastAPI Websocket not closing or raising exception after closing the associated Flutter Websocket
- How to use new line character in Text Widget Flutter
- gradle gives an error in sqflite_android and java
- Firebase OTP working fine on debug apk but not release apk
- A problem occurred evaluating project tflite
- Flutter console log "Failed to send request: {"jsonrpc":"2.0","id":"9354","method":"getVM","params":{}}"
- Python decorator-like design pattern for Dart/Flutter?
- How to display a pdf page into a Flet container
- PageView: Disable the default scrolling and replace it with Tap event
- How can solve this issues? ArgumentError (Invalid argument(s): iOS settings must be set when targeting iOS platform.)
- In FCM I not able to navigate to specified page but just landing on home page
- Could not determine the dependencies of task ':compileReleaseJavaWithJavac | Flutter build failed, after adding dependency
- How can I give a shadow outline to the selected option in SegmentedButton (Flutter)?
- How to remove default padding from ExpansionTile's header
- How to Make the First Column Occupy More Space in PaginatedDataTable2 in Flutter?