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 NavStyleManager to configure the custom styles. You can create custom styles for both day and night modes by subclassing the provided style classes.

Create Custom Style Classes

To customize the navigation styles, you need to create your own classes that inherit from DayStyle and NightStyle. In these classes, you will define the appearance of various UI elements.

Example: Custom Day Style and Night Style

1
import NbmapNavigation
2

3
class CustomDayStyle: DayStyle {
4
    required init() {
5
        super.init()
6
        // Set the map style URL for the day mode
7
        mapStyleURL = URL(string: "https://api.nextbillion.io/tt/style/1/style/22.2.1-9?map=2/basic_street-light")!
8
    }
9
    
10
    override func apply() {
11
        super.apply()
12
        // Customize UI elements for day mode
13
        ArrivalTimeLabel.appearance().font = UIFont.systemFont(ofSize: 18, weight: .medium).adjustedFont
14
        ArrivalTimeLabel.appearance().normalTextColor = .defaultPrimaryText
15
        // Add more customizations as needed...
16
    }
17
}
18

19
class CustomNightStyle: NightStyle {
20
    required init() {
21
        super.init()
22
        // Set the map style URL for the night mode
23
        mapStyleURL = URL(string: "https://api.nextbillion.io/tt/style/1/style/22.2.1-9?map=2/basic_street-dark")!
24
    }
25
    
26
    override func apply() {
27
        super.apply()
28
        // Customize UI elements for night mode
29
        NavigationMapView.appearance().trafficUnknownColor = UIColor.green
30
        // Add more customizations as needed...
31
    }
32
}

Apply Custom Styles

Once you have defined your custom styles, you need to apply them in your application. This is typically done in your app's initialization code.

Example: Applying Custom Styles

1
import nb_navigation_flutter
2

3
func customStyle() {
4
    NavStyleManager.customDayStyle = CustomDayStyle()
5
    NavStyleManager.customNightStyle = CustomNightStyle()
6
}
7

8
@UIApplicationMain
9
@objc class AppDelegate: FlutterAppDelegate, UINavigationControllerDelegate {
10
    override func application(
11
        _ application: UIApplication,
12
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
13
    ) -> Bool {
14
        GeneratedPluginRegistrant.register(with: self)
15
        customStyle()        
16
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
17
    }

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.

By inheriting from DayStyle and NightStyle, specific attributes of the daytime and nighttime 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.

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.
trafficUnknownColor: Developers can define a custom color (e.g., red) to represent unknown traffic conditions, enhancing user comprehension of varying road situations.
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.