Bluetooth is a type of functionality that provides access in and for other electronic devices, In the app world it is the most reliable wireless tool which provides access to other devices and it also gives free cost service because it is an inbuilt feature of the most mobile and other electronic devices. However, now some devices like mobile phones are out there without Bluetooth because their developers prefer to rely on the internet instead of Bluetooth for any kind of connectivity. In this era of digitalization when the internet is cheaper than food and every electronic device is becoming internet processed device but Bluetooth is still reliable functionality for connectivity.

In this example, we are going to use flutter_blue package to implement Bluetooth functionality in our app

Implementation

Adding FlutterBlue package into in the Flutter. First, you need to add this package in pubspec.yaml

flutter_blue:

Importing FlutterBlue Dependency package into the flutter Dart Code:

import 'package:flutter_blue/flutter_blue.dart';

Now when you are using this flutter plugin then you need to access it from the library and for this, you need to create an instance of it, so we do this by writing this code

FlutterBlue flutterBlueInstance  = FlutterBlue.instance;

there are different parts while you are making a connection with the device and theses steps are scanning device, discovering device, connecting device, reading, and writing characteristic and also implementing notification setting into your app.

for all these processes there is a set of code and it is a kind of boilerplate because you need to write exactly as it is for different steps mentioned above

so let’s see how can we implement these steps in our app

Scanning Device

// this line will start scanning bluetooth devices
var scanDevices = flutterBlue.scan().listen((scanResult) {
});

// this line will stop scanning bluetooth devices
scanDevices.cancel();

after scanning all the devices you need to connect your device with the scanned device and you can do this by using this

Connect to a Bluetooth device

// need to create connection for device
var deviceConnection = flutterBlue.connect(device).listen((s) {
if(scan  == BluetoothDeviceState.connected) {
// now device is connected you can perform your action 
}
});

// it will disconnect your device 
deviceConnection.cancel();

Searching Bluetooth services

List<BluetoothService> services = await device.discoverServices();
services.forEach((service) {
// perform action with services 
});

Reading and writing characteristics

// Reads all characteristics
var characteristics = service.characteristics;
for(BluetoothCharacteristic c in characteristics) {
List<int> value = await device.readCharacteristic(c);
print(value);
}

// Writes to a characteristic
await device.writeCharacteristic(c, [0x12, 0x34])

Reading and writing descriptors

// Reads all descriptors
var descriptors = characteristic.descriptors;
for(BluetoothDescriptor d in descriptors) {
List<int> value = await device.readDescriptor(d);
print(value);
}

// Writes to a descriptor
await device.writeDescriptor(d, [0x12, 0x34])

Setting notifications

await device.setNotifyValue(characteristic, true);
device.onValueChanged(characteristic).listen((value) {
// do something with new value
});

so these are one of the key methods and by using these you can make your app rich in functionality.

This Flutter blue plugin is having some functionalities which are platform-specific for example

Read the MTU and request a larger size

final mtu = await device.mtu.first;
await device.requestMtu(512);

Note that iOS will not allow requests of MTU size, and will always try to negotiate the highest possible MTU (iOS supports up to MTU size 185)

Flutter_blue has some references these references indicate which functionality is available for Android, iOS, or for both and it has been clearly instructed by the Flutter_blue team so before going over implementation you must go through this section.

while implementing all these methods you must set your minimum SDK version 19

References

Scanning for service UUID’s doesn’t return any results

One thing which you need to focus on the device is advertising which type of service UUID’s support, there are some advertisement packets like UUID 16 bit and UUID 128 bit.

here in the given images, you can see how at first step device is scanning all available devices and how it is showing all its notification.

you can find the full source code here

flutter-devs/flutter_bluetooth
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Conclusion

This Flutter_blue package provides a good milieu to implement all your required functionalities whether it is connecting with mobile devices, electronic devices, or IoT devices, It fits in all works for all and is compatible with all. You will get an awesome experience with its implementation.

Note: In some blogs, it has been written that you need to make some changes to info.plist(for iOS) and in the manifest file(for android) but you don’t need to do that. It works fine with any changes in these files.

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

What we will build ::

Before starting the blog let me tell you what you can learn from this blog/article:-

1. You learn how to implement Google-Maps in your flutter app using flutter_google_maps package.
2. How to fetch the live Geo-coordinates of the user location using location package.
3. How to implement light and dark mode in google maps.
4. How to move the maps camera bound form one geo-coord to another.
5. You will learn how to add markers, polygons, directions, information about any geo-coord , displaying a dialog box containing information about the geo-coord ,clear polygon, direction, markers, etc.
6. You will learn how to implement functionality into your flutter app, how to work with multiple packages.

Demo of our app: —

Introduction

Google Maps is a mapping service developed by Google. This tool provides us a lot of features that we can use in our daily lifestyle. Google Maps is highly effective and fast, provides us a lot of information in realtime.

Key Features:

• :: Provide realtime information about traffic
• :: Provide all possible routes between two points
• :: Calculate accurate distance between two points
• :: Provides us additional information about the location in which we are interested
• :: Stores our travel history
• :: Controls two-third of the online navigation market
• :: Shopping app and websites actively uses maps to fasten their delivery process
• :: Maps is highly used as a marketing tool

Table of content :

1. Setting up project
2. Install Packages
3. Initialize Google maps
4. Get the live location
5. Displaying the google_map on screen
6. Adding Widgets to implement functionality
7. GitHub Link

Setting up Project :

1. Follow the steps give in the documentation:

flutter_google_maps | Flutter Package
A Flutter plugin for integrating Google Maps in iOS, Android, and Web applications. It is a wrapper of…pub.dev

Do not forget to specify the API key in your android/app/src/main/AndroidManifest.xml file.

2. Add the location permission into the AndroidManifest.xml manifest outside of the application tag.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

3. Update your build.gradle file dependencies to this

dependencies {
      classpath 'com.android.tools.build:gradle:3.3.0'
      classpath 'com.google.gms:google-services:4.2.0'
  }

4. minSdkVersion 21

Note: Last Two steps are used for location: package

Installing Package:

Install the following package:

flutter_google_maps | Flutter Package
A Flutter plugin for integrating Google Maps in iOS, Android, and Web applications. It is a wrapper of…pub.dev

location | Flutter Package
This plugin for Flutter handles getting a location on Android and iOS. It also provides callbacks when location is…pub.dev

hawk_fab_menu | Flutter Package
A floating action button menu that will pop up small fabs on top Add dependency in pubspec.yaml: hawk_fab_menu: ^0.2.2…pub.dev

Import package :

import 'package:flutter_google_maps/flutter_google_maps.dart';
import 'package:hawk_fab_menu/hawk_fab_menu.dart';
import 'package:location/location.dart';

Initialize Google maps :

Inside the main function, intit("your key") method is used to initialize the Google Map API.

void main() {
  GoogleMap.init('your key');
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

Get the live location:

To get the live location we will use the location package.

location | Flutter Package
This plugin for Flutter handles getting a location on Android and iOS. It also provides callbacks when the location is…pub.dev

getLocation() is a method used to get the live latitude and longitude . longitude , latitude are two variables used to store the geo-coordinates. getLocation is a method inside the Location() class which provides us the geo-coordinates. userLocation is used to provide the access the longitude ,latitude . We have used the try and catch method to display the error message if there is an error.

Future getLocation() async {
  try {
    var userLocation = await Location().getLocation();
    setState(() {
      longitude = userLocation.longitude;
      latitude = userLocation.latitude;
    });
  } on Exception catch (e) {
    print('Could not get location: ${e.toString()}');
  }
}
double latitude;
double longitude;

Initializing the getLocation()

@override
void initState() {
  getLocation();
  super.initState();
}

Displaying the google_map on screen:

initializing Global keys

final _scaffoldKey = GlobalKey<ScaffoldState>();
final key = GlobalKey<GoogleMapStateBase>();

google map

flutter_google_maps provides us GoogleMap() widgets to display the map view on the screen. This widget has lots of properties that can be used to customize the map view. markers is the list of Marker() , used to display the markers on the screen. initialZoom is the initial zoom of the maps camera. initialPosition is the initial position of the map. It takes GeoCoord() widget. mapType specify the type of map type. mapStyle is the color combination of the map. Here I have added a functionality when the user will click on the map at any position the marker will we added to the map at that particular location.

onTap: (geo) {
    setState(() {
      longitude = geo.longitude;
      latitude = geo.latitude;
    });
    _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text(geo?.toString()),
      duration: const Duration(seconds: 2),
    ));
    GoogleMap.of(key)
        .addMarkerRaw(GeoCoord(latitude, longitude));
    polygon.add(GeoCoord(latitude, longitude));
  },

To do this we will need the coordinates of the point at which the user will click, so need to change the latitude ,longitude . Whenever the user clicks the screen snakeBar is also displayed that shows the values of geo-coord. Also to display the polygon we need some points that is why we used polygon.add(GeoCoord(latitude, longitude)); here polygon is the list of GeoCoord . To display the marker, GoogleMap class provides us addMarkerRaw() method.

GoogleMap(
  key: key,
  markers: {
    Marker(
      GeoCoord(latitude, longitude),
    ),
  },
  initialZoom: 12,
  initialPosition: GeoCoord(latitude, longitude),
  mapType: _mapType == null ? MapType.roadmap : _mapType,
  mapStyle: _mapStyle,
  interactive: true,
  onTap: (geo) {
    setState(() {
      longitude = geo.longitude;
      latitude = geo.latitude;
    });
    _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text(geo?.toString()),
      duration: const Duration(seconds: 2),
    ));
    GoogleMap.of(key)
        .addMarkerRaw(GeoCoord(latitude, longitude));
    polygon.add(GeoCoord(latitude, longitude));
  },
  mobilePreferences: const MobileMapPreferences(
      trafficEnabled: true, zoomControlsEnabled: false),
  webPreferences: WebMapPreferences(
    fullscreenControl: true,
    zoomControl: true,
  ),
),

Adding Widgets to implement functionality :

Screen Widgets

Changing the style of the map:

To change the style of the map I have used a CircleAvatar on the left of the screen, on tapping it displays a Dialog Box that shows the list of the type of the style of the map. On pressing any style it will change the map style.

List<MapType> mapType = [
  MapType.hybrid,
  MapType.roadmap,
  MapType.satellite,
  MapType.terrain,
  MapType.none,
];
MapType _mapType ;
List<String> mapTypeName = [
  "Hybrid",
  "Roadmap",
  "Satellite",
  "Terrain",
  "None"
];

The above variables are used to implement the functionality.

Positioned(
    top: 15,
    right: 20,
    child: InkWell(
      onTap: () {
        showDialog(
            context: context,
            builder: (_) {
              return AlertDialog(
                title: Text("Map Style"),
                content: Container(
                  height: mapType.length * 64.0,
                  width: 100,
                  child: ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return Card(
                        child: ListTile(
                          title: Text(mapTypeName[index]),
                          onTap: () {
                            setState(() {
                              _mapType = mapType[index];
                            });
                            Navigator.of(context).pop();
                          },
                        ),
                      );
                    },
                    itemCount: mapType.length,
                  ),
                ),
                actions: <Widget>[
                  FlatButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text("CANCEL"),
                  )
                ],
              );
            });
      },
      child: CircleAvatar(
        radius: 25,
        backgroundColor: Colors.white,
        child: Icon(
          Icons.filter_none,
          color: Colors.blue,
        ),
      ),
    ))

Edit menu

To display the edit menu I have used an animated floatingActionButton .

body: HawkFabMenu(
  items: [
    HawkFabMenuItem(
      label: 'Add Polygon',
      ontap: () {
      },
      icon: Icon(
        Icons.crop_square,
      ),
    ),
    HawkFabMenuItem(
      label: 'Info Demo',
      ontap: () {
      },
      icon: Icon(Icons.pin_drop),
    ),
    HawkFabMenuItem(
      label: 'Directions',
      ontap: () {
      },
      icon: Icon(Icons.directions),
    ),
  ],
  body: _body
    ],
   ),
));

Add Polygon :

addPolygon() is a method that makes id and a List of GeoCoord() that connect each other to display a polygon on the map screen. editPolygon is used to edit the polygon.

ontap: () {
  if (!_polygonAdded) {
    GoogleMap.of(key).addPolygon(
      '1',
      polygon,
      onTap: (polygonId) async {
        await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            content: Text(
              'This dialog was opened by tapping on the polygon!\n'
              'Polygon ID is $polygonId',
            ),
            actions: <Widget>[
              FlatButton(
                onPressed: Navigator.of(context).pop,
                child: Text('CLOSE'),
              ),
            ],
          ),
        );
      },
    );
  } else {
    GoogleMap.of(key).editPolygon(
      '1',
      polygon,
      fillColor: Colors.purple,
      strokeColor: Colors.purple,
    );
  }

  setState(() => _polygonAdded = true);
},

Information Demo :

ontap: () {
  GoogleMap.of(key).addMarkerRaw(
    GeoCoord(latitude, longitude),
    info: 'test info',
    onInfoWindowTap: () async {
      await showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text("Palace Info..."),
          content:
              Text('Latitude:$latitude\nLongitude:$longitude'),
          actions: <Widget>[
            FlatButton(
              onPressed: Navigator.of(context).pop,
              child: Text('CLOSE'),
            ),
          ],
        ),
      );
    },
  );

},

Directions :

ontap: () {
  GoogleMap.of(key).addDirection(
    'San Francisco, CA',
    'San Jose, CA',
    startLabel: '1',
    startInfo: 'San Francisco, CA',
    endIcon:
        'https://cdn0.iconfinder.com/data/icons/map-markers-2-1/512/xxx018-512.png',
    endInfo: 'San Jose, CA',
  );
},

Drawer

Light and dark mode :

To change the theme of the map GoogleMap class provides us changeMapStyle() method to change the style of the map. _darkMapStyle is a bool variable used to change the state of text, icon, and map style.

 ListTile(
  leading: Icon(
    Icons.wb_sunny,
    color: _darkMapStyle ? Colors.deepOrange : Colors.black,
  ),
  onTap: () {
    Navigator.of(context).pop();
    if (_darkMapStyle) {
      GoogleMap.of(key).changeMapStyle(null);
      _mapStyle = null;
    } else {
      GoogleMap.of(key).changeMapStyle(darkMapStyle);
      _mapStyle = darkMapStyle;
    }

    setState(() => _darkMapStyle = !_darkMapStyle);
  },
  title:
      Text(_darkMapStyle ? "Enable Light Mode" : "Enable Dark Mode"),
),

Move Camera Bound :

moveCameraBounds is a method used to move the maps camera from one

geo-coord to anothergeo-coord . It takes GeoCoordBounds() that is used to specify thenortheast, and southwest GeoCoord() . We are also displaying a marker on the specified location.

ListTile(
  title: Text("Move camera bound"),
  leading: Icon(
    Icons.camera_enhance,
    color: Colors.red,
  ),
  onTap: () {
    Navigator.of(context).pop();
    final bounds = GeoCoordBounds(
      northeast: GeoCoord(34.021307, -117.432317),
      southwest: GeoCoord(33.835745, -117.712785),
    );
    GoogleMap.of(key).moveCameraBounds(bounds);
    GoogleMap.of(key).addMarkerRaw(
      GeoCoord(
        (bounds.northeast.latitude + bounds.southwest.latitude) / 2,
        (bounds.northeast.longitude + bounds.southwest.longitude) / 2,
      ),
      onTap: (markerId) async {
        await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            content: Text(
              'This dialog was opened by tapping on the marker!\n'
              'Marker ID is $markerId',
            ),
            actions: <Widget>[
              FlatButton(
                onPressed: Navigator.of(context).pop,
                child: Text('CLOSE'),
              ),
            ],
          ),
        );
      },
    );
  },
),

Clear Polygon :

clearPolygons() method clear all the drawn polygon on the map screen. polygon list is set to [] so that it also clear when all polygons are cleared.

ListTile(
  title: Text("Clear Polygons"),
  leading: Icon(
    Icons.crop_square,
    color: Colors.blue,
  ),
  onTap: () {
    GoogleMap.of(key).clearPolygons();
    Navigator.of(context).pop();
    setState(() {
      polygon = [];
      _polygonAdded = false;
    });
  },
),

Clear Marker :

clearMarker() method is used to clear all the markers from the maps.

ListTile(
  title: Text("Clear Markers"),
  leading: Icon(
    Icons.location_off,
    color: Colors.green,
  ),
  onTap: () {
    GoogleMap.of(key).clearMarkers();
    Navigator.of(context).pop();
  },
),

Clear Direction :

clearDirection()is used to clear all the directions from the map.

ListTile(
  title: Text("Clear Directions"),
  leading: Icon(
    Icons.directions,
    color: Colors.orangeAccent,
  ),
  onTap: () {
    GoogleMap.of(key).clearDirections();
    Navigator.of(context).pop();
  },
),

Github Link

flutter-devs/google_maps_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

If you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.