Custom Files
We allow you to add a custom code directly into the main.dart
file of your app. This means that you can easily implement specific functionalities and customize your app as per your requirements without downloading the entire project and manually modifying the file.
By default, the file you want to edit is in 'read-only' mode. However, using our editor, you can add a code snippet in the form of custom actions.
You can only add custom actions that have no arguments (including BuildContext).
Edit main.dart
The main.dart is a critical file in your project, as it serves as the entry point for the application. This file contains the main()
function, which is responsible for starting the application by running the code that builds the UI and initializes any other necessary components.
You can edit the main.dart file to include anything in main()
function that we don't yet support. For example, initializing third-party plugins or libraries and setting up system-level configurations, such as changing the status bar color or orientation.
Let's see an example of how you can add a code in main.dart file to change the status bar color for the mobile app. Here's how it looks:
To do so, you can edit main.dart file by following the steps below:
Create a custom action for the code you want to include in a main.dart file. For this example, here's code in a custom action named 'setStatusbarColor'.
Now click on Custom Functions from the Navigation Menu (left side of your screen) and open the Custom Files > main.dart.
Determine where to place the code (i.e., Initial Action or Final Action), click the + button, and select the custom action.
Click Save.
More examples
Let's see some more examples of adding code to the main.dart file to solidify understanding and use it in real-world scenarios.
Example 1: Lock device orientation
You might want to lock the device orientation in portrait or landscape mode to prevent it from rotating the screen automatically when the user tilts or rotates the device. This is useful in scenarios where the layout of the app is designed to work only in one specific orientation or when you want to ensure that the app is always displayed in a consistent manner.
To set the device orientation in landscape-only mode, create a custom action with the following code and add it to a main.dart file.
Example 2: Getting app lifecycle callback
If you want to ensure that your app appropriately manages its lifecycle and handles any necessary actions when it transitions between different states, such as 'resumed' and 'paused,' you can add the AppLifecycleObserver
in the main.dart file.
To do so, create a custom action with the following code and add it to a main.dart file.
Last Updated Date: September 4, 2023
Last updated