🚀 Release 1.13.84-beta qibla compass #12

lib/views/Qibla part/location_error_widget.dart

@@ -0,0 +1,45 @@
+
+import 'package:flutter/material.dart';
+
+class LocationErrorWidget extends StatelessWidget {
+  final String error;
+  final Function callback;
+
+  const LocationErrorWidget({Key key, this.error, this.callback})
+      : super(key: key);
+
+
+  @override
+  Widget build(BuildContext context) {
+    final box = SizedBox(height: 32);
+    final errorColor = Color(0xffb00020);
+
+    return Container(
+      child: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Icon(
+              Icons.location_off,
+              size: 150,
+              color: errorColor,
+            ),
+            box,
+            Text(
+              error,
+              style: TextStyle(
+                  color: errorColor, fontWeight: FontWeight.bold),
+            ),
+            box,
+            RaisedButton(
+              child: Text("Retry"),
+              onPressed: () {
+                if (callback != null) callback();
+              },
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/views/Qibla part/qibla.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_qiblah/flutter_qiblah.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:waktusolatmalaysia/utils/launchUrl.dart';
+import 'package:waktusolatmalaysia/views/Qibla%20part/qibla_compass.dart';
+
+class Qibla extends StatefulWidget {
+  @override
+  _QiblaState createState() => _QiblaState();
+}
+
+class _QiblaState extends State<Qibla> {
+  final _deviceSupport = FlutterQiblah.androidDeviceSensorSupport();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Qibla Compass'),
+        centerTitle: true,
+      ),
+      body: FutureBuilder(
+        future: _deviceSupport,
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.waiting)
+            return Center(
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+              ),
+            );
+
+          if (snapshot.hasError)
+            return Center(
+              child: Text('Error: ${snapshot.error.toString()}'),
+            );
+          if (snapshot.hasData)
+            return QiblaCompass();
+          else
+            return Container(
+              child: Text('Error'),
+            );
+        },
+      ),
+    );
+  }
+}
+
+Widget compassActionButton(BuildContext context) {
+  return Row(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      OutlineButton(
+        onPressed: () {
+          LaunchUrl.normalLaunchUrl(
+              url: 'https://g.co/qiblafinder', useCustomTabs: true);
+        },
+        onLongPress: () {
+          Clipboard.setData(ClipboardData(text: 'g.co/qiblafinder'))
+              .then((value) => Fluttertoast.showToast(msg: 'URL copied :)'));
+        },
+        highlightedBorderColor: Colors.teal,
+        child: Row(
+          children: [
+            Text('Google Qiblafinder'),
+            SizedBox(width: 8),
+            FaIcon(FontAwesomeIcons.externalLinkAlt, size: 13)
+          ],
+        ),
+      ),
+      SizedBox(width: 10),
+      OutlineButton(
+        onPressed: () => _showCalibrateCompassDialog(context),
+        // onPressed: null,
+        highlightedBorderColor: Colors.teal,
+        child: Text('Calibrating tip'),
+      )
+    ],
+  );
+}
+
+void _showCalibrateCompassDialog(BuildContext context) {
+  showDialog(
+    context: context,
+    builder: (context) {
+      return Dialog(
+        insetPadding: const EdgeInsets.all(10),
+        child: Container(
+          padding: const EdgeInsets.all(12.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                'Move your phone in "figure 8 pattern".',
+                style: TextStyle(fontSize: 16),
+              ),
+              Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: SvgPicture.asset(
+                  'assets/qibla/compass callibrate.svg',
+                  color: Theme.of(context).brightness == Brightness.dark
+                      ? Colors.white
+                      : Colors.black87,
+                  height: 230,
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+    },
+  );
+}

lib/views/Qibla part/qibla_compass.dart

@@ -0,0 +1,144 @@
+import 'dart:async';
+import 'dart:math' show pi;
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_qiblah/flutter_qiblah.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:waktusolatmalaysia/views/Qibla%20part/location_error_widget.dart';
+import 'package:waktusolatmalaysia/views/Qibla%20part/qibla.dart';
+
+class QiblaCompass extends StatefulWidget {
+  @override
+  _QiblaCompassState createState() => _QiblaCompassState();
+}
+
+class _QiblaCompassState extends State<QiblaCompass> {
+  final _locationStreamController =
+      StreamController<LocationStatus>.broadcast();
+
+  get stream => _locationStreamController.stream;
+
+  @override
+  void initState() {
+    _checkLocationStatus();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: Alignment.center,
+      padding: const EdgeInsets.all(8.0),
+      child: StreamBuilder(
+        stream: stream,
+        builder: (context, AsyncSnapshot<LocationStatus> snapshot) {
+          if (snapshot.connectionState == ConnectionState.waiting)
+            return CupertinoActivityIndicator();
+          if (snapshot.data.enabled == true) {
+            switch (snapshot.data.status) {
+              case LocationPermission.always:
+              case LocationPermission.whileInUse:
+                return QiblahCompassWidget();
+
+              case LocationPermission.denied:
+                return LocationErrorWidget(
+                  error: "Location service permission denied",
+                  callback: _checkLocationStatus,
+                );
+              case LocationPermission.deniedForever:
+                return LocationErrorWidget(
+                  error: "Location service Denied Forever !",
+                  callback: _checkLocationStatus,
+                );
+              // case GeolocationStatus.unknown:
+              //   return LocationErrorWidget(
+              //     error: "Unknown Location service error",
+              //     callback: _checkLocationStatus,
+              //   );
+              default:
+                return Container();
+            }
+          } else {
+            return LocationErrorWidget(
+              error: "Please enable Location service",
+              callback: _checkLocationStatus,
+            );
+          }
+        },
+      ),
+    );
+  }
+
+  Future<void> _checkLocationStatus() async {
+    final locationStatus = await FlutterQiblah.checkLocationStatus();
+    if (locationStatus.enabled &&
+        locationStatus.status == LocationPermission.denied) {
+      await FlutterQiblah.requestPermissions();
+      final s = await FlutterQiblah.checkLocationStatus();
+      _locationStreamController.sink.add(s);
+    } else
+      _locationStreamController.sink.add(locationStatus);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _locationStreamController.close();
+    FlutterQiblah().dispose();
+  }
+}
+
+class QiblahCompassWidget extends StatelessWidget {
+  final _kaabaSvg = SvgPicture.asset('assets/qibla/kaaba.svg');
+
+  @override
+  Widget build(BuildContext context) {
+    var _platformBrightness = Theme.of(context).brightness;
+    return StreamBuilder(
+      stream: FlutterQiblah.qiblahStream,
+      builder: (_, AsyncSnapshot<QiblahDirection> snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting)
+          return CupertinoActivityIndicator();
+
+        final qiblahDirection = snapshot.data;
+        var _angle = ((qiblahDirection.qiblah ?? 0) * (pi / 180) * -1);
+
+        // if (_angle < 5 && _angle > -5) print('IN RANGE');
+
+        return Stack(
+          alignment: Alignment.center,
+          children: <Widget>[
+            Transform.rotate(
+              angle: _angle,
+              child: SvgPicture.asset('assets/qibla/compass.svg', // compass
+                  color: _platformBrightness == Brightness.dark
+                      ? Colors.teal
+                      : Colors.teal.shade400),
+            ),
+            _kaabaSvg,
+            SvgPicture.asset('assets/qibla/needle.svg', //needle
+                color: _platformBrightness == Brightness.dark
+                    ? Colors.teal
+                    : Colors.teal.shade800),
+            Align(
+              alignment: Alignment.topCenter,
+              child: ListTile(
+                leading: FaIcon(FontAwesomeIcons.info),
+                title: Text(
+                  "Align both arrow head\nDo not put device close to metal object.",
+                  // textAlign: TextAlign.center,
+                ),
+              ),
+            ),
+            Align(
+              alignment: Alignment.bottomCenter,
+              child: compassActionButton(context),
+            )
+          ],
+        );
+      },
+    );
+  }
+}

lib/views/bottomAppBar.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:waktusolatmalaysia/views/Qibla%20part/qibla.dart';
 
 import '../CONSTANTS.dart';
 import '../utils/AppInformation.dart';
@@ -51,7 +52,8 @@ class MyBottomAppBar extends StatelessWidget {
             color: iconColour,
             tooltip: 'Kibla compass',
             onPressed: () {
-              Fluttertoast.showToast(msg: 'NOT YET IMPLEMENTED');
+              Navigator.push(
+                  context, MaterialPageRoute(builder: (context) => Qibla()));
             },
           )
         ],

pubspec.yaml

@@ -3,7 +3,7 @@ description: App waktu solat seluruh Malaysia
 
 publish_to: "none" # Remove this line if you wish to publish to pub.dev
 
-version: 1.12.83-beta+39
+version: 1.13.84-beta+40
 
 environment:
   sdk: ">=2.7.0 <3.0.0"
@@ -49,8 +49,8 @@ flutter:
   # the material Icons class.
   uses-material-design: true
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - assets/svgIcons/
+  assets:
+    - assets/qibla/
   #   - assets/grouped.json
 
   # To add custom fonts to your application, add a fonts section here,