LMFeedButton

LMFeedButton is a customizable widget designed for displaying buttons within the Flutter UI library. It provides various styling options and supports both active and inactive states. The button can display text, icons, or a combination of both, and offers flexibility in their placement and appearance.

The LMFeedButton widget allows developers to create buttons with a consistent look and feel throughout their application. It supports different types of buttons, such as like, comment, share, save, and repost buttons, with predefined styles. Additionally, developers can customize the appearance and behavior of the button to suit their needs.

Properties

• isActive (bool)

A required parameter that determines whether the button is in an active or inactive state.

• style (LMFeedButtonStyle)

An optional style class that allows customization of the button's appearance, such as padding, background color, border, height, width, icon placement, and more.

• text (LMFeedText)

An optional LMFeedText widget that represents the text to be displayed in the button.

• onTap (Function())

A required callback function that is invoked when the button is tapped.

• activeText (LMFeedText)

An optional LMFeedText widget that represents the text to be displayed in the button when it is in the active state.

• onTextTap (VoidCallback)

An optional callback function that is invoked when the text in the button is tapped.

Styling

The LMFeedButtonStyle class provides a way to define the visual style of the button. It includes properties for padding, background color, border, border radius, height, width, icon placement, alignment, margin, and more.

Customization variables

Property	Type	Description	Required	Default
padding	EdgeInsets	Padding of the button		EdgeInsets.all(4)
backgroundColor	Color	Background color of the button		Colors.transparent
border	Border	Border of the button
borderRadius	double	Border radius of the button container		8.0
height	double	Height of the button		28.0
width	double	Width of the button
placement	LMFeedIconButtonPlacement	Placement of the icon in the button		LMFeedIconButtonPlacement.start
mainAxisAlignment	MainAxisAlignment	Main axis alignment for button's icon and text
margin	double	Margin between the text and icon		4.0
showText	bool	Whether to show text in the button		true
icon	LMFeedIcon	Icon to be displayed in the button
activeIcon	LMFeedIcon	Icon to be displayed in the active button state
textPadding	EdgeInsets	Padding for the text in the button		EdgeInsets.zero

Usage Example

LMFeedButton(
  isActive: true,
  text: LMFeedText(
    text: 'Like',
    style: LMFeedTextStyle(
      textStyle: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  activeText: LMFeedText(
    text: 'Liked',
    style: LMFeedTextStyle(
      textStyle: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  style: LMFeedButtonStyle(
    icon: LMFeedIcon(
      type: LMFeedIconType.icon,
      icon: Icons.favorite,
      style: LMFeedIconStyle(
        color: Colors.red,
      ),
    ),
    activeIcon: LMFeedIcon(
      type: LMFeedIconType.icon,
      icon: Icons.favorite,
      style: LMFeedIconStyle(
        color: Colors.red,
      ),
    ),
  ),
  onTap: () {
    // Handle button tap
  },
),

This example creates an active LMFeedButton with a "Like" text and a heart icon. The button is styled with a red color for both the text and the icon. When tapped, it triggers the onTap callback function, allowing you to handle the button's action.