Home Screen

Introduction

The Home Screen (LMChatHomeScreen) serves as the main entry point to the chat experience. It provides access to group feeds and direct messages (DM). This screen is customizable through builders and styles to align with specific application needs.

---

1. LMChatHomeScreen Widget

File Location:
home.dart

Class Declaration

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

  @override
  State<LMChatHomeScreen> createState() => _LMChatHomeScreenState();
}

This widget renders the Home Screen and integrates feeds for group and DM messages, using tab-based navigation.

---

2. LMChatHomeBuilderDelegate

File Location:
builder.dart

Class Declaration

class LMChatHomeBuilderDelegate {
  const LMChatHomeBuilderDelegate();
}

The LMChatHomeBuilderDelegate provides several methods to customize key components of the Home Screen. Below are three key methods.

Methods in LMChatHomeBuilderDelegate (3 out of X shown)

1. appBarBuilder
   Definition: Builds the app bar for the Home Screen.
   Purpose: Customizes the app bar layout and actions.

   Usage Example:

   @override
   PreferredSizeWidget appBarBuilder(
     BuildContext context, LMChatUserViewData user, 
     TabController? tabController, LMChatAppBar defaultAppBar) {
     return defaultAppBar.copyWith(title: Text('Home'));
   }

2. scaffold
   Definition: Builds the Scaffold widget for the Home Screen.
   Purpose: Customizes the overall screen layout.

   Usage Example:

   @override
   Widget scaffold({
     PreferredSizeWidget? appBar,
     Widget? body,
     Color? backgroundColor,
   }) {
     return Scaffold(
       appBar: appBar,
       body: body,
       backgroundColor: backgroundColor,
     );
   }

3. dmFeedNoItemsFoundIndicatorBuilder
   Definition: Builds the indicator for an empty DM feed.
   Purpose: Customizes the message shown when no items are found in the DM feed.

   Usage Example:

   @override
   Widget dmFeedNoItemsFoundIndicatorBuilder(
     BuildContext context, Widget noItemsFoundWidget) {
     return Center(child: noItemsFoundWidget);
   }

Remaining Methods (X more)

Explore the complete list of methods here.

---

3. LMChatHomeSetting

File Location:
setting.dart

class LMChatHomeSetting {
  const LMChatHomeSetting();
}

• Purpose: Provides configuration settings for the Home Screen. No additional fields or methods are currently defined.

---

4. LMChatHomeStyle

File Location:
style.dart

class LMChatHomeStyle {
  const LMChatHomeStyle({
    this.homeFeedListStyle,
    this.dmFeedListStyle,
  });

  final LMChatHomeFeedListStyle Function(LMChatHomeFeedListStyle)?
      homeFeedListStyle;
  final LMChatDMFeedListStyle Function(LMChatDMFeedListStyle)? 
      dmFeedListStyle;
}

• Fields:
  • homeFeedListStyle: Customizes the style for the home feed list.
  • dmFeedListStyle: Customizes the style for the DM feed list.

---

5. LMChatHomeConfig

File Location:
config.dart

Class Declaration

class LMChatHomeConfig {
  final LMChatHomeBuilderDelegate builder;
  final LMChatHomeSetting setting;
  final LMChatHomeStyle style;

  const LMChatHomeConfig({
    this.builder = const LMChatHomeBuilderDelegate(),
    this.setting = const LMChatHomeSetting(),
    this.style = const LMChatHomeStyle(),
  });
}

Usage Example: Injecting Custom Configuration

1. Create a Custom Builder:

   class CustomHomeBuilder extends LMChatHomeBuilderDelegate {
     @override
     Widget dmFeedNoItemsFoundIndicatorBuilder(
         BuildContext context, Widget noItemsFoundWidget) {
       return Center(child: Text('No DMs yet'));
     }
   }

2. Pass Custom Style or Setting along with Builder:

   final customStyle = LMChatHomeStyle(
     homeFeedListStyle: (oldStyle) => oldStyle.copyWith(
       textStyle: const TextStyle(fontSize: 16),
     ),
   );

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

   final homeConfig = LMChatHomeConfig(
     builder: CustomHomeBuilder(),
     style: customStyle,
   );

4. Initialize with Custom Config:

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

---

6. Summary

The Home Screen provides access to group feeds and DMs with customizable components such as the app bar and empty state indicators. Developers can modify the screen layout using LMChatHomeBuilderDelegate and inject custom styles and settings through LMChatHomeConfig.