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 #

• Simple compass
• Compass with values
• Qiblah compass

Support #

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