MapView Style

introduction

This Example Shows:

• Display a MapView Widget
• Update mapview style by setting the styleString in NBMap Widget

Android snapshot	iOS snapshot

For all code examples, refer to Flutter Navigation Code Example

MapViewStyle view source

1
import 'package:flutter/material.dart';
2
import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
3

4
class MapViewStyle extends StatefulWidget {
5
  static const String title = "MapView Style";
6

7
  const MapViewStyle({super.key});
8

9
  @override
10
  MapViewStyleState createState() => MapViewStyleState();
11
}
12

13
class MapViewStyleState extends State<MapViewStyle> {
14
  NextbillionMapController? controller;
15
  var isLight = true;
16

17
  void _onMapCreated(NextbillionMapController controller) {
18
    this.controller = controller;
19
  }
20

21
  void _onStyleLoaded() {}
22

23
  @override
24
  void initState() {
25
    super.initState();
26
  }
27

28
  @override
29
  Widget build(BuildContext context) {
30
    return Scaffold(
31
      appBar: AppBar(
32
        title: const Text(MapViewStyle.title),
33
      ),
34
      floatingActionButton: Padding(
35
        padding: const EdgeInsets.all(32.0),
36
        child: FloatingActionButton(
37
          child: const Icon(Icons.swap_horiz),
38
          onPressed: () => setState(
39
            () => isLight = !isLight,
40
          ),
41
        ),
42
      ),
43
      body: Stack(
44
        children: [
45
          NBMap(
46
            onMapCreated: _onMapCreated,
47
            initialCameraPosition: const CameraPosition(
48
              target: LatLng(1.312533169133601, 103.76986708439264),
49
              zoom: 13.0,
50
            ),
51
            onStyleLoadedCallback: _onStyleLoaded,
52
            styleString: isLight ? NbMapStyles.LIGHT : NbMapStyles.DARK,
53
          ),
54
        ],
55
      ),
56
    );
57
  }
58

59
  @override
60
  void dispose() {
61
    super.dispose();
62
  }
63
}
64

Code summary

The above code snippet demonstrates how to display a map view widget using nb_maps_flutter and how to update the map view style dynamically between light and dark modes.

Display a MapView Widget:

• The MapViewStyle widget is the main entry point of the application.

• The _onMapCreated function is called when the map is created, and it sets the map controller to be used for controlling the map.

• The NBMap widget from the nb_maps_flutter package is used to display the map. It is positioned in a Stack widget along with the "FloatingActionButton" widget.

Update MapView Style:

• The isLight variable is used to determine whether the map view style should be light or dark. It is initially set to true, indicating the light mode.

• A "FloatingActionButton" is provided at the bottom right corner of the screen, allowing the user to toggle between light and dark styles by pressing the "swap_horiz" icon.

• When the FloatingActionButton is pressed, the setState function is called to update the isLight variable, toggling it between true and false.

• The styleString property of the NBMap widget is used to set the map view style. If isLight is true, the light style is applied (NbMapStyles.LIGHT), otherwise, the dark style is applied (NbMapStyles.DARK).

When the app is launched, it displays a map view with the initial light mode. When the "FloatingActionButton" is pressed, the map view style toggles between light and dark modes dynamically. Please ensure that you have the necessary permissions and API keys set up to use the mapping services properly.