Skip to main content

Video Feed Screen

Introduction​

The Video Feed Screen (LMFeedVideoFeedScreen) provides an interface for browsing and interacting with video-based feeds. It allows customization of the app bar, video posts, and other components through builders and configurations.

1. LMFeedVideoFeedScreen Widget​

File Location:
video_feed_screen.dart

Class Declaration​

class LMFeedVideoFeedScreen extends StatefulWidget {
  const LMFeedVideoFeedScreen({super.key});

  @override
  State<LMFeedVideoFeedScreen> createState() => _LMFeedVideoFeedScreenState();
}

Key Features​

  • A stateful widget responsible for displaying a video-based feed.
  • Can be customized using builders and configurations for flexibility.

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

2. LMFeedVideoFeedScreenBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedVideoFeedScreenBuilderDelegate {
  const LMFeedVideoFeedScreenBuilderDelegate();
}

The LMFeedVideoFeedScreenBuilderDelegate allows developers to customize various UI components of the video feed screen.

Methods in LMFeedVideoFeedScreenBuilderDelegate​

  1. appBarBuilder

    • Builds the app bar for the Video Feed Screen, allowing custom styles and actions. 
    Widget appBarBuilder(BuildContext context, LMFeedAppBar appBar)

  2. titleTextBuilder

    • Customizes the title text widget inside the app bar or screen. 
    Widget titleTextBuilder(BuildContext context, LMFeedText text)

  3. createPostButtonBuilder

    • Defines the UI for the "Create Post" button, allowing customization. 
    Widget createPostButtonBuilder(BuildContext context, LMFeedButton button)

  4. postViewBuilder

    • Builds the layout for displaying video posts in the feed. 
    Widget postViewBuilder(
      BuildContext context,
      LMFeedVerticalVideoPost postWidget, 
      LMPostViewData postViewData
    )

  5. noItemIndicatorBuilder

    • Provides a custom UI when there are no video posts available. 
    Widget noItemIndicatorBuilder(BuildContext context, Widget child)

  6. uploadingPostLoaderBuilder

    • Defines the UI for showing a loader when a video post is uploading. 
    Widget uploadingPostLoaderBuilder(BuildContext context, LMFeedLoader loader)

  7. uploadingPostRetryButtonBuilder

    • Builds a retry button to allow users to re-upload a failed video post. 
    Widget uploadingPostRetryButtonBuilder(BuildContext context, LMFeedButton button)

Explore the complete list of methods here.

3. LMFeedVideoFeedSettings​

File Location:
settings.dart

Class Declaration​

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

4. LMFeedVideoFeedStyle​

File Location:
styles.dart

Class Declaration​

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

5. LMFeedVideoFeedConfig​

File Location:
config.dart

Class Declaration​

class LMFeedVideoFeedConfig {
  final LMFeedVideoFeedScreenBuilderDelegate builder;
  final LMFeedVideoFeedSettings settings;
  final LMFeedVideoFeedStyle style;

  const LMFeedVideoFeedConfig({
    this.builder = const LMFeedVideoFeedScreenBuilderDelegate(),
    this.settings = const LMFeedVideoFeedSettings(),
    this.style = const LMFeedVideoFeedStyle(),
  });
}

Usage Example​

1. Create a Custom Builder​

class CustomVideoFeedBuilder extends LMFeedVideoFeedScreenBuilderDelegate {
  @override
  Widget postViewBuilder(
    BuildContext context,
    LMFeedVerticalVideoPost postWidget, 
    LMPostViewData postViewData
  ) {
    return Column(
      children: [
        Text(postViewData.title),
        postWidget,
      ],
    );
  }
}

2. Initialize with Custom Configuration​

final customVideoFeedConfig = LMFeedVideoFeedConfig(
  builder: CustomVideoFeedBuilder(),
);

3. Apply the Updated Configuration​

LMFeedCore.instance.initialize(
  config: LMFeedConfig(
    videoFeedConfig: customVideoFeedConfig,
  ),
);

6. Summary​

The Video Feed Screen provides a user interface for interacting with video-based content. Developers can customize components like app bars, video posts, and upload UI using the LMFeedVideoFeedScreenBuilderDelegate. Configuration options are encapsulated in LMFeedVideoFeedConfig, enabling seamless integration and customization tailored to specific design and functional requirements.