UI Component

Flutter Navigation SDK offers the flexibility to customize the styles of the Navigation View according to your app's design and branding requirements.

Android Customization:

To customize the styles for the Android Navigation View, create custom styles in your Android project's styles.xml file. These styles should inherit from the existing NavigationViewLight or NavigationViewDark styles, depending on your desired theme.

In the provided code example, a custom map-style URL is integrated into the navigation view styles for both light and dark themes. The custom map style URL allows developers to personalize the visual appearance of the map used within the navigation view according to their application's design language and branding.

For example, to create a custom style named CustomNavigationViewLight, use the following code:

1<style name="CustomNavigationViewLight" parent="NavigationViewLight">
2//customize your navigation style
3<item name="navViewBannerBackground">@color/color</item>
4<item name="navViewBannerPrimaryText">@color/color</item>
5<item name="navViewMapStyle">lightStyleUrl</item>
6...
7</style>

For the light theme, a style named "CustomNavigationViewLight" is created, inheriting properties from the "NavigationViewLight" style. Within this style, developers have the opportunity to customize various aspects of the navigation view, including the navigation banner background and primary text color. The crucial customization, however, is the assignment of the custom map style URL using the "navViewMapStyle" item. By specifying a URL, such as "lightStyleUrl," developers can link their desired map style definition, tailored to their application's requirements.

Similarly, for the dark theme, a style named "CustomNavigationViewDark" is defined by extending the "NavigationViewDark" parent style. Within this style, developers can again customize the navigation banner background, and notably, assign the custom map style URL using the "navViewMapStyle" item, here represented as "darkStyleUrl."

1<style name="CustomNavigationViewDark" parent="NavigationViewDark">
2<item name="navViewBannerBackground">@color/colorAccent</item>
3<item name="navViewMapStyle">darkStyleUrl</item>
4</style>

iOS Customization:

To customize the appearance of the Navigation View on iOS, import nb_navigation_flutter in your AppDelegate and use the customStyle() method to configure the custom styles.

For example:

1import nb_navigation_flutter
2
3@UIApplicationMain
4@objc class AppDelegate: FlutterAppDelegate {
5    override func application(
6        _ application: UIApplication,
7        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
8    ) -> Bool {
9        GeneratedPluginRegistrant.register(with: self)
10        customStyle()
11        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
12    }
13    
14    func customStyle() {
15
16//Customize the style for daytime mode
17
18        customDayStyle.arrivalTimeLabelFont = UIFont.systemFont(ofSize: 28, weight: .medium).adjustedFont
19        customDayStyle.trafficUnknownColor = UIColor.red
20        customDayStyle.mapStyleURL = URL(string: lightStyleUrl)!
21
22//Customize the style for nighttime mode
23
24        customNightStyle.trafficUnknownColor = UIColor.green
25        customNightStyle.mapStyleURL = URL(string: darkStyleUrl)!
26        …
27        //Customize your navigation style
28    }
29}

Use the customDayStyle and customNightStyle properties to define your custom styles for day and night themes, respectively. You can customize various attributes such as fonts, colors, and other visual elements as per your app's design guidelines.

Within the customStyle function, specific attributes of the daytime navigation style are configured. Developers have the freedom to customize various visual elements, such as the font for the arrival time label, the color representation for unknown traffic conditions, and most importantly, the map style itself.

1. arrivalTimeLabelFont: This property allows you to set the font and weight for the arrival time label displayed on the navigation interface during the daytime mode.

2. trafficUnknownColor: Developers can define a custom color (e.g., red) to represent unknown traffic conditions, enhancing user comprehension of varying road situations.

3. mapStyleURL: The URL of the custom map style is specified here using the URL class. The provided URL should point to a JSON file defining the visual characteristics of the map, including colors, icons, and more.