Skip to main content

Activity Screen

Introduction​

The Activity Screen (LMFeedActivityScreen) serves as the main interface for displaying a user's activity feed. It supports customizations for the post, comment, and app bar components through builders, styles, and configurations.

1. LMFeedActivityScreen Widget​

File Location:
activity_screen.dart

Class Declaration​

class LMFeedActivityScreen extends StatefulWidget {
  /// uuid of the user whose activity feed is to be displayed.
  final String uuid;

  /// Builder for the post widget.
  final LMFeedPostWidgetBuilder? postBuilder;

  /// Builder for the comment widget.
  final LMFeedPostCommentBuilder? commentBuilder;

  /// Builder for app bar.
  final LMFeedAppBarBuilder? appBarBuilder;

  /// A screen that displays the activity feed.
  const LMFeedActivityScreen({
    super.key,
    required this.uuid,
    this.postBuilder,
    this.commentBuilder,
    this.appBarBuilder,
  });

  @override
  State<LMFeedActivityScreen> createState() => _LMFeedActivityScreenState();
}

Key Parameters​

  1. uuid (String, required): UUID of the user whose activity feed is to be displayed.
  2. postBuilder (LMFeedPostWidgetBuilder?, optional): Builder for the post widget.
  3. commentBuilder (LMFeedPostCommentBuilder?, optional): Builder for the comment widget.
  4. appBarBuilder (LMFeedAppBarBuilder?, optional): Builder for the app bar.

For the complete source code, refer to the GitHub link.

2. LMFeedActivityBuilderDelegate​

File Location:
configurations/builder.dart

Class Declaration​

class LMFeedActivityBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedActivityBuilderDelegate();
}

The LMFeedActivityBuilderDelegate allows developers to customize the post, comment, and app bar widgets specifically for the activity screen.

Methods in LMFeedActivityBuilderDelegate​

  1. postWidgetBuilder
    Definition: Builds the widget for posts in the activity feed.
    Purpose: Customizes the style and layout of posts.

    Usage Example:

    @override
    Widget postWidgetBuilder(
       BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
       {LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
      // Return a post widget with background color changed to blue
      return postWidget.copyWith(
       style: postWidget.style?.copyWith(
         backgroundColor: Colors.blue,
       ),
     );
    }

  2. commentBuilder
    Definition: Builds the widget for comments in the activity feed.
    Purpose: Customizes the appearance and behavior of comments.

    Usage Example:

    @override
    Widget commentBuilder(BuildContext context, LMFeedCommentWidget commentWidget,
       LMPostViewData postViewData) {
      // Return a comment widget with background color changed to blue
      return commentWidget.copyWith(
           style: commentWidget.style?.copyWith(
             backgroundColor: Colors.blue,
           ),
         );
    }

  3. appBarBuilder
    Definition: Builds the app bar for the activity feed.
    Purpose: Provides a way to customize the app bar.

    Usage Example:

    @override
    PreferredSizeWidget appBarBuilder(BuildContext context, LMFeedAppBar appBar) {
     // return an app bar with background color blue
     return appBar.copyWith(
       style: appBar.style?.copyWith(
         backgroundColor: Colors.blue,
       ),
     );
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedActivitySetting​

File Location:
configurations/settings.dart

class LMFeedActivitySetting {
  const LMFeedActivitySetting();
}
  • Purpose: Provides configuration settings for the Activity Screen. No additional fields or methods are currently defined.

4. LMFeedActivityStyle​

File Location:
configurations/style.dart

class LMFeedActivityStyle {
  const LMFeedActivityStyle();
}
  • Purpose: Defines styling options for the Activity Screen. No fields or methods are currently defined.

5. LMFeedActivityConfig​

File Location:
configurations/config.dart

Class Declaration​

class LMFeedActivityConfig {
  final LMFeedActivityBuilderDelegate builder;
  final LMFeedActivitySetting setting;
  final LMFeedActivityStyle style;

  const LMFeedActivityConfig({
    this.builder = const LMFeedActivityBuilderDelegate(),
    this.setting = const LMFeedActivitySetting(),
    this.style = const LMFeedActivityStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomActivityBuilder extends LMFeedActivityBuilderDelegate {
     @override
     Widget postWidgetBuilder(
       BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
       {LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
        return Text('Custom Post Widget');
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedActivityStyle();
    final customSetting = LMFeedActivitySetting();

  3. Inject the Custom Builder, Style, or Setting into the Config:

    final activityConfig = LMFeedActivityConfig(
      builder: CustomActivityBuilder(),
      setting: customSetting(),
      style: customStyle(),
    );

  4. Initialize with Custom Config:

    LMFeedCore.instance.initialize(
      config: LMFeedConfig(
        activityConfig: activityConfig,
      ),
    );

6. Summary​

The Activity Screen provides a user interface for displaying activity feeds. Developers can customize components like posts, comments, and app bars using the LMFeedActivityBuilderDelegate. Configuration options are encapsulated in LMFeedActivityConfig, which allows for seamless integration of customizations tailored to specific design and functional requirements.