Skip to main content

Create Short Video Screen

Introduction​

The Create Short Video Screen (LMFeedCreateShortVideoScreen) provides an interface for users to create and customize short videos. It allows customization of the app bar, video preview, topic selection, and other components through builders and configurations.

1. LMFeedCreateShortVideoScreen Widget​

File Location:
create_short_video_screen.dart

Class Declaration​

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

  @override
  State<LMFeedCreateShortVideoScreen> createState() =>
      _LMFeedCreateShortVideoScreenState();
}

Key Features​

  • A stateful widget responsible for creating short video content.
  • Can be customized using builders and configurations for flexibility.

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

2. LMFeedCreateShortVideoBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedCreateShortVideoBuilderDelegate {
  const LMFeedCreateShortVideoBuilderDelegate();
}

The LMFeedCreateShortVideoBuilderDelegate allows developers to customize various UI components of the Create Short Video Screen.

Methods in LMFeedCreateShortVideoBuilderDelegate​

  1. appBarBuilder

    • Builds the app bar and provides a callback for post creation.
    Widget appBarBuilder(
      BuildContext context,
      LMFeedAppBar appBar,
      VoidCallback onPostCreate,
    )

  2. videoPreviewBuilder

    • Builds the video preview widget.
    Widget videoPreviewBuilder(
      BuildContext context,
      LMFeedVideo videoPreviewWidget,
      LMAttachmentViewData attachmentViewData
    )

  3. videoPreviewContainerBuilder

    • Wraps the video preview widget in a container.
    Widget videoPreviewContainerBuilder(
      BuildContext context,
      Container videoPreviewContainer,
      Widget videoPreviewWidget
    )

  4. selectTopicButtonBuilder

    • Builds the button for selecting a topic.
    Widget selectTopicButtonBuilder(
      BuildContext context,
      LMFeedButton selectTopicButton
    )

  5. editTopicButtonBuilder

    • Builds the button for editing the selected topic.
    Widget editTopicButtonBuilder(
      BuildContext context,
      LMFeedButton editTopicButton
    )

Explore the complete list of methods here.

3. LMFeedCreateShortVideoSettings​

File Location:
settings.dart

Class Declaration​

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

4. LMFeedCreateShortVideoStyle​

File Location:
style.dart

Class Declaration​

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

5. LMFeedCreateShortVideoConfig​

File Location:
config.dart

Class Declaration​

class LMFeedCreateShortVideoConfig {
  final LMFeedCreateShortVideoBuilderDelegate builder;
  final LMFeedCreateShortVideoSettings settings;
  final LMFeedCreateShortVideoStyle style;

  const LMFeedCreateShortVideoConfig({
    this.builder = const LMFeedCreateShortVideoBuilderDelegate(),
    this.settings = const LMFeedCreateShortVideoSettings(),
    this.style = const LMFeedCreateShortVideoStyle(),
  });
}

Usage Example​

1. Create a Custom Builder​

class CustomCreateShortVideoBuilder extends LMFeedCreateShortVideoBuilderDelegate {
  @override
  Widget videoPreviewBuilder(
    BuildContext context,
    LMFeedVideo videoPreviewWidget,
    LMAttachmentViewData attachmentViewData
  ) {
    return Container(
      child: videoPreviewWidget,
    );
  }
}

2. Initialize with Custom Configuration​

final customCreateShortVideoConfig = LMFeedCreateShortVideoConfig(
  builder: CustomCreateShortVideoBuilder(),
);

3. Apply the Updated Configuration​

LMFeedCore.instance.initialize(
  config: LMFeedConfig(
    createShortVideoConfig: customCreateShortVideoConfig,
  ),
);

6. Summary​

The Create Short Video Screen provides a user interface for recording and customizing short video content. Developers can customize components like the app bar, video preview, and topic selection using the LMFeedCreateShortVideoBuilderDelegate. Configuration options are encapsulated in LMFeedCreateShortVideoConfig, enabling seamless integration and customization tailored to specific design and functional requirements.