Skip to main content

Media Preview Screen

Introduction​

The Media Preview Screen (LMFeedMediaPreviewScreen) provides an interface for previewing media files such as images and videos. It allows customization of the appearance and functionality for a seamless media viewing experience.

1. LMFeedMediaPreviewScreen Widget​

File Location:
media_preview_screen.dart

Class Declaration​

class LMFeedMediaPreviewScreen extends StatefulWidget {
  /// The list of media items to preview.
  final List<LMAttachmentViewData> postAttachments;

  /// The post data associated with the media.
  final LMPostViewData post;

  /// The user data associated with the media.
  final LMUserViewData user;

  /// The index of the currently selected media item.
  final int? position;

  /// A screen widget that displays a preview of media files like images and videos.
  const LMFeedMediaPreviewScreen({
    Key? key,
    required this.postAttachments,
    required this.post,
    required this.user,
    this.position,
  }) : super(key: key);

  @override
  State<LMFeedMediaPreviewScreen> createState() => _LMFeedMediaPreviewScreenState();
}

Key Parameters​

  1. key (Key?, optional): A key to uniquely identify the widget.
  2. postAttachments (List<LMAttachmentViewData>, required): The list of media items to preview.
  3. post (LMPostViewData, required): The post data associated with the media.
  4. user (LMUserViewData, required): The user data associated with the media.
  5. position (int?, optional): The index of the currently selected media item.

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

2. LMFeedMediaPreviewBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedMediaPreviewBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedMediaPreviewBuilderDelegate();
}

The LMFeedMediaPreviewBuilderDelegate allows developers to customize the media controls, captions, and fullscreen toggles specifically for the media preview screen.

Methods in LMFeedMediaPreviewBuilderDelegate​

  1. postMediaCarouselIndicatorBuilder
    Definition: Builds a carousel indicator widget for post media. Purpose: Customizes the style and layout of media carousel indicator.

    Usage Example:

    @override
    Widget postMediaCarouselIndicatorBuilder(BuildContext context, int currIndex,
       int mediaLength, Widget carouselIndicator) {
     return carouselIndicator.copyWith();
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedMediaPreviewSetting​

File Location:
settings.dart

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

4. LMFeedMediaPreviewStyle​

File Location:
style.dart

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

5. LMFeedMediaPreviewConfig​

File Location:
config.dart

Class Declaration​

class LMFeedMediaPreviewConfig {
  final LMFeedMediaPreviewBuilderDelegate builder;
  final LMFeedMediaPreviewSetting setting;
  final LMFeedMediaPreviewStyle style;

  const LMFeedMediaPreviewConfig({
    this.builder = const LMFeedMediaPreviewBuilderDelegate(),
    this.setting = const LMFeedMediaPreviewSetting(),
    this.style = const LMFeedMediaPreviewStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomMediaPreviewBuilder extends LMFeedMediaPreviewBuilderDelegate {
     @override
     Widget postMediaCarouselIndicatorBuilder(BuildContext context, int currIndex,
         int mediaLength, Widget carouselIndicator) {
       return carouselIndicator.copyWith();
     }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedMediaPreviewStyle();
    final customSetting = LMFeedMediaPreviewSetting();

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

    final mediaPreviewConfig = LMFeedMediaPreviewConfig(
      builder: CustomMediaPreviewBuilder(),
      setting: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Media Preview Screen provides a user interface for previewing media files. Developers can customize components like controls, captions, and fullscreen options using the LMFeedMediaPreviewBuilderDelegate. Configuration options are encapsulated in LMFeedMediaPreviewConfig, enabling seamless integration and customization tailored to specific design and functional requirements.