Frontend Docs Public - Marionette.dev
Main document to guide the UserApp component customization to fit the business needs of the project.
1. Main LogoEdit Main Logo:
Locate the file at
/lib/presentation/constants/assets_path.dart
.Replace the existing logo paths with the paths to your own logos.
Requirements
The icon format must be SVG.
Two versions of the icons are required: one for light theme and one for dark theme.
Â
Favicon (Web):
Go to the
web
folder in your project.Replace
favicon.ico
with your own favicon file.
Update Main Web Icon:
Replace the icon at
web/icons/main_web_icon.png
with your own icon file.
2. Mobile App Launcher Icons
Replace the icons in the
assets/launcher
directory with your own launcher icons.Generate new icons by running the following command:
flutter pub run flutter_launcher_icons
3. Splash Screen for Mobile App
To update the splash screen icons for the mobile app, follow these steps:
- Replace the Splash Screen Icons:
Navigate to the
assets/splash
directory.Replace the existing icons with your new ones, ensuring they are in either JSON or SVG format.
- Select the Icon Format in Code:
Open the
lib/presentation/components/splash_screen.dart
file.Choose which format you want to use (JSON or SVG) by modifying the appropriate sections of the code.
4. Edit Colors
To change the main color of the app:
Open the
lib/presentation/constants/colors.dart
file.Modify the value of the
accentColor
variable to your desired color.
5. Edit FooterFor Web:
Open the folder
lib/presentation/components/footer_components/web
.For Mobile:
Open the folder
lib/presentation/components/footer_components/mobile
.6. Edit App Name
Replace 'app_name' in the file located at lib/presentation/constants/app_info.dart..
Replace 'app_name' in the file located at /web/index.html at lines 14 and 20."
Â
7.Edit global app info
In the file located at lib/presentation/constants/app_info.dart, you need to make the following changes:
Update 'howToWorkLink' used in the header (Web).
Replace 'supportEmail' with your support email.
Edit links if they will be used in the footer (Web and Mobile).