UI Components & Theming
Relevant source files
The following files were used as context for generating this wiki page:
LuCI Mobile implements a modern user interface based on Material Design 3. The system supports dynamic theme switching between light and dark modes, following the host operating system's settings or user preference. The UI architecture encompasses native platform configurations for Android and iOS alongside a Flutter-based component layer.
Sources: README.md:104-104, pubspec.yaml:70-71
Theme Architecture
The application employs a multi-layered approach to theming that begins at the native boot sequence and transitions into the Flutter framework.
Native Launch Themes
Native themes manage the visual appearance of the application during the initialization phase before the Flutter engine takes control.
- Android: Uses
LaunchThemeandNormalTheme. TheNormalThemeprovides the window background while the Flutter UI initializes. - iOS: Uses
LaunchBackground.colorsetto define universal light and dark luminosity values.
Sources: android/app/src/main/res/values/styles.xml:4-16, ios/Runner/Assets.xcassets/LaunchBackground.colorset/Contents.json:2-37
Platform Specific Configurations
| Platform | Configuration File | Purpose |
|---|---|---|
| Android (Light) | values/colors.xml | Defines #ffffff for launch and icon backgrounds. |
| Android (Dark) | values-night/colors.xml | Defines #000000 for dark mode launch background. |
| iOS | LaunchBackground.colorset | Maps sRGB white (1.0) and black (0.0) to light/dark appearances. |
Sources: android/app/src/main/res/values/colors.xml:3-6, android/app/src/main/res/values-night/colors.xml:3-5, ios/Runner/Assets.xcassets/LaunchBackground.colorset/Contents.json:5-32
Visual Hierarchy & Edge-to-Edge Display
LuCI Mobile implements an edge-to-edge layout on Android to utilize the full screen area. The MainActivity configures the system UI to allow the application content to appear behind the status and navigation bars.
The diagram shows the logic flow for initializing the edge-to-edge display on Android devices.
The system manages the appearance of system bars through the WindowInsetsControllerCompat. On Android 15 (API 35) and higher, the application uses the modern EdgeToEdge API via reflection to maintain compatibility while adopting new platform standards.
Sources: android/app/src/main/kotlin/com/cogwheel/LuCIMobile/MainActivity.kt:15-46
UI Components
The application utilizes several key libraries to construct its interface, as defined in the project dependencies.
Core UI Frameworks
- Material Design: The primary design system for layout and standard components.
- Cupertino Icons: Provides iOS-style iconography for a native feel on Apple devices.
- fl_chart: Handles the rendering of interactive charts for system performance metrics on the dashboard.
Dashboard Elements
The dashboard serves as the central hub for router management and includes:
- Throughput & Load Charts: Visualized via
fl_chart. - Status Indicators: Show wireless signal, memory use, and interface status.
- Client Lists: Searchable lists for hostnames, IP, and MAC addresses.
Sources: pubspec.yaml:41-43, README.md:14-25
Asset Management
The application organizes assets into platform-specific sets to support various device resolutions and theme states.
Iconography and Launch Images
- Android: Icons are stored in
@mipmap/ic_launcher. - iOS: The
AppIcon.appiconsetincludes specialized versions for iPhone (2x, 3x), iPad (76x76, 83.5x83.5), and Marketing (1024x1024).
Sources: android/app/src/main/AndroidManifest.xml:9-10, ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json:3-85
Localization
The UI supports multiple languages through the flutter_localizations package. Localization files are managed in lib/l10n.
| Language | Code |
|---|---|
| English | en |
| German | de |
| French | fr |
| Spanish | es |
| Chinese (Simplified/Traditional) | zh, zh_Hant |
Sources: pubspec.yaml:37-38, l10n.yaml:1-24
Summary of Implementation
LuCI Mobile's UI system integrates native platform styles with Flutter's Material 3 components. It enforces edge-to-edge layouts on modern Android versions and provides a consistent dark/light mode experience across iOS and Android. The use of specialized charting and localization libraries ensures the dashboard remains informative and accessible across different regions and device types.