Skip to main content

LMFeedTopicChip

LMFeedTopicChip is a widget that represents a topic chip in a feed. It displays the topic name and an optional icon. The icon can be placed before or after the topic name and can be tapped to perform an action. The topic chip can be customized by passing in the required parameters and can be used in a list of chips.


LMFeedTopicChip

The LMFeedTopicChip widget is part of the likeminds_feed_flutter_ui package. It is designed to be used within a feed or topic selection interface to display individual topics as chips.

Properties

  • topic (LMTopicViewData) - Required

The topic data associated with the chip. It consists of an id, topic text, and an isEnabled boolean. This is a required parameter.

  • isSelected (bool) - Required

A boolean value indicating whether the chip is selected or not. This is a required parameter.

  • onTap (Function(BuildContext, LMTopicViewData)?)

The action to perform after tapping on the topic chip

  • onIconTap (Function(LMTopicViewData)?)

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

  • style (LMFeedTopicChipStyle?)

The style configuration for the topic chip. It allows customization of the chip's appearance and behavior. This is an optional parameter.

Styling

The LMFeedTopicChipStyle class allows you to customize the appearance and behavior of the LMFeedTopicChip widget.

Customization Variables

PropertyTypeDescriptionRequiredDefault
backgroundColorColorThe background color of the topic chip.Colors.transparent
borderColorColorThe color of the topic chip's border.
borderRadiusBorderRadiusThe border radius of the topic chip.BorderRadius.circular(5.0)
borderWidthdoubleThe width of the topic chip's border. Requires showBorder to be true.1.0
showBorderboolWhether to show a border around the topic chip.false
textStyleTextStyleThe text style of the topic chip.
iconWidgetThe icon to be displayed in the topic chip.
paddingEdgeInsetsThe padding of the topic chip.EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0)
iconPlacementLMFeedIconButtonPlacementThe placement of the icon in the topic chip (start or end).LMFeedIconButtonPlacement.end
heightdoubleThe height of the topic chip.
marginEdgeInsetsThe margin around the topic chip.EdgeInsets.only(right: 8.0)
gripChipboolWhether to make the topic chip expand to fill available space.false

You can create an instance of LMFeedTopicChipStyle and pass it to the LMFeedTopicChip widget to customize its appearance and behavior.

Usage Example

LMFeedTopicChip(
topic: LMTopicViewData(
id: 'topic1',
name: 'Technology',
isEnabled: true,
),
isSelected: true,
onIconTap: (topic) {
// Handle icon tap
print('Icon tapped for topic: ${topic.name}');
},
style: LMFeedTopicChipStyle(
backgroundColor: Colors.blue[100],
borderColor: Colors.blue,
borderWidth: 1.0,
showBorder: true,
textStyle: TextStyle(
color: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.bold,
),
icon: Icon(Icons.close),
iconPlacement: LMFeedIconButtonPlacement.end,
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
height: 32,
margin: EdgeInsets.only(right: 8),
gripChip: true,
),
)

In this example, an LMFeedTopicChip widget is created with the required topic and isSelected properties. The topic property specifies the topic data associated with the chip. The isSelected property indicates whether the chip is currently selected.

The optional onIconTap callback is provided to handle the action when the icon in the chip is tapped. It receives the LMTopicViewData as a parameter.

The appearance and behavior of the topic chip are customized using the LMFeedTopicChipStyle class. The backgroundColor is set to a light blue color, and the borderColor and borderWidth are used to add a blue border around the chip. The showBorder property is set to true to display the border.

The textStyle property is used to style the topic name text, specifying the color, font size, and font weight. The icon property defines the icon to be displayed in the chip (in this case, a close icon). The iconPlacement property is set to LMFeedIconButtonPlacement.end to position the icon at the end of the chip.

Additional customization options, such as padding, height, margin, and gripChip, are also specified to further customize the appearance and behavior of the topic chip.