Skip to main content

Social Feed Screen

Introduction​

The Social Feed Screen (LMFeedSocialScreen) provides an interface for browsing and interacting with social feeds. It supports multiple feed types (e.g., personalised, universal) and allows customization of the app bar, posts, and other components through builders and configurations.

1. LMFeedSocialScreen Widget​

File Location:
social_feed_screen.dart

Class Declaration​

class LMFeedSocialScreen extends StatefulWidget {
  /// [LMFeedType] for the feed.
  /// It can be [LMFeedType.personalised] or [LMFeedType.universal].
  /// Default is [LMFeedType.universal].
  final LMFeedType feedType;

  /// Builder for customizing the app bar.
  final LMFeedAppBarBuilder? appBar;

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

  /// Builder for the floating action button.
  final LMFeedContextButtonBuilder? floatingActionButtonBuilder;

  /// Settings for feed behavior and appearance.
  final LMFeedSocialSettings? settings;

  /// A screen widget for browsing and interacting with social feeds.
  const LMFeedSocialScreen({
    super.key,
    this.feedType = LMFeedType.universal,
    this.appBar,
    this.postBuilder,
    this.floatingActionButtonBuilder,
    this.settings,
  });

  @override
  State<LMFeedSocialScreen> createState() => _LMFeedSocialScreenState();
}

Key Parameters​

  1. feedType (LMFeedType): Specifies the type of feed (personalised or universal). Defaults to universal.
  2. appBar (LMFeedAppBarBuilder?): Builder for customizing the app bar.
  3. postBuilder (LMFeedPostWidgetBuilder?): Builder for customizing post widgets.
  4. floatingActionButtonBuilder (LMFeedContextButtonBuilder?): Builder for the floating action button.
  5. settings (LMFeedSocialSettings?): Settings for feed behavior and appearance.

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

2. LMFeedSocialBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedSocialBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedSocialBuilderDelegate();
}

The LMFeedSocialBuilderDelegate allows developers to customize the posts, floating action buttons, and loaders specifically for the social feed screen.

Methods in LMFeedSocialBuilderDelegate​

  1. postWidget
    Definition: Builds the widget for posts in the social feed screen.
    Purpose: Customizes the style and layout of posts.

    Usage Example:

    @override
    Widget postWidget(BuildContext context, Post post) {
      // Return a custom widget for displaying posts
      return ListTile(
        title: Text(post.title),
        subtitle: Text('Custom content'),
      );
    }

  2. floatingActionButtonBuilder
    Definition: Builds the floating action button in the social feed screen.
    Purpose: Customizes the appearance and behavior of the floating action button.

    Usage Example:

    @override
    Widget floatingActionButtonBuilder(BuildContext context) {
      // Return a custom floating action button
      return FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      );
    }

  3. loaderWidget
    Definition: Builds the loader widget for the social feed screen.
    Purpose: Provides a way to customize the loader.

    Usage Example:

    @override
    Widget loaderWidget(BuildContext context) {
      // Return a custom loader widget
      return CustomLoader();
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedSocialSettings​

File Location:
settings.dart

Class Declaration​

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

4. LMFeedSocialStyle​

File Location:
styles.dart

Class Declaration​

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

5. LMFeedSocialConfig​

File Location:
config.dart

Class Declaration​

class LMFeedSocialConfig {
  final LMFeedSocialBuilderDelegate builder;
  final LMFeedSocialSettings settings;
  final LMFeedSocialStyle style;

  const LMFeedSocialConfig({
    this.builder = const LMFeedSocialBuilderDelegate(),
    this.settings = const LMFeedSocialSettings(),
    this.style = const LMFeedSocialStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomFeedSocialBuilder extends LMFeedSocialBuilderDelegate {
      @override
      Widget postWidget(BuildContext context, Post post) {
        return ListTile(
          title: Text(post.title),
          subtitle: Text('Custom content'),
        );
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedSocialStyle();
    final customSetting = LMFeedSocialSettings();

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

    final socialConfig = LMFeedSocialConfig(
      builder: CustomFeedSocialBuilder(),
      settings: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Social Feed Screen provides a user interface for interacting with social feeds. Developers can customize components like app bars, posts, and floating action buttons using the LMFeedSocialBuilderDelegate. Configuration options are encapsulated in LMFeedSocialConfig, enabling seamless integration and customization tailored to specific design and functional requirements.