LMFeedTopicFeedGrid

LMFeedTopicFeedGrid is a widget that displays a grid of selected topics in a feed. It allows users to see the currently selected topics and interact with them. The widget can be customized by passing in the required parameters.

The LMFeedTopicFeedGrid widget is part of the likeminds_feed_flutter_ui package. It is designed to be used within a feed to display a grid of selected topics and provide user interaction.

Properties

• selectedTopics (List<LMTopicViewData>) - Required

A list of selected topics to be displayed in the grid. If no topic is selected, pass an empty list. This is a required parameter.

• textColor (Color) - Required

The text color of the topic chips in the grid. This is a required parameter.

• onTap (Function) - Required

The action to perform when the topic feed bar is tapped. This is a required parameter.

• height (double) - Required

The height of the chips in the topic feed bar. This is a required parameter.

• backgroundColor (Color)

The background color of the topic chips. Defaults to transparent if not provided. This is an optional parameter.

• borderColor (Color)

The border color of the topic chips. Defaults to transparent if not provided. This is an optional parameter.

• borderRadius (double)

The border radius of the topic chips. Defaults to 5.0 if not provided. This is an optional parameter.

• borderWidth (double)

The border width of the topic chips. This is an optional parameter.

• showBorder (bool)

Whether to show a border around the topic chips. Defaults to false if not provided. This is an optional parameter.

• textStyle (TextStyle)

The text style of the topic chips. This is an optional parameter.

• icon (Icon)

The icon to be displayed on the topic chips, if any. Defaults to null if not provided. This is an optional parameter.

• onIconTap (Function(LMTopicViewData))

The action to perform when the icon on a topic chip is tapped. It takes the LMTopicViewData as a parameter. This is an optional parameter.

• trailingIcon (Widget)

A trailing icon widget to be displayed at the end of the topic grid. This is an optional parameter.

• onTrailingIconTap (Function)

The action to perform when the trailing icon is tapped. This is an optional parameter.

• chipPadding (EdgeInsets)

The padding of the topic chips. This is an optional parameter.

• showDivider (bool)

Whether to show a divider below the topic feed bar. Defaults to true if not provided. This is an optional parameter.

• emptyTopicChip (Widget)

A placeholder chip to be displayed if no topic is selected. This is an optional parameter.

• iconPlacement (LMFeedIconButtonPlacement)

The placement of the icon on the topic chips. It can be either LMFeedIconButtonPlacement.start (before the text) or LMFeedIconButtonPlacement.end (after the text). Defaults to LMFeedIconButtonPlacement.end if not provided. This is an optional parameter.

Usage Example

LMFeedTopicFeedGrid(
  selectedTopics: [
    LMTopicViewData(id: 'topic1', name: 'Technology'),
    LMTopicViewData(id: 'topic2', name: 'Sports'),
    LMTopicViewData(id: 'topic3', name: 'Entertainment'),
  ],
  textColor: Colors.black,
  onTap: () {
    // Handle topic feed bar tap
    print('Topic feed bar tapped');
  },
  height: 40,
  backgroundColor: Colors.grey[200],
  borderColor: Colors.grey,
  borderRadius: 8,
  borderWidth: 1,
  showBorder: true,
  textStyle: TextStyle(
    color: Colors.black,
    fontSize: 14,
    fontWeight: FontWeight.bold,
  ),
  icon: Icon(Icons.close),
  onIconTap: (topic) {
    // Handle topic chip icon tap
    print('Icon tapped for topic: ${topic.name}');
  },
  trailingIcon: Icon(Icons.arrow_forward),
  onTrailingIconTap: () {
    // Handle trailing icon tap
    print('Trailing icon tapped');
  },
  chipPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  showDivider: true,
  emptyTopicChip: Text('No topics selected'),
  iconPlacement: LMFeedIconButtonPlacement.end,
)

In this example, an LMFeedTopicFeedGrid widget is created with a list of selected topics specified using LMTopicViewData. The textColor and onTap properties are required to define the text color of the topic chips and the action to perform when the topic feed bar is tapped.

The height property sets the height of the topic chips, and various optional properties such as backgroundColor, borderColor, borderRadius, borderWidth, showBorder, textStyle, icon, onIconTap, trailingIcon, onTrailingIconTap, chipPadding, showDivider, emptyTopicChip, and iconPlacement are used to customize the appearance and behavior of the topic feed grid.

The onIconTap callback is invoked when the icon on a topic chip is tapped, and it receives the LMTopicViewData as a parameter. The onTrailingIconTap callback is invoked when the trailing icon is tapped.

The emptyTopicChip property specifies a placeholder chip to be displayed if no topics are selected.