UI controls

Map

All SDK distributions contain a standard set of UI controls for operating the map. You can add it to your layout and use it to manage map parameters.

The standard set contains the following controls:

  

1. IndoorWidget to switch floors.
2. TrafficWidget to manage the visibility of traffic jams on the map.
3. ZoomWidget to scale the map (zoom in and out).
4. CompassWidget to display the current map rotation angle relative to the north.
5. MyLocationWidget to fly to the current user location.
6. In development.
7. In development.
8. In development.

Navigator

The full SDK distribution contains a set of UI controls for displaying and managing navigation. All elements can be used as MapWidget children at any nesting levels.

The navigation set contains the following controls:

 

1. TrafficLineWidget to display the traffic jam level on route.
2. ManeuverWidget to display information about the next maneuver.
3. SpeedLimitWidget to display the current speed and the speed limit.
4. NavigationTrafficWidget and NavigationParkingWidget to manage the visibility of traffic jams and parking lots on the map respectively.
5. NavigationZoomWidget to scale the map (zoom in and out).
6. NavigationCompassWidget to display the current map rotation angle relative to the north.
7. NavigationMyLocationWidget to manage the following of the location marker.
8. DashboardWidget to display information in the turn-by-turn mode.

  

9. DashboardWidget to display information in the free-drive mode.
10. DashboardWidget to display information in the indoor navigation mode.

Directory

DgisSearchWidget is a component that provides an interactive search bar and a list of results. It is part of both full and map versions of the SDK. To add the DgisSearchWidget component to the layout, follow the steps below:

You can additionally configure the display of search results (resultBuilder parameter) and change the color scheme (colorScheme parameter):

DgisSearchWidget(
  colorScheme: const sdk.SearchWidgetColorScheme(
    searchBarBackgroundColor: Colors.transparent,
    searchBarTextFieldColor: Colors.white,
    objectCardTileColor: Colors.white,
    objectCardHighlightedTextStyle: TextStyle(),
    objectCardNormalTextStyle: TextStyle(),
    objectListSeparatorColor: Colors.lightBlue,
    objectListBackgroundColor: Colors.white,
  ),
  searchManager: searchManager,
  resultBuilder: (context, objects) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          final item = objects[index];

          return item.fold(
            // Handle search results (DirectoryObject)
            (directoryObject) {
              return ListTile(
                title: Text(directoryObject.title),
                subtitle: Text(directoryObject.subtitle),
                onTap: () {
                  // Handle directory object selection
                  print('Selected: ${directoryObject.title}');
                },
              );
            },
            // Handle search suggestions
            (suggest) {
              return ListTile(
                title: Text(suggest.title.text),
                subtitle: Text(suggest.subtitle.text),
                onTap: () {
                  if (suggest.handler.isObjectHandler) {
                    final item =
                        suggest.handler.asObjectHandler!.item;
                    print('Selected object: ${item.title}');
                  } else if (suggest
                      .handler.isIncompleteTextHandler) {
                    final queryText = suggest
                        .handler.asIncompleteTextHandler!.queryText;
                    print('Complete search with: $queryText');
                  } else if (suggest.handler.isPerformSearchHandler) {
                    final searchQuery = suggest
                        .handler.asPerformSearchHandler!.searchQuery;
                    print('Perform search query');
                  }
                },
              );
            },
          );
        },
        childCount: objects.length,
      ),
    );
  },
)