Flutter UIKit AppStyleConfig

Overview#

AppStyleConfig is a centralized configuration class that defines styles for various UI components used throughout the app. It includes predefined styles for buttons, pages, dialogs, and other elements, which can be applied or overridden based on the app's design requirements.

Adding the AppStyleConfig Class to Your Project#

Ensure that the AppStyleConfig class is included in your project and import it as needed:

import 'package:mirrorfly_uikit_plugin/app/stylesheet/stylesheet.dart';
import 'package:mirrorfly_uikit_plugin/mirrorfly_uikit.dart';

Customization#

You can also customize the default styles by calling the setAppStyle method and passing in your own styles:

AppStyleConfig.setAppStyle(
appStyle: AppStyle(
chatPageStyle: ChatPageStyle(
senderChatBubbleStyle: SenderChatBubbleStyle(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10)),
color: Color(0xffE2E8F7),
border: Border.fromBorderSide(
BorderSide(color: Color(0xffe2eafc)))
),
),
//Add More Styles
),
),
);

Setting the App Style#

To configure the app with a custom style, you can call the setAppStyle method and pass an AppStyle object.

AppStyleConfig.setAppStyle(appStyle: AppStyle(chatPageStyle: ChatPageStyle()));

AppStyle contains various style properties that you can override with your custom styles or use the default styles provided by the app.

Customizing Individual Styles#

If you want to change specific styles (e.g., the sender chat bubble's decoration), you can modify them individually without affecting other styles:

AppStyleConfig.setChatPageStyle(
ChatPageStyle(
senderChatBubbleStyle: SenderChatBubbleStyle(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10)),
color: Color(0xffE2E8F7),
border: Border.fromBorderSide(
BorderSide(color: Color(0xffe2eafc)))
),
),
),
);

This example demonstrates how to apply a custom button style to the login page. If a style is not provided, the default style will be used.

Page Style Configurations#

AppStyleConfig also provides various page-specific styles, which can be configured globally in your project. Here are some examples:

  • Dashboard Page Style:

    DashBoardPageStyle dashBoardPageStyle = AppStyleConfig.dashBoardPageStyle;

  • Chat Page Style:

    ChatPageStyle chatPageStyle = AppStyleConfig.chatPageStyle;

These predefined page styles allow you to quickly apply consistent theming to various pages in your app.

Dialog Configurations#

AppStyleConfig also provides style for Dialogs, which can be configured globally in your project. Here are some examples:

AppStyleConfig.setDialogStyle(DialogStyle(backgroundColor: Colors.white,));

These predefined Dialog styles allow you to quickly apply consistent theming to various dialogs in your app.

Accessing Styles#

Once the styles are configured, you can access the styles globally throughout your application:

SenderChatBubbleStyle senderChatBubbleStyle = AppStyleConfig.chatPageStyle.senderChatBubbleStyle;

You can use this approach for all the predefined style properties.

Available Styles#

Below are the styles available for customization:

List of Setter Methods:#

  • setProfileViewStyle(ProfileViewStyle profileViewStyle)

  • setDashboardStyle(DashBoardPageStyle dashBoardPageStyle)

  • setChatPageStyle(ChatPageStyle chatPageStyle)

  • setMessageInfoPageStyle(MessageInfoPageStyle messageInfoPageStyle)

  • setChatInfoPageStyle(ChatInfoPageStyle chatInfoPageStyle)

  • setViewAllMediaPageStyle(ViewAllMediaPageStyle viewAllMediaPageStyle)

  • setGroupChatInfoPageStyle(GroupChatInfoPageStyle groupChatInfoPageStyle)

  • setContactListPageStyle(ContactListPageStyle contactListPageStyle)

  • setArchivedChatsPageStyle(ArchivedChatsPageStyle archivedChatsPageStyle)

  • setCreateGroupPageStyle(CreateGroupPageStyle createGroupPageStyle)

  • setGalleryPageStyle(GalleryPageStyle galleryPageStyle)

  • setLocalContactPageStyle(LocalContactPageStyle localContactPageStyle)

  • setLocalContactPreviewPageStyle(LocalContactPreviewPageStyle localContactPreviewPageStyle)

  • setLocationSentPageStyle(LocationSentPageStyle locationSentPageStyle)

  • setMediaSentPreviewPageStyle(MediaSentPreviewPageStyle mediaSentPreviewPageStyle)

  • setSettingsPageStyle(SettingsPageStyle settingsPageStyle)

  • setBlockedListPageStyle(BlockedListPageStyle blockedListPageStyle)

  • setStarredMessageListPageStyle(StarredMessageListPageStyle starredMessageListPageStyle)

  • setDialogStyle(DialogStyle dialogStyle)

  • setOutgoingCallPageStyle(OutgoingCallPageStyle outgoingCallPageStyle)

  • setCallAgainPageStyle(CallAgainPageStyle callAgainPageStyle)

  • setOngoingCallPageStyle(OngoingCallPageStyle ongoingCallPageStyle)

  • setCallInfoPageStyle(CallInfoPageStyle callInfoPageStyle)

  • setAddParticipantsPageStyle(AddParticipantsPageStyle addParticipantsPageStyle)

  • setJoinCallPreviewPageStyle(JoinCallPreviewPageStyle joinCallPreviewPageStyle)

This documentation provides a quick reference for integrating and customizing styles using AppStyleConfig in your project.