fix: fix overflow in heading mobile toolbar menu

[hyj1204]

To fix #285
I refactored the UI to make sure it always has three buttons on the heading mobile toolbar menu.
If the width of the screen is too small, the button texts will show in 2 lines

[alihassan143]

To fix #285 I refactored the UI to make sure it always has three buttons on the heading mobile toolbar menu. If the width of the screen is too small, the button texts will show in 2 lines

instead of showing in 2 lines use wrap widget if screen is too small third heading will be rendered at second line that is more better looking than rendering text in 2 lines

[hyj1204]

@alihassan143

The current layout rules in toolbar menu on mobile are:

• The buttons on the toolbar menu take up all the space of the width of the screen
• For every row will lay 2 or 3 buttons based on which toolbar item it is
• Every button has the same space between them, and the rest of the space will be used to render buttons.

The main purpose of it is to make all components(buttons) take all the width without leaving some undefined width of spacing. In this way, the width of the screen control how wide it is for a button, it will look like this on most screen sizes.

If the width of screen is not wide enough to let the text inside button to show within one row, it will look like this

The way you suggest:

If we change to wrap, we have to rely on the text inside button to decide how wide the button it is, we will have no control over how much space will be left in a row.
On a wide screen:

On a narrow screen:

The way I implemented will fit most sizes of screens without unknown width spacing, which follows the same layout rules in other toolbar items menus on mobile.

[Xazin]

I am wondering if it would be fine to hide text where the icons themselves are so common that the user wouldn't have a problem interpreting it, on small screens.

[LucasXu0]

@hyj1204 Please check the comments.

[hyj1204]

I am wondering if it would be fine to hide text where the icons themselves are so common that the user wouldn't have a problem interpreting it, on small screens.

Yes, for the heading part, the icons are easy to understand, I just feel we should try to keep the same UI style rules in all the mobile toolbar item menus. If we change all the buttons in the toolbar item menu to show icons only, I am not sure if all icons are easy to understand, also the icons will be centered in that case I think.

[codecov]

Codecov Report

Merging #291 (e9d3fe2) into main (c5b5e64) will increase coverage by 2.12%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #291      +/-   ##
==========================================
+ Coverage   68.28%   70.40%   +2.12%     
==========================================
  Files         240      239       -1     
  Lines       10172     9948     -224     
==========================================
+ Hits         6946     7004      +58     
+ Misses       3226     2944     -282     

Impacted Files	Coverage Δ
...ile/toolbar_items/heading_mobile_toolbar_item.dart	100.00% <100.00%> (ø)

... and 32 files with indirect coverage changes