Flutter -- Tutorial Teil 6 Provider Part 1

Juni 06, 2019

Provider

In dieser Tutorial Serie haben wir das Thema StatefulWidget und StatelessWidget schon einmal angeschnitten.
Mit dem Einsatz des jeweiligen Widgets definieren wir, ob wir auf in den entsprechenden Widgets angelegte Daten Zugriff haben möchten (StatefulWidget), oder ob wir keinen Zugriff darauf brauchen (StatelessWidget).
Als grobes Beispiel eignet sich für für StatefulWidgets die Buttons, denn natürlich wollen wir wissen, wenn ein Button gedrückt/geklickt wird. Für StatelessWidget, eine Textbox, die einmal angelegt und angezeigt, von uns nicht mehr verändert wird. Da wir mit dem Einsatz von StatefulWidgets und der Verarbeitung der dazugehörigen State's auch einen Neuaufbau der grafischen Komponenten unserer App auslösen, hat dies auch Auswirkungen auf die Performance unserer Anwendung.

Jetzt gibt es in der Programmierung Lösungsmuster, oder anders ausgedrückt, Empfehlungen, wie man ein Programm strukturieren sollte um eine Aufgabenstellung bestmöglichst zu lösen.
Bei Flutter ist eine der wichtigsten Aufgaben die Verarbeitung der State's unserer StatefulWidgets. Dies möglichst flexibel und einfach. Es ist fast natürlich, das es für diese Aufgabe verschiedene Lösungskonzepte gibt. In der Regel werden sie durch eine externe Library unterstützt, welche den entsprechenden Lösungsansatz, möglichst einfach verfügbar macht.

In diesem Post geht es, wie im Titel schon geschrieben, um

Provider

Das Flutter Development Team hat sich in der Vergangenheit nicht eindeutig geäußert, welchem Lösungsansatz sie den Vorzug geben würden. Jüngste Veröffentlichungen scheinen aber auf Provider hinzudeuten.
Damit wir das Konzept überhaupt testen können, müssen wir es in unsere App einbinden. Wie immer geschieht das im pubspec.yaml File.

Den Beispiel Code den wir betrachten werden, erstellt ein kleines Demo rund um das Stichwort Wetter. Ganz nebenbei werden wir noch einen FloatingActionButton implementieren.

Wir arbeiten dabei mit zwei Files, dem main.dart und dem wetterinfo.dart File.
Das wetterinfo File enthält eine Klasse mit Variablen und Gettern und Settern. Die Klasse ist sehr simple und sollte einfach zu verstehen sein.
Wenn wir die provider Library im pubspec.yaml File importiert haben, nicht vergessen get packages zu klicken in Visual Studio Code, müssen wir sie natürlich auch im main.dart File importieren !

Starten wir aber mit dem Code, zuerst mit wetterinfo.dart:

import 'package:flutter/foundation.dart';

class WetterInfo with ChangeNotifier {

String _tempTyp = "Celsius";
int _temperaturWert = 25;

int get temperaturWert => _temperaturWert;
String get tempTyp => _tempTyp;

set temperatur(int neueTemp){
  _temperaturWert = neueTemp;
  notifyListeners();
}
set temperaturTyp(String neuerTyp){
  _tempTyp = neuerTyp;
}

}

Wenn wir diese Klasse anschauen fällt zuerst with ChangeNotifier auf. Wir erweitern hier keine existierende Flutter Klasse, wir "benutzen" sie. Das ist nur eine oberflächliche Erklärung und ich werde in einem anderen Post darauf eingehen
Bei diesem Code sollte man besonders die Funktion notifyListeners() beachten. Sie stammt aus foundation.dart, und ist nur verfügbar durch das "with ChangeNotifier{...}".
Der Gedanke hinter notifyListeners() ist, das es Objekte gibt, die der Variable _temperaturWert "zuhören". Diese Objekte werden jedesmal informiert, sobald die Variable sich ändert.

Unser main.dart File startet ganz konventionell:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'wetterinfo.dart';

void main() => runApp(MeineApp());

class MeineApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Beispiel',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MeineHomePage(title: 'Flutter Provider Demo'),
    );
  }
}

Nichts im Code oben sollte, wenn man schon die ersten Erfahrungen mit Flutter gesammelt hat, überraschen. Kommen wir zum restlichen Code BEVOR wir Provider implementiert haben:

class MeineHomePage extends StatelessWidget {
  MeineHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider'),
      ),
      body: new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MeinSpeziellerText(),
            MeinSpeziellerInhalt(),
          ],
        ),
      ),
      floatingActionButton: MeinFliegenderActionButton(),
    );
  }
}

class MeinSpeziellerText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text("Temparatur"),
      
    );
  }
}

class MeinSpeziellerInhalt extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text("Temperatur Typ"),
      
    );
  }
}

class MeinFliegenderActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Colors.pink,
      onPressed: (){

      },
      tooltip: "Wechsle Typ",
      child: Icon(Icons.change_history),
    );
  }
}

Auch hier ist der Code nicht schwer zu verstehen. Wir implementieren 4 Widgets:

MeineHomePage
MeinSpeziellerText
MeinSpeziellerInhalt
MeinFliegenderActionButton

Im Part 2 zum Thema Provider, werden wir dann den Code ändern und den Lösungsansatz Provider implementieren.. to be continued..

Dieses Blog durchsuchen

Flutter, Dart und mehr !

Flutter -- Tutorial Teil 6 Provider Part 1

Provider

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Show Dialog in Flutter mit Callback Funktion

Flutter -- Tutorial Teil 6 Provider Part 2

Dart Final Const