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.

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.

• 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

Property	Type	Description	Required	Default
backgroundColor	Color	The background color of the topic chip.		Colors.transparent
borderColor	Color	The color of the topic chip's border.
borderRadius	BorderRadius	The border radius of the topic chip.		BorderRadius.circular(5.0)
borderWidth	double	The width of the topic chip's border. Requires showBorder to be true.		1.0
showBorder	bool	Whether to show a border around the topic chip.		false
textStyle	TextStyle	The text style of the topic chip.
icon	Widget	The icon to be displayed in the topic chip.
padding	EdgeInsets	The padding of the topic chip.		EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0)
iconPlacement	LMFeedIconButtonPlacement	The placement of the icon in the topic chip (start or end).		LMFeedIconButtonPlacement.end
height	double	The height of the topic chip.
margin	EdgeInsets	The margin around the topic chip.		EdgeInsets.only(right: 8.0)
gripChip	bool	Whether 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.