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. mediaControlBuilder
    Definition: Builds the widget for media controls in the media preview screen.
    Purpose: Customizes the style and layout of media controls.

    Usage Example:

    @override
    Widget mediaControlBuilder(BuildContext context) {
      // Return a custom widget for displaying media controls
      return IconButton(
        icon: Icon(Icons.play_arrow),
        onPressed: () => playMedia(),
      );
    }

  2. captionBuilder
    Definition: Builds the widget for captions in the media preview screen.
    Purpose: Customizes the appearance and behavior of captions.

    Usage Example:

    @override
    Widget captionBuilder(BuildContext context) {
      // Return a custom widget for displaying captions
      return Text('Custom Caption');
    }

  3. fullscreenToggleBuilder
    Definition: Builds the widget for fullscreen toggles in the media preview screen.
    Purpose: Provides a way to customize the fullscreen toggle.

    Usage Example:

    @override
    Widget fullscreenToggleBuilder(BuildContext context) {
      // Return a custom fullscreen toggle widget
      return IconButton(
        icon: Icon(Icons.fullscreen),
        onPressed: () => toggleFullscreen(),
      );
    }

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 mediaControlBuilder(BuildContext context) {
        return IconButton(
          icon: Icon(Icons.play_arrow),
          onPressed: () => playMedia(),
        );
      }
    }

  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.