Flutter -- Tutorial Teil 4 StatefulWidget Stateless Widget

In diese Teil dieser Tutorial Serie befassen wir uns mit dem Einsatz von StatefulWidgets und StatelessWidgets.
Diese beide Klassen eröffnen uns in Flutter eine zentrale Möglichkeit unsere App zu strukturieren.
Zentraler Punkt bei diesen zwei Varianten ist die build(...) Methode. Sie veranlasst Flutter, das Widget zu "bauen". build(...) baut dabei alle miteinander verketteten Widgets auf, die sich innerhalb des Funktionskörpers der build(...) {....} befinden.

Die Anzahl der Widgets, die sich innerhalb dieses Funktionskörpers {...} befinden, ist dabei nicht entscheidend. Im letzten Teil dieses Tutorials haben wir uns schon ein wenig mit dem StatefulWidget befasst. Hier noch einmal das ein Schaubild dazu:

Schema 1

Vom letzten Teil dieses Tutorials wissen wir, das ein StatefulWidget dann nützlich ist, wenn wir auf eine Veränderung reagieren müssen. Das kann ein Button sein, der gedrückt wurde, oder ein Textfeld, welches vom User benutzt wurde. Schauen wir uns einmal den Code zu einem StatefulWidget an. In diesem Beispiel, ist der Code dazu in einem eigenen File, meine_widgets.dart und wird in main.dart importiert:

	import 'package:flutter/material.dart';
	class MeineButton extends StatefulWidget {
	MeineButton({Key key,}): super (key:key);
	@override
	_MeineButtonState createState() => _MeineButtonState();
	}
	class _MeineButtonState extends State<MeineButton> {
	bool schalter = true;
	var basis = Text("Hallo");
	var ersatz = Text("Erster Wechsel");
	var ersatz2 = Text("Zweiter Wechsel");
	void _meinNeuerButton(){
	print(schalter);
	setState(() {
	if (schalter) {
	basis = ersatz;
	schalter = false;
	} else {
	basis = ersatz2;
	schalter = true;
	}
	});
	}
	@override
	Widget build(BuildContext context) {
	return RaisedButton(
	child: basis,
	onPressed: _meinNeuerButton,
	splashColor: Colors.green,
	elevation: 8.0,
	);
	}
	}

view raw flutterserie12.dart hosted with ❤ by GitHub

Dieser Code ist nicht elegant geschrieben, aber er ist ausreichend um das Entscheidende zu demonstrieren.
Innerhalb der _MeineButtonState Klasse haben wir eine Funktion _meinNeuerButton(). Diese Funktion verändert eine Variable aufgrund eines bool Wertes. Sie wird immer aufgerufen, wenn der Button gedrückt wird.

Mit MeineButton() haben wir ein "eigenes" Widget" geschrieben und können es auch an anderer Stelle in unserer App einsetzen.

Der wesentliche Unterschied von StatefulWidget und StatelessWidget hier in einem Schaubild:

Schema 2

Alles was mit dem StatefulWidget verbunden ist, wird neu aufgebaut, bei der Verwendung der setState(...) {....} Methode. Also auch die Widgets, die wir gar nicht verändern wollen oder müssen.

Für unser Beispiel fehlt noch die main.dart Datei:

	import 'package:flutter/material.dart';
	import 'meine_widgets.dart';
	void main() => runApp(MeineFlutterApp());
	class MeineFlutterApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home: MeineHomePage(title: "Flutter Tutorial 2"),
	);
	}
	}
	class MeineHomePage extends StatelessWidget {
	MeineHomePage({Key key, this.title}): super (key:key);
	final String title;
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: SizedBox.expand(
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
	children: <Widget>[
	Text("Hallo"),
	MeineButton(),
	],
	),
	),
	);
	}
	}

view raw flutterserie13.dart hosted with ❤ by GitHub

Der Code besteht aus zwei StatelessWidgets, wobei wir eine MaterialApp benutzen und ein Scaffold. Zu beidem in einem späteren Post mehr.