Smooth Compass New

An updated version of Smooth Compass

Customizable Flutter package to show smooth compass rotation and Qiblah direction using device motion sensors.


CompassView with default UI	QiblahCompass with custom builder

Features

Lightweight, easy-to-use API
Prebuilt compass and Qiblah widgets
Smooth rotation with shortest-path interpolation
Simple custom builder for full UI control
Qiblah bearing calculation built-in
Error widget for location/permission handling

Installation

Add the following line to your pubspec.yaml:

dependencies:
  smooth_compass_new: ^0.0.4

Examples

Make sure to check out examples

iOS

Add the following keys with appropriate descriptions in your Info.plist:

NSLocationWhenInUseUsageDescription
NSLocationAlwaysAndWhenInUseUsageDescription

Android

Add permissions in app/src/main/AndroidManifest.xml:

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

Basic setup

1. Qiblah Bearing

final bearing = Qiblah.bearingToKaaba(
  latitude: 24.8607,
  longitude: 67.0011,
);
print('Qiblah direction: $bearing°');

2. Default Compass

CompassView(
  headingStream: FlutterCompass.events!,
  decoration: CompassDecoration(), // optional, provides a ready-made dial + needle
  size: 250,
)

3. Qiblah Compass

QiblahCompass(
  latitude: 24.8607,
  longitude: 67.0011,
  headingStream: FlutterCompass.events!,
  decoration: CompassDecoration(), // optional default dial
  size: 250,
)

4. Custom UI with Builder

CompassView(
  headingStream: FlutterCompass.events!,
  size: 300,
  builder: (context, heading) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Image.asset("assets/images/compass.png", fit: BoxFit.cover),
        Transform.rotate(
          angle: heading * pi / 180,
          child: Icon(Icons.navigation, size: 60, color: Colors.red),
        ),
      ],
    );
  },
)

5. Error Handling

SimpleErrorWidget(
  message: "Location permission denied",
  onRetry: () => requestPermission(),
  buttonStyle: ErrorButtonStyle(
    buttonColor: Colors.red,
    textColor: Colors.white,
    buttonWidth: 150,
    buttonHeight: 40,
  ),
)

Video Tutorials

Support

For any queries or issues, contact:
📧 fadiktk000@gmail.com