Skip to main content

Compose Screen

Introduction​

The Compose Screen (LMFeedComposeScreen) serves as the interface for creating new feed posts. It supports various content types like text, media, and topics, and offers customization points for adapting the UI and behavior to specific requirements.

1. LMFeedComposeScreen Widget​

File Location:
compose_screen.dart

Class Declaration​

class LMFeedComposeScreen extends StatefulWidget {
  /// A screen widget that facilitates the creation of a new feed post.
  const LMFeedComposeScreen({
    super.key,
    // Widget builder functions for customizations
    this.composeDiscardDialogBuilder,
    this.composeAppBarBuilder,
    this.composeContentBuilder,
    this.composeTopicSelectorBuilder,
    this.composeMediaPreviewBuilder,
    this.composeUserHeaderBuilder,
    // Config for the screen
    this.config,
    this.style,
    this.attachments,
    this.displayName,
    this.displayUrl,
    this.feedroomId,
    this.widgetSource,
  });

  @override
  State<LMFeedComposeScreen> createState() => _LMFeedComposeScreenState();
}

Key Parameters​

  1. key (Key?, optional): A key to uniquely identify the widget.
  2. composeDiscardDialogBuilder (Function(BuildContext context)?, optional): Custom builder for the discard dialog.
  3. composeAppBarBuilder (PreferredSizeWidget Function(LMFeedAppBar oldAppBar, LMResponse<void> Function() onPostCreate, LMResponse<void> Function() validatePost, LMFeedButton createPostButton, LMFeedButton cancelButton, void Function(String) onValidationFailed)?, optional): Custom builder for the app bar.
  4. composeContentBuilder (Widget Function()?, optional): Custom builder for the content.
  5. composeTopicSelectorBuilder (Widget Function(BuildContext context, Widget topicSelector, List<LMTopicViewData>)?, optional): Custom builder for the topic selector.

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

2. LMFeedComposeBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedComposeBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedComposeBuilderDelegate();
}

The LMFeedComposeBuilderDelegate allows developers to customize various aspects of the compose screen, such as dialogs, input fields, and post content layout.

Methods in LMFeedComposeBuilderDelegate​

  1. composeDiscardDialogBuilder
    Definition: Builds the dialog widget displayed when users discard the compose screen.
    Purpose: Allows customization of the discard dialog.

    Usage Example:

    @override
    Widget composeDiscardDialogBuilder(BuildContext context) {
      return AlertDialog(
        title: Text('Discard Changes?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: Text('Yes'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: Text('No'),
          ),
        ],
      );
    }

  2. mediaPickerBuilder
    Definition: Builds the widget for selecting media to include in the post.
    Purpose: Customizes the media picker UI and functionality.

    Usage Example:

    @override
    Widget mediaPickerBuilder(BuildContext context) {
      return CustomMediaPicker();
    }

  3. submitButtonBuilder
    Definition: Builds the submit button for the compose screen.
    Purpose: Customizes the appearance and functionality of the submit button.

    Usage Example:

    @override
    Widget submitButtonBuilder(BuildContext context) {
      return ElevatedButton(
        onPressed: () => submitPost(),
        child: Text('Post'),
      );
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedComposeSetting​

File Location:
settings.dart

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

4. LMFeedComposeStyle​

File Location:
style.dart

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

5. LMFeedComposeConfig​

File Location:
config.dart

Class Declaration​

class LMFeedComposeConfig {
  final LMFeedComposeBuilderDelegate builder;
  final LMFeedComposeSetting setting;
  final LMFeedComposeStyle style;

  const LMFeedComposeConfig({
    this.builder = const LMFeedComposeBuilderDelegate(),
    this.setting = const LMFeedComposeSetting(),
    this.style = const LMFeedComposeStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomComposeBuilder extends LMFeedComposeBuilderDelegate {
      @override
      Widget submitButtonBuilder(BuildContext context) {
        return ElevatedButton(
          onPressed: () => submitPost(),
          child: Text('Custom Post'),
        );
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedComposeStyle();
    final customSetting = LMFeedComposeSetting();

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

    final composeConfig = LMFeedComposeConfig(
      builder: CustomComposeBuilder(),
      setting: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Compose Screen provides a user interface for creating new feed posts. Developers can customize components like dialogs, media pickers, and submit buttons using the LMFeedComposeBuilderDelegate. Configuration options are encapsulated in LMFeedComposeConfig, allowing seamless integration of customizations tailored to specific design and functional requirements.