Material Design in Flutter Teil 1

Material.io

Bei der Entwicklung einer App spielt nicht nur die Funktionalität eine Rolle. Das andere, wichtige Merkmal ist das Design, sprich, die Darstellung der App. Welche Farben verwenden wir, welchen Schriftsatz in welcher Größe, sind Fragen die es zu beantworten gilt.
Flutter bietet für die Lösung dieser Frage, die Integration von Material Design an. Wer sich hierzu einen Überblick verschaffen möchte, besucht am besten die Homepage dazu. Was die Farben betrifft wird gerne von Primären und Sekundären Farben gesprochen. Die Primären werden oft für  App Bars und Buttons benutzt, während die Sekundären zum Beispiel für den Floating Action Button oder Kontrollelemente eingesetzt werden.
Zum erkunden von Farben eignet sich auch das Color Tool auf Material.io.  Eine Variante davon, leider ein wenig umständlich zu erreichen, findet man ebenfalls auf der Material Seite, hier der Link dazu!

Fallstricke

Bevor wir mit dem Code loslegen, hier noch ein kleiner Hinweis:

Ordnerstruktur

Daten, Bilder, Fonts etc, welche wir in unsere App einbinden, müssen wir über das pubspec.yaml File definieren. Dabei ist wichtig zu wissen, das man dabei sehr exakt vorgehen muss. Das heißt, unter der Zeile 

flutter: 

sollte meiner Erfahrung nach gleich

uses-material-design: true

und anschließend

assets:

   - bilder/login.png

kommen. Während das Wort flutter keinen Abstand, sprich Leerzeichen zum linken Rand hat, haben uses-material-design und assets 2 Leerzeichen, vom linken Rand her. - bilder/login.png, in diesem Beispiel, hat 4 Leerzeichen vom linken Rand her. Hält man dies nicht ein, ist es möglich das man nach dem speichern des Files keine Fehlermeldung bekommt, die Daten aber im Debugg Modus nicht gefunden/eingebunden werden.

Der Beispiel Code

Das Beispiel ist simpel. Eine Kopfgraphik, zwei Textfelder und zwei Buttons:

	import 'package:flutter/material.dart'; // Wir importieren das Material File
	// und erhalten Zugriff auf die darin enthaltene Funktionalität
	void main()=>runApp(MeinDemo()); // Der Einstieg zu der App
	class MeinDemo extends StatefulWidget { // wir definieren ein Statefull Widget, das heisst unser Widget wird
	@override // eine Veränderung / Zustand melden
	_MeinDemoState createState() => _MeinDemoState(); // hier initialisieren wir unseren "State", unseren "Zustand"
	}
	class _MeinDemoState extends State<MeinDemo> {
	@override
	Widget build(BuildContext context) { // die Build Methode "baut" das Widget
	return new MaterialApp( //wir erstellen eine Material App
	home: Scaffold( // und retourniert einen Scaffold (Material)
	body: SafeArea( // SafeArea verhindert mit genügendem Padding (Polsterung/Abstand) Konflikte mit dem OS
	child: ListView(
	padding: EdgeInsets.symmetric(horizontal: 24.0),
	children: <Widget>[
	SizedBox(height: 40.0,),
	Column(
	children: <Widget>[
	Image.asset("bilder/login.png",height: 64.0,width: 64.0,), // das Bild wird geladen
	SizedBox(height: 20.0,),
	Text("Material Login"),
	],
	),
	SizedBox(height: 120.0,),
	TextField( // wir richten ein Textfeld für die Eingabe des User Namens ein
	decoration: InputDecoration(
	labelText: "User Name",
	filled: true,
	),
	),
	SizedBox(height: 12.0,),
	TextField( // Textfeld für die Eingabe des Passworts
	decoration: InputDecoration(
	labelText: "Passwort",
	filled: true,
	),
	obscureText: true, //..selbstverständlich verdeckt
	),
	ButtonBar(
	children: <Widget>[
	FlatButton(
	child: Text("Cancel"),
	onPressed: (){}, // hier ein Platzhalter für den Code der ausgeführt würde, wenn Cancel gepresst wird
	),
	RaisedButton(
	child: Text("Next"),
	onPressed: (){}, // auch hier ein Platzhalter, sprich "leere" Funktion
	)
	],
	)
	]
	),
	),
	),
	);
	}
	}

view raw tut07.dart hosted with ❤ by GitHub

Wer das Beispiel nachvollziehen möchte, kann das Login Bild, durch ein Bild seiner Wahl ersetzen.
Hier der Link zum Code! Hier der Link zum original Artikel. Danke an den Autor.