smooth_compass 2.0.17

smooth compass with animated rotation and custom widgets support for both(android and ios)

Smooth Compass

Customizable flutter package to find direction using device motion sensors.

SmoothCompass with default Widget	SmoothCompass with custom Widget

Features

• Extensive, yet easy to use
• Preconfigured UI and custom UI support
• Custom builder
• Smooth Rotation
• Values in degrees
• (NEW) Qiblah angle

Installation

Add the following line to pubspec.yaml:

dependencies:
  smooth_compass: ^2.0.17

Examples

Make sure to check out examples

Video Tutorials

• Simple compass
• Simple compass with direction values
• Qiblah compass

iOS

Make sure to add keys with appropriate descriptions to the Info.plist file.

• NSLocationWhenInUseUsageDescription
• NSLocationAlwaysAndWhenInUseUsageDescription

Android

Make sure to add permissions to the app/src/main/AndroidManifest.xml file.

• android.permission.INTERNET
• android.permission.ACCESS_COARSE_LOCATION
• android.permission.ACCESS_FINE_LOCATION

Basic setup

The complete example is available here.

SmoothCompass provide compassBuilder which returns:

• degrees is the directional value.
• turns is the value for compass rotation.
• compassAsset the (default) widget for compass or the Widget passed in compassAsset
• qiblahOffset returns the qiblah angle for the current location

SmoothCompass Optional Arguments Height, Width, Duration, isQiblahCompass and compassAsset:

• compassAsset is the customizable widget for compass. if not provider default will shown.
• isQiblahCompass must be provided, if you want to find the qiblah angle for current location, the default qiblah value will be 0.

Default Widget:

  SmoothCompass(
   //higher the value of rotation speed slower the rotation
    rotationSpeed: 200,
    height: 300,
    width: 300,
)

Custom Widget:

SmoothCompass(
  rotationSpeed: 200,
  height: 300,
  width: 300,
  compassAsset: CustomWidget(),
)

Customize Error Button and Permissions message:

SmoothCompass(
  height: 300,
  width: 300,
  isQiblahCompass: true,
  
  //need to customize if isQiblahCompass set to true
  //customize error message and error button style here
  errorDecoration: ErrorDecoration(
    spaceBetween: 20,
    permissionMessage: PermissionMessage(
    denied: "location permission is denied",
    permanentlyDenied: "location permission is permanently denied",
  ),
  buttonStyle: ErrorButtonStyle(
    borderRadius: BorderRadius.circular(10),
    buttonColor: Colors.red,
    textColor: Colors.white,
    buttonHeight: 40,
    buttonWidth: 150
  ),
  messageTextStyle: const TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontSize: 18
  )
  ),
)

Custom Widget with qiblah:

SmoothCompass(
  height: 200,
  width: 200,
  isQiblahCompass: true,
  compassBuilder: (context,snapshot,child){
    return  AnimatedRotation(
      duration: const Duration(milliseconds:800),
      turns: snapshot?.data?.turns??0,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child:Image.asset("assets/images/compass.png",fit: BoxFit.fill,),
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child:AnimatedRotation(
              duration: const Duration(milliseconds: 500),
              turns: (snapshot?.data?.qiblahOffset??0)/360,
              //Place your qiblah needle here
              child: Container(
                decoration: const BoxDecoration(
                shape: BoxShape.circle,),
                child: const VerticalDivider(
                  color: Colors.grey,
                  thickness: 5,),
              )
            ),
          ),
        ],
      ),
    );
  },
)

Support

for any queries or issue contact at:

• [e-mail]
• [e-mail]