By Advait Sakhalkar on March 17, 2025
Intermediate


What 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:

  1. services/background_service.dart: This contains the core implementation of the background service functionality, including:
  2. The callbackDispatcher top-level function that Workmanager executes
  3. The actual location tracking logic
  4. API communication for sending location data
  5. Logging functionality
  6. Constants and utility methods used by the background service
  7. custom_code/actions/background_location_service.dart: This serves as a bridge between the FlutterFlow UI and the core background service implementation:
  8. It provides methods like initBackgroundLocationService() and stopBackgroundLocationService() that can be called directly from FlutterFlow actions
  9. It handles platform-specific checks (web vs mobile)
  10. It manages permission requests and service initialization

This separation follows a good architectural pattern:

  1. The core functionality lives in the services directory, making it reusable and maintainable
  2. The FlutterFlow-specific integration lives in custom_code/actions, following FlutterFlow's conventions for custom actions

This approach allows you to:

  1. Keep the core background service logic independent of the UI framework
  2. Easily expose the functionality to FlutterFlow's visual editor
  3. 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:

  1. Keep the Current Structure: The separation between core service logic and FlutterFlow actions is a good architectural pattern.
  2. For FlutterFlow Integration:
  3. Keep the custom_code/actions/background_location_service.dart file as your FlutterFlow custom actions
  4. Make sure these actions are properly registered in FlutterFlow's custom code section
  5. You can then call these actions directly from FlutterFlow's visual editor
  6. For the Background Service Implementation:
  7. Upload the services/background_service.dart file to your FlutterFlow project
  8. Make sure all required dependencies are in your FlutterFlow project's pubspec.yaml

Important FlutterFlow Considerations:

  1. Package Dependencies: Ensure that workmanagergeolocatorhttp, and path_provider packages are added to your FlutterFlow project.
  2. Initialization in main.dart: The Workmanager initialization code in main.dart needs to be added to your FlutterFlow project. You can do this by:
  3. Using FlutterFlow's "App Start" event to call your initialization custom action
  4. Or by adding the initialization code directly in the custom code section of your main.dart
  5. Permissions: Make sure your FlutterFlow app has the proper permission declarations in the Android and iOS configuration:
  6. For Android: Add location permissions to the AndroidManifest.xml
  7. For iOS: Add location usage descriptions to the Info.plist
  8. 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:

  1. Go to your FlutterFlow project dashboard
  2. Navigate to the Custom Code section:
  3. Click on the "Custom Code" tab in the left sidebar
  4. This will open FlutterFlow's custom code manager
  5. Create a services directory:
  6. In the custom code file browser, click the "+" button to create a new folder
  7. Name it "services" to maintain the same structure as your local project
  8. Upload the background_service.dart file:
  9. Navigate into the services folder you just created
  10. Click the "+" button again and select "Create File"
  11. Name it "background_service.dart"
  12. Copy the entire content of your local background_service.dart file and paste it into the editor
  13. Save the file
  14. Verify the import paths:
  15. Make sure all import paths in the file use the correct package name
  16. For example, imports should use package:fimer_care/... format for internal project files
  17. Update package dependencies:
  18. Go to the "Project Settings" in FlutterFlow
  19. Navigate to the "Pub Dependencies" section
  20. Make sure all required packages (workmanagergeolocatorhttppath_provider, etc.) are added

The file structure in FlutterFlow should mirror your local project structure:

CopyInsert
lib/
 ├── 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



More articles on FlutterFlow
Comments

No comments yet.

Add a comment
Ctrl+Enter to add comment