Flutter AppBar: “3-dots” icon
By: Arathi Shankri
Tags: Flutter App Development, Flutter Web, Flutter Widget, Flutter, Flutter Ui

Have you ever wondered how to transform the action icons on the right side of the app bar into a “3-dots” icon when viewing your app on a smaller device? (I also refer to it as “more_options” icon) If so, let me walk you through this article to show the logic (or the magic!) behind the scenes.

USE CASE

My use case was to display a regular row of icons on the app bar but transform it to “3-dots” icon on app bar overflow or when the app is viewed on a smaller width device. Please see the gif below.

Action Icons transforming into Popupmenu icons.

HIGH-LEVEL DESIGN

Running the transition in mind a couple of times, one can break up the transformation as below, right?

Detect screen width If screen width > smaller device-width then display row with icon buttons If screen width <= smaller device-width then display popup menu button with icon buttons

Thus, at a high level, we should design such that

the action icons are a widget by itself, that widget would listen to size changes when a smaller device width is detected, the widget returns one icon, “more_vert” or “more_horiz “ with action icons as a popup menu Else it will return a Row widget with icon buttons

That’s it! except that IconButton.onPressed invokes the corresponding action method whereas Popmenu.onSelected invokes the menu which in turn has its own corresponding action methods.

S o, in the case of Popupmenu, we won’t be able to invoke the corresponding action method. Hence, the below design to embed our actions as a custom object.

IMPLEMENTATION

Just sharing how we implemented it, but I am sure there might be various other ways too.

STEP 1

Design an “ActionInfo” custom class that has all the attributes of your action icons. For each icon that needs to be displayed, an “actionInfo” object needs to be created.

As you see in the code below, the icon properties and the callback function that needs to be invoked on click of the icon are embedded in the class.

Custom ActionInfo object

Why callback methods? Implementation logic rightfully belongs in the caller class.The widget building the actions should not worry about what needs to happen when an icon button or popup menu is clicked. Thus, abstracting the widget to be more UI specific and reusable (in most scenarios!)

STEP 2

Create list of ActionInfo objects.

action_info objects

STEP 3

The above list of ActionInfo objects is sent to the below custom AppBar widget (variable “appBarActions” in below code) and it returns the app bar with the title and either a row with icons or the “3-dots” icon.

Because of the custom class, we could build the PopupMenuItem(line 16 and 13 in the above code) to return the object that was clicked and extract the callback method from the “XActionInfo.func” property. Without the custom class, you will have to restore to a string/int based value returned from the PopupMenuItem and if-else clauses to hardcode your callback function!!

STEP 4

In the above code, “isHorzSmallorLess” method uses MediaQuery to check if the horizontal width ≤ 400 (threshold that is being set in my example, you can have your own), if so, returns true else false.

CONCLUSION

The design and implementation were not difficult to come by except the difference in implementing Popupmenu action vs IconButton action. This was resolved by the custom action info class that could be accessed to with the callback method.

Hope this share helps you along the way to solve the issue you are facing. Please don’t forget to “clap” 👏 to help your fellow programmers find this article easily.

Happy Thinking!

Arathi