Increase clipart size and improve clipart dropdown layout

[mariobehling]

In the Badge Magic Flutter app, the cliparts shown in the dropdown menu are currently too small. Some cliparts are so small that users can hardly distinguish them from one another.

The clipart selection UI should be improved by increasing the displayed clipart size (a) reduce the paddings and b) increase the size of the tile), reducing the number of cliparts per row, and decreasing unnecessary spacing between clipart tiles. The goal is to make cliparts clearly visible and easier to select.

For comparison, cliparts or stickers in apps such as WhatsApp are significantly larger, roughly around three times the current visible size in Badge Magic.

Current behavior

• Cliparts in the dropdown menu are shown very small.
• Several cliparts are difficult to distinguish from each other.
• Too many cliparts are displayed in one row.
• Tile spacing does not help readability and wastes space.
• The selection experience is difficult, especially on small screens.

Expected behavior

Cliparts in the dropdown menu should be large enough to identify easily.

The UI should:

• Increase the visible size of clipart previews.
• Reduce the number of cliparts shown in one row.
• Decrease excessive spacing between clipart tiles.
• Decrease the padding within the tiles.
• Keep the layout compact but readable.
• Make it easy to distinguish and select cliparts.
• Work well on different screen sizes.

Scope

1. Increase clipart preview size

• Increase the rendered clipart size in the dropdown/grid.
• Ensure cliparts are clearly visible without zooming.
• Avoid scaling artifacts or blurriness.
• Keep aspect ratios correct.
• Ensure the selected clipart preview is also clear.

2. Reduce cliparts per row

• Reduce the number of clipart tiles shown in each row.
• Use a responsive grid layout if possible.
• Show fewer columns on small screens.
• Allow more columns only on larger screens where cliparts remain clearly visible.
• Avoid fixed layouts that make cliparts too small on phones.

3. Reduce spacing between tiles

• Review current grid spacing.
• Decrease unnecessary spacing between clipart tiles.
• Keep enough padding so tiles remain tappable.
• Ensure touch targets remain usable.
• Avoid wasting vertical or horizontal space.

4. Improve dropdown usability

• Ensure the clipart dropdown remains scrollable.
• Ensure cliparts are easy to tap.
• Ensure the dropdown does not overflow the screen.
• Ensure the selected clipart is visually indicated.
• Ensure the UI works in portrait and landscape.
• Ensure the UI works on Android, iOS, desktop, and web where applicable.

5. Responsive behavior

• Test on small phone screens.
• Test on larger phone screens.
• Test on tablets.
• Test on desktop/web if supported.
• Adjust tile size and column count based on available width.
• Ensure cliparts remain readable across screen sizes.

Implementation details

• Review the clipart dropdown/grid widget.
• Increase the clipart image/icon size.
• Adjust grid delegate or layout constraints.
• Reduce the column count.
• Reduce tile spacing where excessive.
• Keep minimum touch target sizes for accessibility.
• Use responsive breakpoints or available width calculations if needed.
• Verify that the clipart assets themselves are high enough quality for larger rendering.
• If assets are too low-resolution, identify those assets separately.

Suggested UI direction

Instead of showing many tiny cliparts in one row, use a larger grid.

For example:

• Small phone: 5 cliparts per row
• Large phone: 7 cliparts per row
• Tablet/desktop: more per row if still clearly visible

The exact values should be adjusted after testing, but the main goal is that cliparts are visibly larger and easier to distinguish.

Rationale

Cliparts are visual elements. If they are too small, users cannot reliably tell which one they are selecting. This creates a poor editing experience and makes the app harder to use.

Increasing clipart size and improving the grid layout will make the clipart picker more usable and closer to common expectations from modern messaging and sticker interfaces.

Acceptance criteria

• Cliparts in the dropdown are visibly larger than before.
• Cliparts are easy to distinguish from one another.
• Fewer cliparts are shown per row.
• Excessive spacing between clipart tiles is reduced.
• Clipart tiles remain easy to tap or click.
• The dropdown remains scrollable and does not overflow.
• The selected clipart state remains clear.
• The layout works on small phones, large phones, tablets, and supported desktop/web views.
• Relevant tests or documented manual testing steps are included.

[suryansh00001]

Can I work on this?
@mariobehling
@bhavjsh

[bhavjsh]

Hi @suryansh00001 , thank you for showing your interest but I will be working on it and this requires the hardware to test
Hope you understand :)