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