Skip to main content

LMFeedBottomTextField

LMFeedBottomTextField is a widget designed to handle user input for comments or replies within the feed in your Flutter application. It provides customizable components such as profile picture and create button allowing developers to integrate a highly functional text input field at the bottom of a feed or post.


LMFeedBottomTextField

The LMFeedBottomTextField widget supports various customization options through its parameters. It can be tailored to fit different themes and user interfaces, making it a flexible choice for applications involving user-generated content.

Properties​

  • postId (String) - Required

The ID of the post for which the comment is to be added. This is a required parameter.

  • controller (TextEditingController?)

An optional controller for the text field. If not provided, a new controller will be created and used internally.

  • focusNode (FocusNode?)

An optional focus node for the text field. If not provided, a new focus node will be created and used internally.

An optional instance of LMFeedBottomTextFieldStyle to customize the appearance of the text field.

  • inputDecoration (InputDecoration? Function(InputDecoration?)?)

A function to customize the input decoration of the text field.

A builder function for the profile picture. If not provided, a default profile picture will be used.

A builder function for the create button. If not provided, a default create button will be used.

  • bannerBuilder (Widget Function(BuildContext, LMFeedBottomTextFieldBanner)?)

A builder function for the banner shown above the text field, used when editing a comment or a reply. If not provided, a default banner will be used.

  • copyWith (LMFeedBottomTextField)

Creates a new instance of LMFeedBottomTextField with the provided values, while keeping the current values if not overridden.

Styling​

The LMFeedBottomTextFieldStyle class allows you to customize the appearance of the LMFeedBottomTextField.

Customization variables​

PropertyTypeDescriptionRequiredDefault
constraintsBoxConstraintsThe constraints for the text field container
boxDecorationBoxDecorationThe decoration for the text field container
paddingEdgeInsetsThe padding for the text field container
marginEdgeInsetsThe margin for the text field container
showPrefixIconboolWhether to show the prefix icon (profile picture)true
showSuffixIconboolWhether to show the suffix icon (create button)true

You can create an instance of LMFeedBottomTextFieldStyle and pass it to the LMFeedBottomTextField to customize its appearance.

Usage Example​

// create an object of TextEditingController and FocusNode
final TextEditingController _commentController = TextEditingController();
final FocusNode _commentFocusNode = FocusNode();

LMFeedBottomTextField(
  postId: "example-post-id",
  controller: _commentController,
  focusNode: _commentFocusNode,
  style: LMFeedBottomTextFieldStyle.basic(
    containerColor: Colors.white,
  ),
  profilePictureBuilder: (context, profilePicture) => LMFeedProfilePicture(
    // please make sure this link is accessible by the end user.
    imageUrl: "http://example.com/profile.jpg",
    fallbackText: "User",
  ),
  createButtonBuilder: (context, button) => LMFeedButton(
    style: const LMFeedButtonStyle(
      height: 18,
      padding: EdgeInsets.symmetric(horizontal: 12),
    ),
    text: LMFeedText(
      text: "Send",
      style: LMFeedTextStyle(
        textAlign: TextAlign.center,
        textStyle: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 13,
          color: Colors.blue,
        ),
      ),
    ),
    onTap: () {
      // Handle create button tap
    },
  ),
  bannerBuilder: (context, banner) => Container(
    padding: const EdgeInsets.all(8),
    color: Colors.grey[200],
    child: banner,
  ),
);

This example creates an LMFeedBottomTextField with a custom style, profile picture, create button, and banner. It also demonstrates how to handle button taps and customize the text field's appearance and behavior.

Customize Send Action​

You can trigger the send action outside of the LMFeedBottomTextField widget by directly interacting with the LMFeedCommentBloc. This is particularly useful if you want to manage comment submission from outside the LMFeedBottomTextField, such as through a separate button or action.

To handle comment submission, simply add the LMFeedSubmitCommentEvent event to the LMFeedCommentBloc. The event will manage the comment submission process internally.

Here's an example of how to use the send action outside of the TextField widget:

// get instance of Comment Bloc
final LMFeedCommentBloc _commentBloc = LMFeedCommentBloc.instance;
// Trigger comment submission
_commentBloc.add(LMFeedSubmitCommentEvent(
  context: context,
  commentController: _commentController,
  focusNode: _commentFocusNode,
  widgetSource: LMFeedWidgetSource.postDetailScreen, //change this enum according to your screen
  postId: "post_id",
));

This approach will handle all the necessary actions for comment submission, including validating and dispatching the comment to the appropriate destination. It simplifies the process by managing the comment submission logic out of the LMFeedBottomTextField widget, providing a more streamlined experience.