Skip to main content

Theming

Getting Started with Theming​

The LikeMinds Feed SDK simplifies the process of customizing the appearance of all UI widgets. Much like Flutter framework, it offers a dedicated class for theming.

With LMFeedTheme, you can adjust various aspects of UI widgets by defining attributes through LMFeedThemeData.

Similar to Flutter’s Theme and ThemeData, LikeMinds Feed uses a top-level configuration to apply theming information throughout your application. You can customize the appearance of all UI widgets provided by the LikeMinds Feed SDK by adjusting properties such as background color, primary color, and widget styles through the LMFeedTheme class. To implement your custom theme, create an instance of LMFeedThemeData and pass it when initializing the SDK with LMFeedCore.instance.initialize().

Detailed Overview of LMFeedThemeData​

The LMFeedThemeData class allows you to customize various aspects of the LikeMinds Feed SDK's UI. By defining properties in the LMFeedThemeData class, you can control the appearance of all UI widgets to ensure a consistent theme throughout your application.

Constructor for LMFeedThemeData:

factory LMFeedThemeData.light({
    // Color-related properties
    Color? primaryColor,
    Color? backgroundColor,
    Color? secondaryColor,
    Color? shadowColor,
    Color? disabledColor,
    Color? errorColor,
    Color? inActiveColor,
    Color? tagColor,
    Color? hashTagColor,
    Color? linkColor,
    Color? container,
    Color? onContainer,
    Color? onPrimary,
    Color? textSecondary,
    
    // Style-related properties
    LMFeedPostStyle? postStyle,
    LMFeedPostReviewBannerStyle? reviewBannerStyle,
    LMFeedPostHeaderStyle? headerStyle,
    LMFeedPostTopicStyle? topicStyle,
    LMFeedPostContentStyle? contentStyle,
    LMFeedPostMediaStyle? mediaStyle,
    LMFeedPostFooterStyle? footerStyle,
    LMFeedCommentStyle? commentStyle,
    LMFeedCommentStyle? replyStyle,
    LMFeedButtonStyle? feedButtonStyle,
    LMFeedIconStyle? feedIconStyle,
    LMFeedTextFieldStyle? textFieldStyle,
    LMFeedDialogStyle? dialogStyle,
    LMFeedPopUpMenuStyle? popUpMenuStyle,
    LMFeedComposeScreenStyle? composeScreenStyle,
    LMFeedLoaderStyle? loaderStyle,
    LMFeedBottomSheetStyle? bottomSheetStyle,
    LMFeedSnackBarStyle? snackBarTheme,
});
  • primaryColor: Sets the primary color for the app.
  • backgroundColor: Defines the background color of the app.
  • secondaryColor: Customizes the secondary color used in the theme.
  • shadowColor: Sets the color of shadows used in the UI.
  • disabledColor: Specifies the color for disabled elements.
  • errorColor: Defines the color used for error messages.
  • inActiveColor: Sets the color for inactive elements.
  • tagColor: Customizes the color of tags.
  • hashTagColor: Defines the color for hashtags.
  • linkColor: Sets the color for hyperlinks.
  • container: Sets the background color for containers.
  • onContainer: Defines the text color on containers.
  • onPrimary: Sets the color for text on primary elements.
  • textSecondary: Defines the color for secondary text.
  • postStyle: Customizes the style of post widgets.
  • reviewBannerStyle: Defines the style for review banners.
  • headerStyle: Customizes the style of post headers.
  • topicStyle: Sets the style for topics in posts.
  • contentStyle: Customizes the style of post content.
  • mediaStyle: Defines the style for media elements in posts.
  • footerStyle: Sets the style for post footers.
  • commentStyle: Customizes the style of comments.
  • replyStyle: Defines the style for replies.
  • feedButtonStyle: Sets the style for buttons in the feed.
  • feedIconStyle: Customizes the style of icons in the feed.
  • textFieldStyle: Defines the style for text fields.
  • dialogStyle: Sets the style for dialogs.
  • popUpMenuStyle: Customizes the style of pop-up menus.
  • composeScreenStyle: Defines the style for the compose screen.
  • loaderStyle: Customizes the style of loaders.
  • bottomSheetStyle: Defines the style for bottom sheets.
  • snackBarTheme: Sets the style for snack bars.

Applying Custom Themes in Your Application​

Here’s an example of how to apply custom colors and styles using LMFeedThemeData. In this example, we modify the primary color, background color, and post widget style:

// Create an instance of `LMFeedThemeData` using the `LMFeedThemeData.light()` factory constructor
LMFeedThemeData customThemeData = LMFeedThemeData.light(
  // Set primary color to green
  primaryColor: Colors.green,
  // Set background color to grey
  backgroundColor: Colors.grey,
  // Customize post style with padding, margin, and background color
  postStyle: LMFeedPostStyle.basic().copyWith(
    padding: const EdgeInsets.all(15.0),
    margin: const EdgeInsets.only(top: 5.0),
    backgroundColor: Colors.grey,
  ),
);

// Initialize LikeMindsFeed SDK with the custom theme
void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize LikeMindsFeed SDK
  LMFeedCore.instance.initialize(
    theme: customThemeData,
  );

  runApp(MyApp());
}

In this example, LMFeedThemeData is configured using the theme parameter in the LMFeedCore.instance.initialize() method, applying the custom theme globally.

Changing Fonts​

The LikeMinds Feed SDK uses the font specified in your MaterialApp for all text elements by default. If you want to customize the font across the entire SDK, you can do so by configuring the font family in the ThemeData of your MaterialApp. This approach ensures a consistent look and feel for text elements throughout the LikeMinds Feed UI.

For further guidance on customizing fonts in Flutter, refer to the official Flutter documentation on fonts here.