Mannlowe Ops - Custom code in Flutterflow
By Advait Sakhalkar on March 17, 2025
IntermediateWhat is the reason to have backgroudn service in services as well as custom code > actions?
The background service implementation is split between two locations for a specific architectural reason:
services/background_service.dart
: This contains the core implementation of the background service functionality, including:- The
callbackDispatcher
top-level function that Workmanager executes - The actual location tracking logic
- API communication for sending location data
- Logging functionality
- Constants and utility methods used by the background service
custom_code/actions/background_location_service.dart
: This serves as a bridge between the FlutterFlow UI and the core background service implementation:- It provides methods like
initBackgroundLocationService()
andstopBackgroundLocationService()
that can be called directly from FlutterFlow actions - It handles platform-specific checks (web vs mobile)
- It manages permission requests and service initialization
This separation follows a good architectural pattern:
- The core functionality lives in the
services
directory, making it reusable and maintainable - The FlutterFlow-specific integration lives in
custom_code/actions
, following FlutterFlow's conventions for custom actions
This approach allows you to:
- Keep the core background service logic independent of the UI framework
- Easily expose the functionality to FlutterFlow's visual editor
- Maintain a clean separation of concerns between the implementation and its integration
If you were to refactor this, you could potentially consolidate some of the code, but keeping this separation is generally a good practice for maintainability and code organization.
DoneFeedback has been submitted
Me
What is your recommendation? Can I pull this code in flutteflow?
Yes, you can integrate this code with FlutterFlow, but with some specific considerations:
My Recommendation:
- Keep the Current Structure: The separation between core service logic and FlutterFlow actions is a good architectural pattern.
- For FlutterFlow Integration:
- Keep the
custom_code/actions/background_location_service.dart
file as your FlutterFlow custom actions - Make sure these actions are properly registered in FlutterFlow's custom code section
- You can then call these actions directly from FlutterFlow's visual editor
- For the Background Service Implementation:
- Upload the
services/background_service.dart
file to your FlutterFlow project - Make sure all required dependencies are in your FlutterFlow project's pubspec.yaml
Important FlutterFlow Considerations:
- Package Dependencies: Ensure that
workmanager
,geolocator
,http
, andpath_provider
packages are added to your FlutterFlow project. - Initialization in main.dart: The Workmanager initialization code in
main.dart
needs to be added to your FlutterFlow project. You can do this by: - Using FlutterFlow's "App Start" event to call your initialization custom action
- Or by adding the initialization code directly in the custom code section of your main.dart
- Permissions: Make sure your FlutterFlow app has the proper permission declarations in the Android and iOS configuration:
- For Android: Add location permissions to the AndroidManifest.xml
- For iOS: Add location usage descriptions to the Info.plist
- Testing: Background services can be tricky to test in FlutterFlow's preview mode. You'll need to deploy to a real device for proper testing.
The current implementation should work well with FlutterFlow as long as all the dependencies and configurations are properly set up. The custom actions approach you've taken is exactly how FlutterFlow recommends integrating complex functionality.
Would you like me to help with any specific part of the FlutterFlow integration?
Memory has been updated.
Manage
DoneFeedback has been submitted
Me
Weher to Upload the services/background_service.dart file to your FlutterFlow project?
In FlutterFlow, you should upload the services/background_service.dart
file to the custom code section. Here's how to do it:
- Go to your FlutterFlow project dashboard
- Navigate to the Custom Code section:
- Click on the "Custom Code" tab in the left sidebar
- This will open FlutterFlow's custom code manager
- Create a services directory:
- In the custom code file browser, click the "+" button to create a new folder
- Name it "services" to maintain the same structure as your local project
- Upload the background_service.dart file:
- Navigate into the services folder you just created
- Click the "+" button again and select "Create File"
- Name it "background_service.dart"
- Copy the entire content of your local background_service.dart file and paste it into the editor
- Save the file
- Verify the import paths:
- Make sure all import paths in the file use the correct package name
- For example, imports should use
package:fimer_care/...
format for internal project files - Update package dependencies:
- Go to the "Project Settings" in FlutterFlow
- Navigate to the "Pub Dependencies" section
- Make sure all required packages (
workmanager
,geolocator
,http
,path_provider
, etc.) are added
The file structure in FlutterFlow should mirror your local project structure:
CopyInsertlib/├── custom_code/│ └── actions/│ └── background_location_service.dart└── services/└── background_service.dart
This approach maintains the separation of concerns while making the code available in your FlutterFlow project. The custom actions in custom_code/actions/background_location_service.dart
will be able to import and use the functionality from services/background_service.dart
just like in your local project.
More articles on FlutterFlow