Flutter-based app scene skin switching system and method

Abstract

The application belongs to the application interface visualization technology, and particularly relates to an App scene skin switching system and method based on Flutter, which comprises a skin configuration module, an intelligent color matching module, a channel listening module, a skin loading module, a state management module and a display rendering module; theme colors are automatically extracted from a channel background picture configured according to a back-end interface, and a full-automatic skin customization scheme of intelligently generating component colors (font color, button color, icon color, etc.) based on the theme colors is realized, real-time smooth switching driven by gestures is supported, development and maintenance costs are reduced, and user visual experience, system rendering performance and cross-terminal use consistency are improved.

Description

Technical Field

[0001] This application pertains to application interface visualization technology, specifically involving a Flutter-based App scene skin switching system and method. Background Technology

[0002] With the rapid development of the mobile internet, news apps have become the primary means for users to obtain information, and users' demands for personalized experiences on news apps are increasing. Currently, mainstream news apps typically contain multiple news channels of different types, each corresponding to different content scenarios and user groups. Users' visual experience needs for the app vary significantly across different scenarios.

[0003] In existing technologies, the skin display switching of news apps mainly suffers from the following defects:

[0004] The skin switching is limited to a single dimension, mostly a global uniform skin switch (such as light / dark mode), which cannot achieve contextualized skin customization for different news channels, cannot fit the content attributes of each channel, and results in poor user immersion;

[0005] Existing Flutter-based theme switching solutions for news apps are mostly limited to modifying the global ThemeData, and do not implement channel-level modular encapsulation of skins. Skin resources are highly coupled with business logic, resulting in high development and maintenance costs and compatibility issues when adding new channels or modifying skin styles.

[0006] There are stutters and screen flickering issues during skin switching, especially the asynchronous loading of the network background image and the switching of the theme color. In addition, there is a lack of an effective resource caching mechanism, resulting in poor switching smoothness and affecting the user experience. The existing skin switching is mostly a discrete state jump, which fails to achieve real-time linkage between the user's swipe gesture and the skin transition, and the switching process lacks interactivity and continuity.

[0007] There is a lack of automatic association mechanism between skin attributes (theme color, background image, component color), and most of them are manually configured independently. It is impossible to automatically extract the theme color based on the background image configured on the backend and generate component colors (such as font color, button color, icon color) in a linked manner, resulting in low color matching efficiency and poor consistency.

[0008] The skin color scheme relies entirely on manual presets and cannot automatically extract the main color tone and intelligently generate component color schemes based on the channel background image sent by the backend interface. For example, when the main color tone of the background image is dark, it cannot automatically set the colors of components such as fonts and buttons to light colors to ensure readability. Skin customization is inefficient and it is difficult to ensure the coordination and aesthetics of the color scheme.

[0009] When switching skins, a full reconstruction of all UI components is triggered. The lack of a fine-grained rendering optimization mechanism leads to unnecessary performance overhead, which is particularly evident on low-end devices, resulting in a significant drop in frame rate and memory fluctuations.

[0010] Insufficient cross-platform compatibility results in inconsistent skin display effects on different devices (Android, iOS). Summary of the Invention

[0011] To address the shortcomings of existing technologies, a Flutter-based skin display and switching system is needed. This system should enable intelligent customization of news channel skins based on specific scenarios, real-time gesture-driven switching, high-performance rendering, easy maintenance, and cross-device adaptation, thereby enhancing the user experience of news apps. The technical solution is as follows:

[0012] A Flutter-based App scene skin switching system includes a skin configuration module, an intelligent color matching module, a channel listening module, a skin loading module, a state management module, and a display rendering module;

[0013] The skin configuration module is responsible for defining, encapsulating, and managing skin attributes; it establishes a skin configuration library, obtains channel skin configuration data through a backend interface, and stores the default skin configurations for all channels; the skin configuration library also maintains the preset default theme colors for each channel.

[0014] The intelligent color matching module is responsible for automatically extracting the theme color from the background image configured on the backend, and intelligently generating component color schemes based on the theme color;

[0015] The channel monitoring module is responsible for monitoring users' channel switching operations, obtaining information on currently active channels, capturing the progress of swipe gestures, and triggering the skin switching process.

[0016] The skin loading module is responsible for loading the corresponding background image resources from the backend interface based on the current channel information, triggering the intelligent color matching module to automatically extract the theme color and generate component colors, realizing intelligent preloading and incremental cache updates based on behavior prediction;

[0017] The state management module adopts the Provider state management mechanism, which serves as the core hub for skin state, enabling unified management of skin state and real-time hybrid calculation and distribution driven by gestures;

[0018] The rendering module is responsible for rendering the loaded skin resources to the App interface, enabling the display of scene-based skins.

[0019] Preferably, the skin configuration module is responsible for defining, encapsulating, and managing skin attributes, which is the foundation for realizing scenario-based skins. The specific implementation is as follows:

[0020] Define a skin entity class, which includes a unique skin identifier, corresponding channel ID, skin source identifier (preset / dynamically generated / custom), background image path (configured by the backend interface, supporting local path or network URL), theme color configuration (automatically extracted by the system from the background image, built based on Flutter's ColorScheme, supporting Material3 design specifications), component color configuration (automatically generated by the system based on the theme color brightness, including font color, button color, icon color, etc.), etc., to ensure the completeness and standardization of skin attributes;

[0021] A modular encapsulation approach is adopted, creating an independent skin module for each news channel. Each module contains a unique SkinEntity instance, resource files (background image, icons, etc.), and style configuration file. The modules are independent of each other and can be maintained and updated separately.

[0022] Establish a skin configuration library, obtain the skin configuration data of the channels through the backend interface, and store the default skin configuration of all channels; the skin configuration library also maintains the preset default theme color of each channel, which is used as an alternative solution for the intelligent color matching module's fallback strategy.

[0023] Preferably, the intelligent color matching module is the core of the fully automatic color matching chain from "background image → theme color → component color". It is responsible for automatically extracting the theme color from the background image configured in the backend and intelligently generating component color schemes based on the theme color. The specific implementation is as follows:

[0024] Upon receiving the channel background image resource from the backend interface, the image is first downsampled and preprocessed to scale it to a specified resolution (default 100×100 pixels) to reduce subsequent computation while preserving the color distribution characteristics of the image.

[0025] The downsampled pixel data is converted from the RGB color space to the HSL color space, and an improved median segmentation color quantization algorithm is performed in the HSL color space: The improved median segmentation color quantization algorithm is performed in the HSL color space, and each segmentation selects the dimension with the largest value or range as the segmentation axis.

[0026] ;

[0027] Optimal splitting dimension;

[0028] dim: Iterates through the three components of HSL;

[0029] The set of pixels for color cluster k;

[0030] max / min: The maximum / minimum value of this component within the cluster;

[0031] Select the dimension with the largest value range of the current color cluster as the segmentation axis; after iteration, calculate the value of each color cluster. Center color value:

[0032] ;

[0033] ;

[0034] ;

[0035] ;

[0036] :cluster The circular average value of the H component (add 360° if <0°);

[0037] : pixel The hue value (°), H_p∈[0°, 360°).

[0038] :cluster The mean of the sine values ​​of H_p radians for all pixels in the array;

[0039] :cluster The mean of the cosine values ​​of H_p radians for all pixels in the array;

[0040] : pixel The S or L component;

[0041] =| |: Number of pixels within cluster k;

[0042] Pixel color vector, by Sort in descending order and extract the top 3 primary colors as candidate colors;

[0043] The candidate colors are validated for usability, filtering out extreme color values ​​such as near-gray with saturation (S, i.e., HSL space saturation component) below the threshold (default 0.15), near-black with lightness (L) below 0.05, and near-white with lightness above 0.95, to ensure that the extracted main color has sufficient color expressiveness. If no valid candidate color is found after validation, the process automatically reverts to step S4, adjusts the color quantization parameters (increasing the iteration depth by 1 layer or lowering the saturation filtering threshold to 0.10), and then re-executes color quantization and main color extraction, retrying a maximum of 3 times. If a valid main color cannot be extracted after 3 retries, a fallback strategy is triggered, using the channel's preset default theme color (maintained by the skin configuration library) as the theme color to ensure that the color matching process is not interrupted.

[0044] Based on the validated primary color (or the default theme color provided by the fallback strategy), it is determined as the theme color of this channel; then, according to the HSL attribute value of the theme color, a component color scheme is intelligently generated through brightness contrast rules: let the brightness component of the theme color in the HSL space be L_theme∈[0,1], and the component color... Determined by piecewise function:

[0045]

[0046] (L_theme: Theme color HSL brightness component;) Component colors; L_theme and S are both HSL components); simultaneously, AppBar background color (the theme color itself), card background color (a light variant of the theme color with reduced saturation and increased brightness), dividing line color (a low-opacity variant of the theme color), etc., are generated based on the theme color; contrast is calculated using the formula:

[0047] ;

[0048] CR: Contrast Ratio; The relative brightness of brighter WCAG colors; The relative brightness of darker WCAG colors > ; , It differs in meaning from the HSL lightness component L_theme and conforms to the WCAG2.0AA standard;

[0049] The generated complete color scheme (background image path, theme color, component color set) is encapsulated as a standard SkinEntity instance and stored in the skin configuration library; the entire process is fully automated - the backend only needs to configure the background image, and the system can automatically complete the theme color extraction and component color generation without manual intervention in color scheme details.

[0050] Preferably, the channel monitoring module is responsible for monitoring the user's channel switching operations, obtaining information on currently active channels, capturing the progress of swipe gestures, and triggering the skin switching process. The specific implementation is as follows:

[0051] Listen for channel switching events in the news app (such as when a user clicks on the channel list or swipes left or right to switch channels), and obtain the ID and scene attributes of the currently active channel in real time through Flutter's route listening and state callback methods;

[0052] The currently active channel information is sent to the status management module to trigger the skin switching signal, and at the same time, the channel scene attributes are transmitted to provide a matching basis for the skin loading module;

[0053] Real-time capture of user swipe gestures and swipe progress values ​​(progress∈[0.0,1.0]), formula:

[0054] ;

[0055] : The current scroll offset of the page scroll controller; : Total page width; This progress value is synchronously sent to the status management module to drive the skin blending rendering that follows gestures;

[0056] It supports pre-listening for channel switching. When a user slides their finger to the target channel but has not yet completed the switch, it triggers the pre-loading of the target channel skin in advance, shortening the switching delay and improving smoothness.

[0057] Preferably, the skin loading module is responsible for loading the corresponding background image resource from the backend interface based on the current channel information, triggering the intelligent color matching module to automatically extract the theme color and generate component colors, realizing intelligent preloading and incremental cache updates based on behavior prediction, as specifically implemented as follows:

[0058] Receive the current channel ID from the status management module and query the skin configuration for that channel from the skin configuration library;

[0059] A tiered lazy loading strategy is adopted: First, the background image configuration of the channel is obtained from the backend interface; the background image is first queried from the local cache (implemented through CachedNetworkImage). If it exists in the cache, it is loaded directly. If it does not exist in the cache, the network resource is requested asynchronously. During the loading process, the default theme skin is displayed; after the background image is loaded, the intelligent color matching module is automatically triggered to extract the theme color and generate the component color. The generated theme color and component color are cached in memory for quick use later.

[0060] Construct a user channel access behavior analysis model: Record the user's recent channel switching sequence using a configurable-length circular buffer, count the number of channel switching times (i,j) Count(i→j), and construct the channel transition probability matrix using maximum likelihood estimation. :

[0061] ;

[0062] (i,j): The empirical probability of switching from channel i to channel j;

[0063] Count(i→j): The number of times the i→j transition was observed;

[0064] i: Source channel index, indicating the starting channel for switching; j: Target channel index, indicating the target channel to switch to; : Summing and iterating through variables for all possible target channels Summation is used to normalize the calculation of transition probabilities;

[0065] Based on currently active channels Predicted target channel:

[0066]

[0067] Currently active channels; Predict the next target channel and asynchronously load the skin resources of the predicted target channel into the memory cache pool in advance during the current channel browsing, achieving "load before switching";

[0068] An incremental update mechanism for skin resources is introduced. When the backend skin configuration version number changes, the differences between the current cache configuration and the latest configuration are compared field by field. Only the resource files that have actually changed are downloaded, while the unchanged resources are directly reused from the local cache, reducing network traffic consumption.

[0069] The loaded skin resources are validated to ensure that the theme color format is correct and the background image can be rendered normally. If the validation passes, the skin resources are passed to the state management module for interface rendering; if the validation fails, the exception fallback mechanism is triggered.

[0070] Preferably, the state management module adopts a Provider state management mechanism, serving as the core hub for skin state, to achieve unified management of skin state and real-time hybrid calculation and distribution driven by gestures. The specific implementation is as follows:

[0071] Create a SkinManager class (inheriting from ChangeNotifier) ​​to manage the skin status of the currently active channel (current skin configuration, loading status, switching status, and swipe progress value), and provide methods for skin switching, gesture progress updates, and status queries;

[0072] The sliding progress value "progress" sent by the channel monitoring module is:

[0073]

[0074] Real-time calculation of the intermediate state of the blend between the source skin and the target skin: Let progress∈[0,1], and the color values ​​of each channel of the source skin be... The color values ​​of each channel of the target skin (ch∈{R,G,B,A}), for each theme color and component color attribute of the two ColorSchemes, use the channel linear interpolation formula:

[0075] ;

[0076] Mixed colors ( : The value of the source skin color channel ch;

[0077] : The value of the target skin color channel ch;

[0078] : The value of the ch channel after blending;

[0079] ch: Color channel, select one of R / G / B / A;

[0080] Generate the blended ColorScheme corresponding to the current progress;

[0081] The background image uses a two-layer overlay strategy; the transparency of the source background image is:

[0082] ;

[0083] Target background image transparency:

[0084] ;

[0085] The blended skin configuration is pushed to the UI components in real time via notifyListeners() to achieve skin gradient that follows the user's touch.

[0086] Receive the channel switching confirmation signal from the channel monitoring module and the skin resources from the skin loading module, update the final skin state, trigger the reconstruction of all related interface components, and complete the skin switching confirmation;

[0087] Maintain a skin state cache pool (using an LRU strategy, with a default capacity of 10 channels) to store skin resources from multiple recently switched channels, avoiding frequent data retrieval from the network interface and further improving the smoothness of switching.

[0088] Provides a skin status query interface to allow each page in the application layer to obtain the current skin configuration for interface rendering.

[0089] Preferably, the rendering module is responsible for rendering the loaded skin resources (backend-configured background image, automatically extracted theme color, and intelligently generated component colors) to the App interface, thereby enabling the display of scene-based skins, such as... Figure 3 The image shows the skin display effects for different channels, and the specific implementation is as follows:

[0090] Based on Flutter's Theme component, the current skin's theme color configuration (ColorScheme) and component color configuration are applied to the global or current channel page. This enables synchronized updates of component colors, such as the AppBar background color using the theme color, the AppBar title font color and button text color automatically matching the brightness of the theme color (white font for dark themes, dark font for light themes), and icon colors linked with the theme color. This adheres to the Material 3 design guidelines and ensures visual consistency.

[0091] Background image display is achieved through decorators and background image rendering of container components. It supports background image scaling mode and transparency adjustment, and adaptive display according to page layout. It also supports the blending rendering of background image and theme color to enhance visual hierarchy.

[0092] During the swipe transition, the system receives the mixed skin configuration pushed in real time by the state management module. The mixed intermediate state is rendered in real time through the Theme component and the double-layer background image container to achieve a smooth gradient effect for the color and background image. When the user releases their hand to complete the transition, the remaining transition animation is completed using the AnimatedContainer component with a configurable transition duration (default 300ms) and transition curve to achieve a smooth finish.

[0093] It supports partial adaptation of skin rendering, adjusting the style of local components according to the skin configuration for different pages such as news details page and comment section, to ensure the visual consistency of the entire channel page.

[0094] Preferably, the performance optimization module is responsible for rendering performance isolation and adaptive degradation during skin switching, ensuring smooth operation on various devices. The specific implementation is as follows:

[0095] The skin configuration attributes are split into three independent notification channels: the theme color channel (ColorScheme theme color attributes automatically extracted from the background image), the background image channel (backend-configured background image resources and rendering parameters), and the component color channel (component color attributes such as font color, button color, and icon color automatically generated based on the theme color). Each channel is managed by an independent ChangeNotifier, and its changed state is maintained independently. Figure 7 As shown;

[0096] At the UI component layer, the Selector component enables precise subscription at the attribute level. Each component only listens to the skin attribute channels it actually depends on. When the skin is switched, only the channels whose attributes have actually changed trigger the reconstruction of the corresponding components. The associated components of the channels that have not changed remain unchanged, thus achieving minimal Widget reconstruction.

[0097] A skin rendering frame rate monitoring mechanism is introduced. During the skin switching transition, the rendering time of each frame is monitored in real time through Flutter's SchedulerBinding. When it is detected that the rendering time of 3 consecutive frames exceeds 16.67ms (i.e. the frame rate is lower than 60fps), a rendering degradation strategy is automatically triggered: temporarily disabling the cross-fade-in and fade-out animation of the background image (changing it to real-time replacement) and reducing the calculation frequency of color interpolation (from calculating every frame to calculating once every 2 frames) to ensure the basic smoothness of the switching process. When the frame rate returns to normal, the complete rendering strategy is automatically restored.

[0098] Preferably, the synchronization and fallback module is responsible for cross-device synchronization of user skin settings and multi-level fallback handling of skin loading anomalies, improving the system's usability and stability. The specific implementation is as follows:

[0099] Shared_preferences is used to achieve local persistent storage of skin data. The background image path configured by the backend interface, the automatically extracted theme color, and the intelligently generated component color are cached locally and automatically loaded after the App restarts.

[0100] By integrating with the backend interface, the skin settings are automatically retrieved from the backend when the App is initialized and launched, ensuring a consistent experience across different devices;

[0101] A three-tiered fallback strategy is implemented: Tier 1: When skin resources obtained from the backend interface fail to load, the system automatically downgrades to the channel's default skin. Tier 2: When the channel's default skin fails to load (e.g., the skin module is corrupted), the system automatically downgrades to the global default skin (white theme). Tier 3: When the global default skin also fails to render correctly (extreme exception), the Flutter framework's built-in ThemeData.fallback() function is used as a fallback to ensure the interface remains usable. Each downgrade is accompanied by a lightweight notification to inform the user of the current status, preventing interface glitches.

[0102] Compared with the prior art, the beneficial effects of this application are as follows:

[0103] Enhance user experience: Enable automatic customization of scene-based skins for different news channels based on backend-configured background images. The backend only needs to configure one background image, and the system can automatically extract the theme color and intelligently generate a full set of component colors (font color, button color, icon color, etc.). The skin attributes are highly adapted to the channel content, enhancing user immersion and stickiness. Innovatively implement gesture-driven skin transitions, upgrading skin switching from discrete jumps to continuous transitions, resulting in a natural and smooth interactive experience. Skin switching is smooth without lag or flickering, with fast loading speed, further enhancing the user's visual experience.

[0104] Achieve intelligent skin generation: Establish a fully automated color matching chain of "background image → theme color → component color". By automatically extracting the main color tone from the background image as the theme color, and intelligently generating component colors based on the brightness of the theme color (automatically matching white text and icons for dark themes, and automatically matching dark text and icons for light themes), it breaks through the limitations of manually preset color matching, realizes fully automated skin color matching generation, and greatly improves the efficiency and quality of skin customization.

[0105] Reduce development and maintenance costs: Adopting Flutter modular encapsulation design, the skin module is decoupled from business logic. Each channel's skin can be developed, tested, and updated independently. When adding a new channel or modifying the skin style, there is no need to change the main framework code, which greatly reduces development and maintenance costs and improves development efficiency. At the same time, the unified management of the skin configuration library facilitates batch maintenance of skin configurations.

[0106] Improve system performance and stability: Adopt a behavior prediction-based intelligent preloading strategy and incremental cache update mechanism to reduce skin resource redundancy and network traffic consumption, and reduce switching latency; Minimize widget reconstruction through attribute-level fine-grained monitoring, combined with a frame rate adaptive degradation mechanism, to ensure smooth operation on devices with different performance levels; A three-level anomaly fallback mechanism ensures that the interface is always available under any abnormal conditions, improving system stability and reliability.

[0107] Enhance product competitiveness: Break through the limitations of the existing news apps' globally unified skins, and achieve scenario-based innovation of "one skin per channel" or even "one skin per content", with obvious differentiation advantages, which can effectively enhance the market competitiveness of news apps; at the same time, based on the cross-platform characteristics of Flutter, it can be quickly adapted to multiple terminals such as Android, iOS, and Web, expanding the product coverage.

[0108] Highly adaptable: Supports Material 3 design guidelines, and the skin style can be adaptively adjusted according to the screen size and resolution of different devices to ensure consistent display effects across multiple terminals. Attached Figure Description

[0109] Figure 1 This is a diagram of the overall system architecture of the present invention;

[0110] Figure 2 This is a flowchart of the skin switching process of the present invention;

[0111] Figure 3 These are illustrations showing the skin display effects of different channels in embodiments of the present invention;

[0112] Figure 4 This is a schematic diagram of the skin module packaging structure of the present invention;

[0113] Figure 5This is a schematic diagram illustrating the gesture-driven skin blending rendering principle of the present invention;

[0114] Figure 6 This is a flowchart of the theme color extraction and component color generation process based on the background image of the present invention;

[0115] Figure 7 This is a schematic diagram of the attribute-level fine-grained monitoring and minimization reconstruction mechanism of the present invention. Detailed Implementation

[0116] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments.

[0117] Implementation environment:

[0118] Development environment: Flutter 3.27.4 and above, Dart 3.6.2 and above, Android Studio (or VSCode);

[0119] Operating environment: Android 6.0 and above, iOS 12.0 and above;

[0120] Dependencies: provider (state management), cached_network_image (image caching), shared_preferences (local storage), palette_generator or a self-implemented color quantization algorithm library (primary color extraction).

[0121] Build the system architecture:

[0122] Based on Flutter, a three-layer architecture of "base layer - core layer - application layer" is built. The base layer integrates dependency libraries and provides basic services; the core layer implements 8 core modules (skin configuration, intelligent color matching, channel listening, skin loading, state management, display rendering, performance optimization, synchronization and fallback); the application layer develops pages such as channel list page, news details page, and personal center, and calls the core layer interface.

[0123] Skin configuration module implementation:

[0124] Define a standardized skin entity data structure as the unique data carrier for each channel skin. It includes a unique skin identifier, corresponding channel ID, skin source identifier (enumeration values: preset, dynamic, custom), background image resource address configured by the backend interface (supporting local resource path and network URL), theme color configuration automatically extracted from the background image (built based on the FlutterColorScheme system), and component color configuration intelligently generated based on the theme color (including font color, button color, icon color, AppBar background color, etc.). All attributes follow the Material3 design specification to ensure the integrity of skin attributes and cross-platform compatibility.

[0125] Create independent skin modules for each of the four news channels. Each module corresponds to a unique channel ID and contains a dedicated skin instance and resource files. Each module is independent, supporting separate development, testing, and updates. There is no business logic coupling between modules. Figure 4 As shown. For example, in the Fengkou Finance channel skin module, the backend is configured with a blue background image in a finance style. The system automatically extracts a dark blue theme color from the background image and automatically generates white text, white icons, and other component colors based on the lightness of the dark blue (L<0.5). In the Luzhong Morning Post channel skin module, the backend is configured with a pink background image in a livelihood style. The system automatically extracts a pink theme color from the background image and automatically generates dark text, dark icons, and other component colors based on the lightness of the pink (L≥0.5). Figure 3 As shown, this achieves scenario-based customization of "one channel, one skin".

[0126] Establish a globally unified skin configuration library to store the default skin configurations for the four channels, while reserving standardized interfaces to be compatible with channel background image configurations issued by the backend service; when the backend updates the background image of a channel, the system automatically triggers the intelligent color matching module to re-extract the theme color and generate component colors, thereby realizing automatic updates of skin configurations.

[0127] The intelligent color matching module implements the following:

[0128] Taking the Fengkou Finance channel as an example, when the backend interface updates the background image of the channel, the intelligent color matching module automatically triggers the color matching process, such as... Figure 6As shown: First, the background image is downsampled and scaled to 100×100 pixels; the pixel data is converted from RGB to HSL color space; in the HSL space, a median segmentation color quantization algorithm is executed, with hue (H) as the priority segmentation axis, recursively iterating for 3 layers to generate 8 color clusters; sorted by the number of pixels within each cluster, the top 3 dominant colors are extracted, for example, from a financial background image, dark blue (H:220, S:0.75, L:0.35), gold (H:45, S:0.80, L:0.55), and light gray-blue (H:215, S:0.20, L:0.85) are extracted;

[0129] The candidate colors are validated for usability (maximum of 3 retries, if more than 3 are attempted, a fallback strategy is triggered to use the preset default theme color). The saturation of all three color values ​​is higher than the 0.15 threshold (light gray-blue S=0.20 meets the condition), and the brightness is within a reasonable range. The first validation passes and no retry is required.

[0130] Using dark blue (L:0.35<0.5) as the theme color, and given that the theme color is dark, the system automatically sets the colors of components such as font, button text, and icon to white (#FFFFFF), the AppBar background color to the dark blue theme color, and the card background color to a lighter variant of dark blue (reducing saturation to 0.15 and increasing brightness to 0.95). The contrast ratio between white font and dark blue background is calculated to be 7.2:1 (higher than the 4.5:1 threshold), and the verification passes. The background image path, theme color, and all component colors are encapsulated into a SkinEntity instance, the skin source identifier is set to dynamic, and it is stored in the skin configuration library for use by the Fengkou Finance Channel.

[0131] Similarly, for the pink background image of the Luzhong Morning Post channel (theme color brightness L: 0.65 ≥ 0.5), the system automatically sets the component color to a dark color (#212121) to ensure clear readability on a light background. The entire color matching process is fully automated; backend operators only need to configure the background image for each channel without manually adjusting any color parameters.

[0132] Channel monitoring module implementation:

[0133] By listening to user channel switching operations through the bottom navigation bar component of Flutter, the user's switching action is captured in real time, the unique ID and scene attributes of the target channel are obtained, the target channel information is sent to the state management module simultaneously, the skin switching process is triggered, and the active channel index of the current interface is updated to complete the basic switching of the channel page.

[0134] In the scroll listener callback of the PageView component, obtain the current scroll offset in real time. According to the formula:

[0135]

[0136] progress∈[0.0,1.0]) to calculate the sliding progress value, determine the target channel ID according to the sliding direction, and send the progress and the target channel ID to the state management module in real time to drive gesture-following skin blending rendering.

[0137] Meanwhile, a channel sliding pre-monitoring function is implemented. When a user's sliding operation triggers preloading of the target channel page (the page starts to enter the viewport but the switching is not completed), the preloading process of the target channel skin resource is triggered in advance to reduce the switching delay. In addition, debounce processing is set for all channel switching events (the default debounce interval is 200ms), so as to avoid repeated loading, state disorder and performance loss caused by the user's rapid and continuous channel switching.

[0138] Skin loading module implementation:

[0139] The caching and efficient loading of background images are implemented in combination with the image caching component. The specific process is as follows: first, according to the received channel ID, the background image resource address configured for the channel is obtained through the backend interface; after the background image is loaded, the intelligent color matching module is automatically triggered to extract the theme color from the background image and generate component colors, so as to complete the generation of the complete skin configuration of the channel.

[0140] A hierarchical lazy loading strategy is adopted: the background image is preferentially queried in the local cache, and if a valid cache exists, it is directly retrieved and loaded; if not, an asynchronous network request is initiated for loading, and after the loading is completed, the background image is automatically stored in the local cache, with a cache validity period and a version verification mechanism set; after the background image is loaded and cached, the theme color extraction and component color generation process is immediately triggered, and the generated theme color and component color data are synchronously cached to the memory to avoid repeated calculation.

[0141] Construct a user channel access behavior analysis model: use a circular buffer to record the user's latest 20 channel switching sequences, and maintain an M×M (M=4, corresponding to 4 channels) channel transition probability matrix in real time , where the matrix elements follow the formula:

[0142]

[0143] (i,j): the probability of switching from channel i to j;

[0144] Count(i→j): the number of switching times; i, j, j': channel indices. For example, if it is statistically obtained that P_switch(Fengkou Finance, Luzhong Morning News)=0.45 and P_switch(Fengkou Finance, Huang Delta Morning Post)=0.30, then according to the prediction formula the target channel is determined =Luzhong Morning Post ( : Currently active channel; ch_next: Predicted target channel), prioritizes preloading the skin resources of this channel while the user is browsing the Fengkou Finance channel. The preloading task is executed asynchronously with low priority and does not affect the normal rendering performance of the current channel.

[0145] Incremental updates to skin resources: When the app starts and detects a change in the backend skin configuration version number, it compares the locally cached background image resources with the latest configuration. If the background image has changed, the new background image is downloaded and the theme color extraction and component color generation process is retried; if the background image has not changed, the locally cached background image, theme color, and component color are reused directly to avoid duplicate calculations and downloads.

[0146] During loading, the interface synchronously displays the default theme skin adapted to the channel scene to avoid blank pages or style errors. After the background image is loaded and the theme color extraction and component color generation are completed, the skin resources are validated to confirm that the theme color format is compliant, the component color contrast is up to standard, and the background image can be rendered normally. If the validation passes, the complete skin configuration is passed to the state management module. If the validation fails, the exception fallback mechanism is triggered.

[0147] State management module implementation:

[0148] Based on the Provider state management framework, a global skin management class is created. This class inherits Flutter's ChangeNotifier notification class and internally maintains the skin state of the currently active channel, the currently bound channel ID, the swipe progress value, and the skin memory cache pool of the loaded channels (LRU strategy, capacity 10). At the same time, it provides standardized call interfaces for channel switching, gesture progress updates, skin updates, and state queries.

[0149] The core logic of gesture-driven hybrid rendering is as follows: After receiving the real-time swiping progress value (progress) from the channel listening module, the source channel skin (including the theme color and component color corresponding to its background image) and the target channel skin (including the theme color and component color corresponding to its background image) are retrieved from the cache pool. Then, a channel-wise linear interpolation calculation is performed on the theme color and component color of both skins. Taking the theme color R channel as an example: ;

[0150] ch∈{R,G,B,A};

[0151] : The value of the source skin color channel ch;

[0152] : The value of the target skin color channel ch;

[0153] The value of the ch channel after mixing; the G, B, and A channels are calculated similarly.

[0154] Component colors (font color, button color, icon color, etc.) undergo the same interpolation operation to generate a complete blended skin configuration corresponding to the current progress. The background image uses a double-layer stack rendering, with the source background image's transparency... Target background image transparency ( : Source background image transparency; Target background image transparency. The blending skin configuration is pushed to the interface via notifyListeners() to achieve a smooth, responsive gradient across each frame, such as... Figure 5 As shown.

[0155] Channel switching confirmation logic: After receiving the target channel ID and scene attributes from the channel listening module, first determine whether the target channel is the currently active channel. If so, do not perform duplicate operations. If not, first query the internal skin cache pool. If a valid skin configuration for the channel exists in the cache pool, directly update the current skin status and trigger a global status notification to complete the skin switching. If there is no corresponding configuration in the cache pool, call the skin loading module to load the target skin. After loading, store the skin configuration in the cache pool, update the current skin status, trigger a global notification, and drive the UI components to complete the style update.

[0156] Set up exception handling logic. If an exception occurs during skin loading, directly retrieve the default skin configuration of the target channel to complete the status update, avoiding blank status or interface errors.

[0157] At the app's entry point, the global skin management class is instantiated and globally injected through state management injection, ensuring that all pages and components of the app can call the current skin state and related methods through standardized interfaces, thus achieving full application synchronization of the skin.

[0158] Display rendering module implementation:

[0159] In the core pages of channel pages and news detail pages, the Selector component is used to precisely subscribe to specific attribute channels (theme color channel, background image channel, component color channel) of the global skin management class. When the corresponding attribute is updated, only the components that depend on that attribute are rebuilt and redrawn, ensuring real-time synchronization and rendering efficiency of skin styles. Figure 7 As shown.

[0160] Based on Flutter's native Theme component, the current skin's theme color and component color configuration are injected into the current page: the AppBar background color uses the theme color extracted from the background image, the AppBar title font color uses the intelligently generated component color (white for dark themes, dark for light themes), the button background color uses the theme color, the button text color uses the component color, and the icon color uses the component color. This strictly adheres to Material 3 design guidelines, ensuring that the colors of all components on the page perfectly match the visual style of the current channel's background image, achieving visual unity. Figure 3 As shown.

[0161] Full-screen rendering of the background image is achieved through the decorator configuration of the container component. It supports setting the scaling mode, transparency, and fill rules of the background image to adapt to devices with different screen sizes and resolutions. During the swiping transition, the source background image (Opacity decreases with the progress value) and the target background image (Opacity increases with the progress value) are rendered separately through a two-layer Stack container to achieve a sync fade-in and fade-out effect of the background image.

[0162] The animation container component is used to carry the page background and core layout. A default transition duration of 300ms and a smooth transition curve are set, and the transition parameters can be customized. In the click-to-switch scenario, the theme color gradient and background image fade-in and fade-out are automatically implemented in a synchronous and smooth transition, completely avoiding screen flickering and stuttering issues during the switching process and ensuring a smooth switching experience.

[0163] For special subpages such as news detail pages and comment sections, it supports adjusting the style of local components based on the current skin configuration to ensure the visual style consistency of the entire channel's pages.

[0164] Performance optimization module implementation

[0165] Within the skin management class, skin configuration attributes are split into three independent sub-ChangeNotifiers: theme color channel (automatically extracted from the background image), background image channel (configured by the backend), and component color channel (font color, button color, icon color, etc., automatically generated based on the theme color). When the skin is updated, only the channel whose attribute value has actually changed triggers the notifyListeners() notification. For example, when the backend updates the background image of a channel, the system re-extracts the theme color and generates component colors, triggering updates in all three channels; however, if the background image remains unchanged and only the contrast parameter of the component color is adjusted, only the component color channel triggers the notification, and components associated with the background image channel and theme color channel are not rebuilt. Figure 7 As shown.

[0166] During skin transitions, frame timing listener callbacks are registered using Flutter's `SchedulerBinding.instance.addTimingsCallback` to collect rendering time data for each frame in real time. When three consecutive frames of rendering time exceed 16.67ms, a degradation strategy is automatically triggered: the background image transition method is downgraded from a cross-fade-in / fade-out animation to instant replacement, and the color interpolation calculation frequency is reduced from once per frame to once every two frames (intermediate frames reuse the previous calculation result). The degradation state continues until the rendering time of ten consecutive frames returns to within 16.67ms, at which point it is automatically lifted, and the full rendering strategy is restored.

[0167] Tests show that the attribute-level fine-grained listening mechanism reduces the number of widget reconstructions by about 60% to 70% when updating only a single attribute channel, and the frame rate adaptive degradation mechanism ensures that the frame rate of low-end devices (such as entry-level Android 6.0 phones) remains stable at above 45fps during skin switching.

[0168] Synchronization and fallback module implementation:

[0169] Local persistence: Utilize local storage components to achieve local persistent storage of custom skin configurations. Each channel's skin configuration data is uniquely identified by its channel ID, serialized, and stored in local storage. When the app restarts, it automatically reads the skin configuration data from local storage and loads it into the skin configuration library and memory cache pool to ensure that custom settings are not lost.

[0170] Cross-device synchronization: By integrating with the backend user system interface, the custom configuration of the channel skin is automatically retrieved from the backend when the App starts and the user logs in, and synchronized and updated locally; when the backend skin configuration is updated, it is automatically synchronized to the client and the latest skin configuration data is retrieved again, realizing the synchronization of skin settings on different Android and iOS devices and ensuring the consistency of cross-device visual experience.

[0171] A three-tiered fallback mechanism is in place: Tier 1: When a custom skin resource fails to load, it automatically downgrades to the channel's default skin, displaying the message "Custom skin loading failed, switched to default skin." Tier 2: When the channel's default skin fails to load, it automatically downgrades to the system's global default skin (white theme), displaying the message "Channel skin error, switched to system default skin." Tier 3: If the global default skin also fails to render correctly, Flutter's built-in `ThemeData.fallback()` function is used as a fallback to ensure the interface remains usable. Each downgrade level logs exceptions and reports them to the backend monitoring platform for easy problem localization and repair.

[0172] In this embodiment, the four channels of the news app are each configured with different background images by the backend. The system automatically extracts the theme color and generates component colors to form their respective scene-specific skins: Fengkou Finance Channel (blue background image → dark blue theme color → white font / icons), Luzhong Morning Post Channel (pink background image → pink theme color → dark font / icons), Huangsanjiao Morning Post Channel (light blue background image → light blue theme color → dark font / icons), and Rural Public Channel (default white background → white theme → dark font / icons). Figure 3 As shown; the specific implementation results are as follows:

[0173] Skin switching performance: During the swipe switching process, the skin changes gradually in real time with no perceptible delay; the click switching achieves a smooth transition of 300ms, without lag or screen flicker; according to frame rate tests, high-end devices (such as iPhone 14, Pixel 7) maintain 60fps throughout the skin switching process, while low-end devices (such as entry-level Android 6.0 phones) maintain more than 45fps under the protection of the downgrade strategy.

[0174] Resource loading performance: The average time for the first loading of the background image is about 800ms (when the network environment is good), and the loading time is reduced to less than 50ms after the cache is hit; the behavior prediction-based preloading mechanism has a prediction accuracy of about 65% to 75%, and the switching latency is close to zero when the cache is hit; the incremental update mechanism reduces network traffic consumption by about 70% when only a single resource is changed.

[0175] Rendering performance: The property-level fine-grained listening mechanism reduces the number of widget reconstructions by about 60% to 70% when updating a single property, and reduces peak memory fluctuations by about 30%.

[0176] Intelligent color matching effect: The fully automatic color matching process based on the backend configuration background image runs stably. It automatically extracts the theme color from the background image and generates component colors. Dark themes automatically match white fonts / icons, and light themes automatically match dark fonts / icons. The component colors and background contrast of the generated color scheme meet the WCAG2.0AA level standard (4.5:1 or higher). Operators only need to configure the background image to complete the entire skin customization, improving color matching efficiency by about 90%.

[0177] Cross-device synchronization: Skin settings are synchronized between Android and iOS devices with a delay of no more than 3 seconds; when skin loading fails, a three-level fallback mechanism covers 100% of various abnormal scenarios, ensuring stable system operation.

[0178] Tests have shown that this system runs normally on Android and iOS phones and tablets, with consistent skin display effects. When developing new channels, only the corresponding skin module needs to be added; no modification to the main framework code is required.

[0179] Figure 1This is a diagram of the overall system architecture of the present invention—showing the three-layer architecture of the basic layer, core layer, and application layer, the relationship between the modules in the core layer, and the data flow of "backend configuration of background image → intelligent color matching module extracts theme color → generates component color → display rendering".

[0180] Figure 2 This is a flowchart of the skin switching process of the present invention—a complete process including two modes: swipe switching and click switching, showing the entire chain from user operation to channel monitoring, skin loading (including background image loading and theme color extraction), state management, and display rendering.

[0181] Figure 3 The following are illustrations of the different channel skins in this embodiment of the invention: showing the actual skin display effects of four channels: Fengkou Finance (blue background image + white text / icons), Luzhong Morning Post (pink background image + dark text / icons), Huangsanjiao Morning Post (light blue background image + dark text / icons), and Rural Masses (white background image + dark text / icons), intuitively demonstrating the automatic color matching results of "background image → theme color → component color".

[0182] Figure 4 This is a schematic diagram of the skin module encapsulation structure of the present invention—showing the internal structure of each channel skin module, including three core parts and their relationships: background image resources (backend configuration), theme color configuration (automatically extracted from the background image), and component color configuration (automatically generated based on the theme color, including font color, button color, icon color, etc.).

[0183] Figure 5 This is a schematic diagram of the gesture-driven skin blending rendering principle of the present invention—demonstrating the real-time blending process of the source channel skin and the target channel skin driven by the sliding progress value, including a parallel rendering mechanism of theme color interpolation, background image cross-fade-in and fade-out, and component color synchronous interpolation.

[0184] Figure 6 This invention presents a fully automated color matching process based on background image-based theme color extraction and component color generation. The process involves: "Backend configuration of background image → downsampling → HSL color space conversion → median segmentation and color quantization → main color extraction → candidate color availability verification (if verification fails, parameters are adjusted and extraction is repeated up to 3 times; exceeding this number triggers a fallback strategy using a preset default theme color) → theme color determination → brightness judgment → component color generation (dark theme → white component color / light theme → dark component color) → contrast verification → complete skin configuration output." This is the core flowchart of the invention.

[0185] Figure 7This is a schematic diagram of the attribute-level fine-grained monitoring and minimized reconstruction mechanism of the present invention—showing the structure of three independent notification channels: theme color channel, background image channel, and component color channel, as well as the subscription relationship between each channel and interface components (AppBar, text, buttons, background containers, icons, etc.), illustrating how minimized widget reconstruction is achieved when only some channels are updated.

[0186] The core of this invention lies in overcoming the limitations of existing globally unified skins. By combining Flutter's cross-platform features and modular architecture, it establishes a fully automated skin generation mechanism that follows the entire process: "backend configuration of background image → automatic extraction of theme color → intelligent generation of component colors." This achieves deep binding and intelligent generation of news channels and skin attributes. Specific key invention points are as follows:

[0187] Invention Point 1: Flutter Modular Channel Skin Encapsulation Design – Each news channel's skin (background image, theme color, component colors) is encapsulated as an independent skin module, decoupled from the app's business logic. Each module uses the background image configured by the backend interface as the source, automatically extracts the theme color and generates component colors, and includes exclusive ThemeData configuration and resource files, achieving scenario-based customization of "one skin per channel," solving the problems of high coupling between existing skins and business logic, and inconvenient maintenance. The independently encapsulated modules support separate development, testing, and updates; adding a new channel or modifying a skin does not require changing the main framework code, significantly reducing development and maintenance costs. Figure 4 As shown, each skin module contains three core parts: background image resources, automatically extracted theme color configurations, and intelligently generated component color configurations.

[0188] Invention Point 2: Automatic extraction of theme color and intelligent generation of component color based on backend background image - establishing a fully automatic color matching link of "background image → theme color → component color" to solve the problem of lack of automatic association between existing skin attributes and complete reliance on manual configuration. Specifically: After obtaining the background image resources configured for each channel from the backend interface, the system automatically extracts the main color tone of the background image as the theme color of the channel using an improved median segmentation color quantization algorithm; then, based on the HSL (hue, saturation, brightness) attribute value of the theme color, it intelligently generates component color schemes through brightness contrast rules—when the brightness of the theme color is less than 0.5 (dark colors, such as dark blue, dark red), the system automatically sets the color of components such as font, button text, and icon to white (#FFFFFF) to ensure readability on a dark background; when the brightness of the theme color is greater than or equal to 0.5 (light colors, such as light yellow, light pink), the system automatically sets the component color to dark (#212121) to ensure clarity on a light background; at the same time, it ensures that the contrast between the component color and the theme color background is not less than the WCAG2.0AA standard of 4.5:1; when the availability verification of candidate colors fails, the system re-extracts the color, retrying a maximum of 3 times. If it still fails, a fallback strategy is triggered, using the channel's preset default theme color to ensure the integrity and robustness of the color matching process. Figure 6 As shown, the entire color scheme process achieves fully automated transitions from background image to theme color to component color. Operators only need to configure the channel background image in the backend, and the system can automatically complete the entire skin color scheme, greatly improving the efficiency of skin customization.

[0189] Invention Point 3: Gesture-Driven Real-Time Skin Blending Rendering and Smooth Transition Technology – Breaking through the limitations of existing discrete state switching, this technology achieves real-time linkage between user swipe gestures and skin transitions, constructing a gesture progress-driven skin blending rendering mechanism. Specifically: A Provider state management mechanism is adopted to build a global skin state management center, which monitors channel switching events and skin configuration attributes for each channel in real time. During the user's swipe to switch channels, the swipe progress value (range 0.0 to 1.0) is captured in real time and used as an interpolation factor between two skin configurations. Linear interpolation calculations are performed on the colorScheme theme color channels (R, G, B, A) of the source channel skin A and the target channel skin B, generating intermediate blended skin configurations in real time. This achieves a continuous transition effect where the skin color changes gradually with the finger swipe; The background image synchronization employs a cross-fade-in / fade-out strategy. The source background image's transparency linearly decreases from 1.0 to 0.0 as the progress value increases, while the target background image's transparency linearly increases from 0.0 to 1.0, achieving a smooth transition. When the user releases their finger to complete the switch, a final state confirmation is triggered via ChangeNotifier, and the remaining transition animation is completed with components such as AnimatedContainer using a configurable transition duration (default 300ms). When the user cancels the swipe (rebounds), the system automatically reverts to the original skin state via reverse interpolation. Simultaneously, the skin switching logic is optimized to achieve "load before switching," ensuring smooth transitions. This mechanism upgrades skin switching from the traditional "click-jump" interaction to a "swipe-follow-hand gradual transition" mode, significantly improving the interactive feel and user experience.

[0190] Invention Point 4: Intelligent Preloading and Incremental Caching Mechanism for Skin Resources Based on Behavior Prediction—For large-capacity skin resources such as background images, an intelligent preloading strategy and incremental caching update mechanism integrating user behavior prediction are constructed to solve the problems of redundant resource loading and switching delays in existing systems. Specifically: A "lazy loading on demand when switching channels" strategy is adopted as the basic loading method, combined with image caching technology to achieve resource caching. Each time the App is launched, the version information or update time is compared to determine whether the skin data cache needs to be updated. Local cached resources are loaded first, and network resources are loaded asynchronously and cached when not cached. The default skin is displayed during the loading process. At the same time, lightweight attributes such as theme colors are preloaded to reduce resource redundancy and memory usage. Based on this, a user channel access behavior analysis model is built to record the user's channel switching sequence and frequency. By statistically analyzing the frequency of the user's most recent N (N is a configurable parameter) channel access behavior, the system can analyze the channel access behavior of the user. The system calculates the transition probability matrix for each channel to predict the user's next most likely target channel. During the current channel browsing period, the skin resources of the predicted target channel are asynchronously loaded into the memory cache pool in advance, achieving "load before switching" and reducing the resource loading time during switching to near zero. At the same time, an incremental update mechanism for skin resources is introduced. When the backend skin configuration changes, a resource difference comparison algorithm is used to download only the changed resource files (e.g., if only the background image is updated while other image resources or theme colors remain unchanged, only the new background image is downloaded), avoiding the re-downloading of all resources and reducing network traffic consumption and update waiting time.

[0191] Invention Point 5: Cross-Platform Skin Synchronization and Multi-Level Fault Fallback Mechanism – Utilizing local storage technology to achieve persistent local storage of skin configuration data, combined with backend interfaces to synchronize skin settings across different devices, ensuring users receive a consistent visual experience on various devices; simultaneously, a multi-level skin loading fault fallback strategy is set up. When the background image fails to load or the skin module malfunctions, it automatically switches according to a three-level degradation link of "custom skin → channel default skin → system global default skin" to avoid interface chaos, improve system stability, and solve the existing problems of poor cross-platform adaptation and insufficient stability.

[0192] Invention Point 6: A Multi-Level Component Color Derivation Mechanism Based on Background Image Theme Color – Building upon the "Background Image → Theme Color → Component Color" basic chain established in Invention Point 2, this invention further refines the multi-level derivation rules for component colors, achieving sophisticated automatic component color adaptation. Specifically: The theme color extracted from the background image serves as the primary base color; based on the primary base color, secondary derived colors are generated through HSL color space transformation, including the AppBar background color (the theme color itself), the AppBar title font color (automatically selected as white or dark based on the theme color's brightness), the body text font color (automatically selected based on the page background brightness), the button background color (the theme color), the button text color (a color with high contrast to the theme color), the icon color (a color in the same color family as the theme color but with adjusted brightness), the card background color (a lighter variant of the theme color with reduced saturation and increased brightness), and the dividing line color (a low-transparency variant of the theme color), etc.; all derived component colors are automatically checked for contrast with adjacent background colors to ensure a ratio of no less than 4.5:1 (compliant with WCAG 2.0 AA standard). Figure 6 As shown, this mechanism enables the automatic generation of a complete color scheme covering all interface components from a single background image.

[0193] Invention Point 7: A Skin Rendering Performance Isolation Mechanism Based on Attribute-Level Fine-Grained Monitoring—Solving the performance loss caused by the full Widget tree reconstruction triggered by existing skin switching, achieving minimal skin rendering reconstruction. Specifically: Skin configuration attributes are split into multiple independent notification channels, including a theme color channel (theme color attribute automatically extracted from the background image), a background image channel (background image resources and rendering parameters), and a component color channel (component color attributes such as font color, button color, and icon color automatically generated based on the theme color). Each channel independently maintains its change state. In the state management layer, precise attribute-level subscription is achieved through a Selector component. Interface components only monitor the skin attribute channels they actually depend on. When the skin changes, only channels where the attribute actually changes trigger the reconstruction of the corresponding component; channels that do not change remain unchanged. For example, when only the background image is updated while the theme color remains unchanged, only the background image container component triggers reconstruction; components such as the AppBar, text, and buttons do not need to be reconstructed, significantly reducing the number of unnecessary Widget reconstructions. Figure 7 As shown, the attribute-level fine-grained monitoring mechanism manages skin attributes independently according to three channels: theme color, background image, and component color. At the same time, a skin rendering frame rate monitoring mechanism is introduced to monitor the frame rendering time during skin switching in real time. When a continuous frame time of more than 16.67ms is detected (i.e., the frame rate is lower than 60fps), the rendering strategy is automatically downgraded (such as temporarily disabling background image animation transitions and simplifying color interpolation accuracy) to ensure the basic smoothness of the switching process.

[0194] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not limited to the embodiments shown herein, but should be accorded the widest scope of protection consistent with the principles and novel features disclosed herein.

Claims

1. A Flutter-based App scene skin switching system, characterized in that, It includes a skin configuration module, an intelligent color matching module, a channel monitoring module, a skin loading module, a state management module, and a display rendering module; The skin configuration module is responsible for defining, encapsulating, and managing skin attributes; it establishes a skin configuration library, obtains channel skin configuration data through a backend interface, and stores the default skin configurations for all channels; the skin configuration library also maintains the preset default theme colors for each channel. The intelligent color matching module is responsible for automatically extracting the theme color from the background image configured on the backend, and intelligently generating component color schemes based on the theme color; The channel monitoring module is responsible for monitoring users' channel switching operations, obtaining information on currently active channels, capturing the progress of swipe gestures, and triggering the skin switching process. The skin loading module is responsible for loading the corresponding background image resources from the backend interface based on the current channel information, triggering the intelligent color matching module to automatically extract the theme color and generate component colors, realizing intelligent preloading and incremental cache updates based on behavior prediction; The state management module adopts the Provider state management mechanism, which serves as the core hub for skin state, enabling unified management of skin state and real-time hybrid calculation and distribution driven by gestures; The rendering module is responsible for rendering the loaded skin resources to the App interface, enabling the display of scene-based skins.

2. The Flutter-based App scene skin switching system according to claim 1, characterized in that, The skin configuration module defines skin entity classes, which include a unique skin identifier, corresponding channel ID, skin source identifier, background image path, theme color configuration, and component color configuration. A modular encapsulation approach is adopted, creating an independent skin module for each news channel. Each module contains a dedicated SkinEntity instance, resource files, and style configuration files. The modules are independent of each other and can be maintained and updated separately.

3. The Flutter-based App scene skin switching system according to claim 1, characterized in that, The intelligent color matching module is implemented as follows: Step 1: Receive the channel background image resource sent by the backend interface, perform downsampling preprocessing on the image, scale the image to the specified resolution, and at the same time preserve the color distribution characteristics of the image; Step 2: Convert the downsampled pixel data from the RGB color space to the HSL color space, and perform an improved median-segmented color quantization algorithm in the HSL space: Step 3: Execute the improved median segmentation color quantization algorithm in the HSL color space, selecting the dimension with the largest value or range as the segmentation axis for each segmentation: ； Optimal splitting dimension; : Traverse the three components of HSL; The set of pixels for color cluster k; max / min: These are the maximum and minimum values ​​of the component within the cluster, respectively; Step 4: Select the dimension with the largest value range of the current color cluster as the slicing axis; After the iteration is complete, calculate the center color value of each color cluster k. : ； ； ； ； The circular average value of the H component of cluster k; : pixel The hue value, H_p∈[0°, 360°). The mean of the radian sine values ​​of H_p for all pixels in cluster k; The mean of the radian cosine values ​​of all pixels H_p in cluster k; : pixel The S or L component; =| |: Number of pixels within cluster k; :Pixel color vector, by Sort in descending order, extract the first... One primary color tone was used as a candidate color. Step 5: Perform availability verification on the candidate colors, filtering out extreme color values ​​with saturation below the threshold. If no valid candidate colors are found after verification, automatically revert to Step 4, adjust the color quantization parameters, and re-execute color quantization and dominant hue extraction. The process can be repeated up to a maximum of [number] retries. Next; if If a valid primary color cannot be extracted after the second retrieval, the channel's default theme color will be used as the theme color to ensure that the color matching process is not interrupted. The primary color that passed verification was determined as the theme color for this channel; then, based on the HSL attribute value of the theme color, a component color scheme was intelligently generated according to the brightness contrast rules. Let the lightness component of the theme color in the HSL color space be L_theme∈[0,1], and the component color... Determined by piecewise function: L_theme: The HSL brightness component of the theme color; Component color; Both L_theme and S are HSL components; Generate AppBar background color, card background color, and divider line color based on the theme color; contrast is calculated using the formula: CR: Contrast Ratio; The relative brightness of brighter WCAG colors; The relative brightness of darker WCAG colors is set. > ; The generated complete color scheme is packaged into a standard SkinEntity instance and stored in the skin configuration library.

4. The Flutter-based App scene skin switching system according to claim 1, characterized in that, Channel monitoring module: Listen for channel switching events in the app and obtain the ID and scene attributes of the currently active channel in real time through Flutter's route listening and status callback methods; The currently active channel information is sent to the status management module to trigger the skin switching signal, and at the same time, the channel scene attributes are transmitted to provide a matching basis for the skin loading module; Real-time capture of the user's swipe gesture progress value progress∈[0.0,1.0], according to the formula: ； : The current scroll offset of the page scroll controller; Total page width; The progress value of the swipe gesture is synchronously sent to the state management module to drive the skin blending rendering that follows the gesture. It supports pre-listening for channel switching, which triggers the preloading of the target channel skin in advance when the user slides their finger to the target channel but has not completed the switching.

5. The Flutter-based App scene skin switching system according to claim 1, characterized in that, The skin loading module receives the current channel ID from the status management module and queries the skin configuration for that channel from the skin configuration library. First, the background image configuration of the channel is obtained from the backend interface. The background image is first checked in the local cache. If it exists in the cache, it is loaded directly. If it does not exist in the cache, the network resource is requested asynchronously. During the loading process, the default theme skin is displayed. After the background image is loaded, the intelligent color matching module is automatically triggered to extract the theme color and generate the component color. The generated theme color and component color are cached in memory for quick use later. Construct a user channel access behavior analysis model: Record the user's recent channel switching sequence using a circular buffer, count the number of channel switching times (i,j) Count(i→j), and construct the channel transition probability matrix using maximum likelihood estimation. : ； (i,j): The empirical probability of switching from channel i to channel j; Count(i→j): The number of times the i→j transition was observed; i: Source channel index, indicating the starting channel for switching; j: Target channel index, indicating the target channel to switch to; : Iterate through the variables to sum them up for all possible target channels. Summation is used to normalize the calculation of transition probabilities; Based on currently active channels Predicted target channel: During the current channel browsing, the skin resources of the predicted target channel are asynchronously loaded into the memory cache pool in advance to achieve "load before switching"; An incremental update mechanism for skin resources is introduced. When the backend skin configuration version number changes, the differences between the current cache configuration and the latest configuration are compared field by field. Only the resource files that have actually changed are downloaded, while the unchanged resources are directly reused from the local cache, reducing network traffic consumption. The loaded skin resources are validated to ensure that the theme color format is correct and the background image can be rendered normally. If the validation passes, the skin resources are passed to the state management module for interface rendering; if the validation fails, the exception fallback mechanism is triggered.

6. The Flutter-based App scene skin switching system according to claim 1, characterized in that, The status management module creates a SkinManager class to manage the skin status of the currently active channel, providing methods for skin switching, gesture progress updates, and status queries. Receive the swipe gesture progress value (progress) sent by the channel monitoring module, and calculate the intermediate state of the blend between the source skin and the target skin in real time: Let progress ∈ [0,1], and the color values ​​of each channel of the source skin be... The color values ​​of each channel of the target skin , ch∈{R,G,B,A}; For the theme colors and component color attributes of the two ColorSchemes, calculate the blend color using the channel linear interpolation formula. : : The value of the source skin color channel ch; : The value of the target skin color channel ch; : The value of the ch channel after blending; ch: Color channel, select one of R / G / B / A, and generate the color scheme corresponding to the current progress. The background image uses a two-layer overlay strategy, with varying transparency. : ； Target background image transparency : ； The blended skin configuration is pushed to the UI components in real time via notifyListeners() to achieve skin gradient that follows the user's touch. Receive the channel switching confirmation signal from the channel monitoring module and the skin resources from the skin loading module, update the final skin state, trigger the reconstruction of all related interface components, and complete the skin switching confirmation; Maintain a skin status cache pool to store skin resources from multiple recently switched channels, avoiding frequent data retrieval from the network interface; Provides a skin status query interface to allow each page in the application layer to obtain the current skin configuration for interface rendering.

7. The Flutter-based App scene skin switching system according to claim 1, characterized in that, The rendering module is based on Flutter's Theme component. It applies the current skin's theme color configuration (ColorScheme) and component color configuration to the global or current channel page. This enables synchronized updates of component colors, such as the AppBar background color using the theme color, the AppBar title font color and button text color automatically matching the brightness of the theme color, and the icon color linking with the theme color. This conforms to the Material 3 design guidelines and ensures visual consistency. Background image display is achieved through decorators and background image rendering of container components. It supports background image scaling mode and transparency adjustment, and adaptive display according to page layout. It also supports the blending rendering of background image and theme color to enhance visual hierarchy. During the swipe transition, the system receives the mixed skin configuration pushed in real time by the state management module. The mixed intermediate state is rendered in real time through the Theme component and the double-layer background image container to achieve a smooth gradient effect for the color and background image. When the user releases their hand to complete the transition, the AnimatedContainer component is used to complete the remaining transition animation with a configurable transition duration and transition curve to achieve a smooth finish. It supports partial adaptation of skin rendering, adjusting the style of local components according to skin configuration for different pages to ensure visual consistency across the entire channel page.

8. The Flutter-based App scene skin switching system according to claim 1, characterized in that, It also includes a performance optimization module responsible for rendering performance isolation and adaptive degradation during skin switching, ensuring smooth operation on various devices. The specific implementation is as follows: The skin configuration attributes are split into three independent notification channels: theme color channel, background image channel, and component color channel. Each channel is managed by an independent ChangeNotifier, and the change status is maintained independently. At the UI component layer, the Selector component enables precise subscription at the attribute level. Each component only listens to the skin attribute channels it actually depends on. When the skin is switched, only the channels whose attributes have actually changed trigger the reconstruction of the corresponding components. The associated components of the channels that have not changed remain unchanged, thus achieving minimal Widget reconstruction. A skin rendering frame rate monitoring mechanism is introduced. During the skin switching transition, the rendering time of each frame is monitored in real time through Flutter's SchedulerBinding. When the rendering time of 3 consecutive frames exceeds the threshold, a rendering degradation strategy is automatically triggered: temporarily disabling the cross fade-in and fade-out animation of the background image and reducing the calculation frequency of color interpolation to ensure the basic smoothness of the switching process. When the frame rate returns to normal, the complete rendering strategy is automatically restored.

9. The Flutter-based App scene skin switching system according to claim 1, characterized in that, It also includes a synchronization and fallback module responsible for cross-device synchronization of user skin settings and multi-level fallback handling of skin loading anomalies, improving the system's usability and stability. The specific implementation is as follows: Shared_preferences is used to achieve local persistent storage of skin data. The background image path configured by the backend interface, the automatically extracted theme color, and the intelligently generated component color are cached locally and automatically loaded after the App restarts. By integrating with the backend interface, the skin settings are automatically retrieved from the backend when the App is initialized and launched, ensuring a consistent experience across different devices; Set up a three-level fallback strategy for exceptions: Level 1: When the skin resource obtained from the backend interface fails to load, automatically downgrade to the preset default skin of the channel; The second level automatically downgrades to the system's global default skin when the channel's default skin fails to load. The third level uses Flutter's built-in ThemeData.fallback() fallback function as a fallback to ensure the interface remains usable when the global default skin fails to render properly. Each fallback level informs the user of the current status with a lightweight prompt to avoid interface errors.

10. A method for switching scene skins in a Flutter-based app, characterized in that, Switch using a swipe toggles, and / or a click toggles; Slide to switch process: The user begins swiping to switch channels; The channel monitoring module calculates the progress value of the swipe gesture in real time and sends it to the status management module along with the target channel ID. The status management module receives progress values, queries the skin configurations of the source and target channels, and calculates the intermediate skin for the hybrid system in real time. These three processes are executed in parallel. The calculation results of linear interpolation of theme color and component color channels, linear mapping of background image transparency, and synchronous interpolation of component colors are pushed to the display rendering module through a notification mechanism. The rendering module renders the blended skin in real time, while the performance optimization module monitors the frame rate and triggers a degradation strategy when necessary to achieve skin gradients that follow hand movements. When the user releases their finger to complete the switch, the state management module confirms the final skin state, and the display rendering module uses a timed animation to complete the remaining transition; when the user cancels the swipe, the original skin is restored. After the switch is complete, the user will see the contextual skin corresponding to the current channel; Click to switch processes: The user clicks on the target channel; The channel monitoring module captures switching events, obtains the target channel ID and scene attributes, and sends them to the status management module. When the state management module triggers a skin switching signal, it first checks the cache pool. If a match is found, the skin state is updated directly. If no match is found, the skin loading module is notified to load the target channel's skin resources. The skin loading module queries the skin configuration from the skin configuration library, prioritizes loading local cached resources, and asynchronously loads network resources if there are no cached resources. After loading, it verifies the validity of the resources. The skin loading module passes the valid skin resources to the state management module, which then updates the skin state and notifies the display rendering module. The rendering module uses AnimatedContainer to achieve a smooth transition over a set time, while the performance optimization module only triggers the reconstruction of the component corresponding to the changed attribute channel. Once the switch is complete, the user will see the contextualized skin corresponding to the current channel; if loading fails, the backup strategy will be triggered synchronously with the fallback module according to the three-level degradation link.

Images