Flutter Schrittzähler #1

Nachdem wir jetzt alles fertig eingerichtet haben können wir uns endlich die Hände schmutzig machen und mit dem Coden beginnen.

Als erstes kleines Projekt hab ich mir überlegt einen Schrittzähler zu bauen, den wir dann über die Zeit, Schritt für Schritt, weiterentwickeln. In diesem Beitrag beschränken wir uns darauf die Schritte vom Betriebssystem anzufragen und die initiale Schrittanzahl zu speichern um die Schirtte seit der Installation der App zu errechnen.

Für die Umsetzung nutze ich zwei packages die wir gleich zum Projekt hinzufügen. Das pedometer package gibt uns Zugriff auf die Anzahl der gelaufenen Schritte und versorgt uns mit Updates, sobald neue Schritte registriert werden. Dabei bekommen wir immer nur die Anzahl der Schritte seit dem letzten Neustart des Geräts. Das package könnt ihr euch hier anschauen.

Das zweite Package heißt shared_preferences. Mit diesem Package lassen sich kleinere Datenmengen persistieren. Das Package nutzt unter Android die SharedPreferences und unter iOS die NSUserDefaults. Für größere Datenmengen sollten andere Techniken genutzt werden. (Link)

Beide Packages binden wir über die pubspec.yaml Datei im Hauptverzeichnis des Projekts ein. Dort fügen wir die packages unter den normalen Dependencies ein. Hier mal ein Auszug aus der Datei.

#Auszug aus pubspec.yaml
#...
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2  
  google_fonts: ^2.2.0
  jiffy: ^5.0.0
  shared_preferences: ^2.0.12
  pedometer: ^3.0.0
#...

Jetzt gehts weiter in der main.dart. Dort initialisieren wir als erstes die Shared Preferences und den Step Count Stream. Aus den Shared Preferences laden wir den initialen Step Count, falls vorhanden. Dieser wird später vom aktuellen Step Count subtrahiert, um die Schritte seit der Installation der App zu berechnen.

//Auszug main.dart

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

  void initPlatformState() async {
    _prefs = await SharedPreferences.getInstance();
    _initStepCount = _prefs.getInt('firstStepCount') ?? -1;

    _stepCountStream = Pedometer.stepCountStream;
    _stepCountStream.listen(onStepCount).onError(onStepCountError);
  }

Wir leiten die eingehenden gezählt Schritte an die Methode onStepCount weiter und verarbeiten Sie dort weiter. Damit die UI die aktualisierten Werte anzeigt muss der Wert innerhalb der setState Methode gesetzt werden.

//Auszug main.dart

void onStepCount(StepCount event) {
    if (_initStepCount < 0) {
      _initStepCount = event.steps;
      _prefs.setInt('firstStepCount', _initStepCount);
    }

    var steps = event.steps - _initStepCount;

    setState(() {
      _steps = steps.toString();
    });
  }

Die _steps Variable wird dann anschließend in der UI genutzt um die Schritte anzuzeigen.

//Auszug main.dart
 
@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        title: Text(
          "Schrittzähler",
          style: GoogleFonts.darkerGrotesque(fontSize: 40),
        ),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Spacer(),
            Card(
              color: Colors.black87.withOpacity(0.7),
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              child: Container(
                margin: const EdgeInsets.only(
                  top: 10,
                  bottom: 30,
                  right: 20,
                  left: 20,
                ),
                child: Column(
                  children: <Widget>[
                    gradientShaderMask(
                      child: Text(
                        //Hier wird die Anzahl der Schritte eingebunden
                        _steps,
                        style: GoogleFonts.darkerGrotesque(
                          fontSize: 80,
                          color: Colors.white,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                    ),
                    const Text(
                      "Schritte",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const Spacer(),
          ],
        ),
      ),
    ));
  }

Um den Code auf einem Gerät zu testen müssen die Permissions von Hand in den Einstellungen gesetzt werden, da wir kein Permission Handling eingebaut haben. Über dieses Thema wird es in Zukunft noch einen Beitrag geben.

Ich finde ansonsten kann sich das Ergebnis sehen lassen. Mit sehr geringem Aufwand konnten wir Daten vom Betriebssystem abgreifgen, Daten persistieren und ansehnlich darstellen. Ich habe ein kleines Video von meinem Android Gerät aufgenommen um das Ergebnis zu präsentieren. Ich hoffe dieser Beitrag war hilfreich und informativ.