How to show Comment List as bottom sheet

Introduction

In this guide, you'll learn how to show comment list as bottom sheet using LMFeedCommentList Widget.

Prerequisites

Before you begin, ensure the following:

• LikeMinds Feed Flutter SDK: The SDK must be properly installed and initialized in your Flutter project. Refer to the installation guide if needed.
• Feed Enabled: Ensure that Feed is enabled on the dashboard for your project.
• Basic Understanding of Flutter Widgets: Familiarity with Flutter widgets and layout concepts.
• Knowledge of Builder Pattern: Understanding of the builder pattern in Dart, as it is used to customize and create widgets dynamically.
• Familiarity with copyWith Method: Knowledge of the copyWith method, which allows you to create modified copies of objects while retaining their original properties.

Steps

Step 1 : Customize Post Widget

Create an instance of LMFeedScreen, provide a postBuilder to customize the post widget onPostTap method to show bottom sheet. Here’s how you can achieve this:

// crate an instance of LMFeedScreen
final LMFeedScreen feedScreen = LMFeedScreen(
  // postBuilder to override onPostTap callback
  postBuilder: (context, postWidget, postData) => postWidget.copyWith(
    // override onPostTap callback and show bottom sheet
    onPostTap: (context, postData) {
      // use flutter's `showBottomSheet()` method to show a bottom sheet
      showBottomSheet(
        context: context,
        builder: (context) {
          // return a custom scroll view to render a scrollable view with comment list
          return CustomScrollView(
            slivers: [
              // use LMFeedCommentList widget to render comment list view
              LMFeedCommentList(postId: postData.id),
              SliverToBoxAdapter(
                // use LMFeedBottomTextField widget to render textfield to enter new comments
                child: LMFeedBottomTextField(
                  postId: postData.id,
                  focusNode: FocusNode(),
                ),
              ),
            ],
          );
        },
      );
    },
  ),
);

Step 2: Navigation to Feed Screen

Navigate to LMFeedScreen using Flutter's Navigator class

// create the route to feed screen
MaterialPageRoute route = MaterialPageRoute(
      builder: (context) => feedScreen,
);

// navigate to the feed screen
Navigator.of(context).push(route);

In this example:

• postBuilder allows you to modify the PostWidget before it's displayed.
• onPostTap allows you to modify the handling of tap above a PostWidget.