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.
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
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.