LMFeedFloatingActionButton

LMFeedFloatingActionButton is a customizable widget designed for displaying a floating action button within the Flutter UI library. It supports both collapsed and expanded states, allowing for the display of text alongside the button icon in the expanded state.

The LMFeedFloatingActionButton widget provides a flexible and configurable floating action button that can be used in various parts of your application. It allows you to customize the appearance and behavior of the button, including its background color, icon, and animation properties.

Properties

• isCollapsed (bool)

A boolean value that determines whether the floating action button should be displayed in a collapsed or expanded state. When collapsed, only the icon is shown. When expanded, both the icon and text are displayed.

• text (String)

An optional string representing the text to be displayed alongside the button icon in the expanded state.

• onTap (VoidCallback)

An optional callback function that is invoked when the floating action button is tapped.

Styling

The LMFeedFloatingActionButtonStyle class provides a way to define the visual style and behavior of the floating action button. It includes properties for background color, icon, collapsed and expanded dimensions, text visibility, and animation properties.

Customization variables

Property	Type	Description	Required	Default
backgroundColor	Color	Background color of the floating action button
collapsedHeight	double	Height of the button in the collapsed state
collapsedWidth	double	Width of the button in the collapsed state
expandedHeight	double	Height of the button in the expanded state
expandedWidth	double	Width of the button in the expanded state
icon	LMFeedIcon	Icon to be displayed in the floating action button
showTextOnCollapsed	bool	Whether to show text when the button is in the collapsed state
showTextOnExpanded	bool	Whether to show text when the button is in the expanded state
animationDuration	Duration	Duration of the animation when transitioning between states
animationCurve	Curve	Curve to be used for the animation when transitioning

Usage Example

LMFeedFloatingActionButton(
  isCollapsed: false,
  text: 'Create Post',
  onTap: () {
    // Handle button tap
  },
  style: LMFeedFloatingActionButtonStyle(
    backgroundColor: Colors.blue,
    icon: LMFeedIcon(
      type: LMFeedIconType.icon,
      icon: Icons.edit,
      style: LMFeedIconStyle(
        color: Colors.white,
      ),
    ),
    expandedHeight: 48,
    expandedWidth: 200,
    showTextOnExpanded: true,
  ),
),

This example creates an expanded LMFeedFloatingActionButton with the text "Create Post" and an edit icon. The button is styled with a blue background color, and the icon is displayed in white. The expanded height and width are set to 48 and 200, respectively, and the text is shown in the expanded state. When tapped, it triggers the onTap callback function, allowing you to handle the button's action.