Requirements
The following are required to use Journey’s TomTom Navigation Flutter SDK:
- Minimum Flutter version: 3.22.0
- Minimum iOS deployment target: 14.0
- Xcode 15 or higher.
- Built with Swift 5.9 or higher.
Additionally, you’ll need Journey’s token for our Dart and Cocoapods repositories. If you don’t a token, please
contact us to set up your account.
Currently, only iOS is supported. Android support coming soon.
Adding Flutter dependency
To add the SDK to your Flutter project, first add a new Flutter token:
# 👇 replace TOKEN with your token
echo 'TOKEN' | dart pub token add https://registry.journey.tech/dart/tomtom_flutter
tomtom_flutter_navigation SDK:
dart pub add tomtom_flutter_map tomtom_flutter_navigation tomtom_flutter_navigation_ui_native tomtom_flutter_route_planner --hosted-url https://registry.journey.tech/dart/tomtom_flutter
Adding iOS dependencies
Update your ios/Podfile and assure the platform target is set to 14.0 or higher:
Add Journey’s and TomTom’s Cocoapods repositories to the top of your Podfile, with the provided token.
# 👇 replace TOKEN with the provided token
source 'https://registry.journey.tech/TOKEN/pods/tomtom_flutter.git'
cd ios/
pod install --repo-update
Updating iOS permissions
Journey’s TomTom Navigation SDK requires the user’s location to provide turn-by-turn directions. Update your Info.plist file to include the following:
<key>NSLocationWhenInUseUsageDescription</key>
<string>Your precise location is used to calculate turn-by-turn directions, show your location on the map, and help improve the map.</string>
<key>NSLocationTemporaryUsageDescriptionDictionary</key>
<dict>
<key>LocationAccuracyAuthorizationDescription</key>
<string>Please enable precise location. Turn-by-turn directions only work when precise location data is available.</string>
</dict>
Initializing the navigation SDK
Before being able to activate a navigation session, you must register the following modules in your main():
import 'package:tomtom_flutter_map/tomtom_flutter_map.dart';
import 'package:tomtom_flutter_navigation/tomtom_flutter_navigation.dart';
import 'package:tomtom_flutter_navigation_ui_native/tomtom_flutter_navigation_ui_native.dart';
import 'package:tomtom_flutter_route_planner/tomtom_flutter_route_planner.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await _routePlannerManager.register(tomtomApiKey);
await _navigationManager.register(tomtomApiKey);
runApp(const MyApp());
}
Adding a navigation map to your application
To add a TomTom map with navigation:
- Use the
TomTomMap widget to display a map.
- Register your map immediately after the platform view is created.
- Provide a
TomTomFlutterNavigationUINative widget in the navigation UI builder.
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return TomTomMap(
options: MapOptions(
styleMode: MapManagerStyleMode.main,
initialCameraPosition: MapManagerLatLng(
latitude: 37.7749,
longitude: -122.4194,
),
initialCameraZoom: 12,
apiKey: 'your_tomtom_api_key_here',
),
// 👇 register this map instance to our navigation manager
onPlatformViewCreated: (MapManager mapManager) async {
await TomTomNavigationManager.instance.registerMap(mapManager);
},
// 👇 use the native TomTom navigation UI for showing turn-by-turn instructions
navigationUIBuilder: (context, mapManager) {
return TomTomFlutterNavigationUINative(mapManager: mapManager);
},
);
}
}
Next steps
