Skip to main content

Report Screen

Introduction​

The Report Screen allows users to report chatroom entities for violations, offering a structured interface to select report reasons and provide additional input. Developers can customize the interface using builder delegates, settings, and style configurations.

1. LMChatReportScreen Widget​

File Location:
report.dart

Class Declaration​

class LMChatReportScreen extends StatefulWidget {
  final String entityId;

  const LMChatReportScreen({
    Key? key,
    required this.entityId,
  }) : super(key: key);

  @override
  State<LMChatReportScreen> createState() => _LMChatReportScreenState();
}

This widget serves as the main entry point for reporting entities, such as users or messages. It captures user input, including report reasons and additional text, and submits the report.

2. LMChatReportBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMChatReportBuilderDelegate {
  const LMChatReportBuilderDelegate();
}

This delegate provides methods to customize the layout and behavior of the report screen.

Methods in LMChatReportBuilderDelegate (3 out of X shown)​

  1. otherReasonTextFieldBuilder
    Definition: Builds a text field for additional input when the user selects 'Other' as the report reason.
    Purpose: Allows users to specify a reason not covered by the default options.

    Usage Example:

    @override
    Widget otherReasonTextFieldBuilder(
      BuildContext context,
      TextEditingController textEditingController,
      Widget otherReasonTextField,
    ) {
      return otherReasonTextField;
    }

  2. submitButtonBuilder
    Definition: Builds the submit button for the report.
    Purpose: Customizes the submit button’s appearance and behavior.

    Usage Example:

    @override
    Widget submitButtonBuilder(
      BuildContext context,
      String entityId,
      int? reportTagId,
      String? reason,
      LMChatButton submitButton,
    ) {
      return submitButton;
    }

  3. reportContentBuilder
    Definition: Builds the main content of the report screen.
    Purpose: Customizes the layout and content of the report page.

    Usage Example:

    @override
    Widget reportContentBuilder(
      BuildContext context, Widget defaultContent) {
      return defaultContent;
    }

Remaining Methods​

Explore the full list of methods here.

3. LMChatReportSetting​

File Location:
setting.dart

class LMChatReportSetting {
  const LMChatReportSetting();
}
  • Purpose: Configures settings related to the reporting process. Currently, no specific fields or methods are defined.

4. LMChatReportStyle​

File Location:
style.dart

class LMChatReportStyle {
  const LMChatReportStyle();
}
  • Purpose: Defines the appearance and styling of the report screen. No additional fields or methods are currently defined.

5. LMChatReportConfig​

File Location:
config.dart

Class Declaration​

class LMChatReportConfig {
  final LMChatReportBuilderDelegate builder;
  final LMChatReportSetting setting;
  final LMChatReportStyle style;

  const LMChatReportConfig({
    this.builder = const LMChatReportBuilderDelegate(),
    this.style = const LMChatReportStyle(),
    this.setting = const LMChatReportSetting(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomReportBuilder extends LMChatReportBuilderDelegate {
      @override
      Widget submitButtonBuilder(
          BuildContext context, String entityId, int? reportTagId,
          String? reason, LMChatButton submitButton) {
        return submitButton.copyWith(
          style: submitButton.style.copyWith(
            backgroundColor: Colors.red,
          ),
        );
      }
    }

  2. Pass Custom Style and Setting along with Builder:

    final customStyle = LMChatReportStyle();
    final customSetting = LMChatReportSetting();

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

    final reportConfig = LMChatReportConfig(
      builder: CustomReportBuilder(),
      style: customStyle,
      setting: customSetting,
    );

  4. Initialize with Custom Config:

    LMChatCore.instance.initialize(
      config: LMChatConfig(
        reportConfig: reportConfig,
      ),
    );

6. Summary​

The Report Screen enables users to report chatroom entities with customized reasons. Developers can use the LMChatReportBuilderDelegate to adjust core components, such as the submit button and input fields. The LMChatReportConfig provides a flexible way to inject custom builders, styles, and settings to align the reporting experience with specific design and functional needs.