List Widget

CustomList

CustomList is a flexible list widget designed for displaying task lists, checklists, activity items, or simple bullet/numbered lists in dashboard interfaces.
It supports icons, numbering, disabled states, active styling, and optional badges—making it suitable for both informational and interactive UI scenarios.

Common Use Cases

• Task or to-do lists
• Activity feeds
• Feature or requirement lists
• Priority-based items with badges
• Disabled or read-only lists
• Simple bullet or numbered lists without icons

Constructor

CustomList({
  Key? key,
  required List<Map<String, dynamic>> data,
  IconData? globalIcon,
  bool isNumber = false,
  bool isActiveList = false,
  bool hasBadge = false,
})

CustomList({
  Key? key,
  required List<Map<String, dynamic>> data,
  IconData? globalIcon,
  bool isNumber = false,
  bool isActiveList = false,
  bool hasBadge = false,
})

Parameters

data (required)

A list of map objects representing each list item.

Supported keys per item:

• kText (String, required): Text content of the list item
• kIcon (IconData, optional): Icon displayed before the text
• disabled (bool, optional): Marks the item as disabled
• badgeText (String, optional): Text shown in a badge
• badgeColor (Color, optional): Badge background color

globalIcon

An icon applied to all list items if individual items do not define kIcon.

isNumber

If true, the list is rendered as a numbered list instead of icons or bullets.

isActiveList

If true, applies active/interactive styling (commonly used for selectable or highlighted lists).

hasBadge

If true, enables badge rendering for items that provide badgeText and badgeColor.

Examples

1. Basic Icon List

CustomList(
  data: tasks,
)

CustomList(
  data: tasks,
)

Where tasks contains icons and text:

[
  {
    'kIcon': Icons.copy_all_outlined,
    'kText': 'Send over all the documentation.',
  },
  {
    'kIcon': Icons.insert_drive_file_outlined,
    'kText': 'Send the billing agreement.',
  },
]

[
  {
    'kIcon': Icons.copy_all_outlined,
    'kText': 'Send over all the documentation.',
  },
  {
    'kIcon': Icons.insert_drive_file_outlined,
    'kText': 'Send the billing agreement.',
  },
]

2. Numbered (Bullet) List

CustomList(
  data: bulletNumberTasks,
  isNumber: true,
)

CustomList(
  data: bulletNumberTasks,
  isNumber: true,
)

Suitable for ordered steps or instructions.

3. Disabled Items List

CustomList(
  data: tasksDisabled,
)

CustomList(
  data: tasksDisabled,
)

Items marked with disabled: true appear visually muted and non-interactive.

4. List with Priority Badges

CustomList(
  data: badgeTask,
  hasBadge: true,
)

CustomList(
  data: badgeTask,
  hasBadge: true,
)

Each item may include:

{
  'kText': 'Send the billing agreement',
  'badgeText': 'high',
  'badgeColor': kErrorColor,
}

{
  'kText': 'Send the billing agreement',
  'badgeText': 'high',
  'badgeColor': kErrorColor,
}

This is ideal for task priority, status labels, or categories.

5. Active / Interactive List

CustomList(
  data: tasks,
  isActiveList: true,
)

CustomList(
  data: tasks,
  isActiveList: true,
)

Use this when list items represent selectable or highlighted states.

Best Practices

• Use numbered lists (isNumber = true) for step-by-step instructions.
• Use badges only when semantic meaning is required (priority, status, type).
• Keep list item text concise for better readability.
• Avoid mixing globalIcon and per-item kIcon unless intentional.
• For dynamic data, map backend or service responses into the expected data structure.

Summary

CustomList provides a reusable, data-driven way to render structured lists in FlutKit dashboards.
By combining simple map-based data with optional features like numbering, disabled states, and badges, it adapts easily to a wide range of enterprise UI requirements—without introducing unnecessary complexity.

For more usage patterns, explore the Base UI > Lists section in the FlutKit demo.