Flutter Material Design Theme Data Part 3

Im zweiten Teil dieser Serie hatten wir uns mit primarySwatch beschäftigt, Farbpaletten also, die konform gehen mit Google's Vision von Material Design. Was aber wenn wir unsere ganz eigene Farbpalette haben möchten ?



Vorbereitung: Farbauswahl


Wie schon in den letzten zwei Posts erwähnt kann man die Farben ganz einfach aus den vorgegebenen Paletten auswählen, oder über einen Farbmixer.

Eine eigene MaterialColor Klasse


Anschließend benötigen wir eine eigene Theme Definition und eine Material Color Klasse. Die Material Color Klasse wird in der Theme Definition verankert und diese wiederum in die MaterialApp eingetragen. Dabei ist wichtig, das Änderungen im Emulator nicht über Hot Reload sichtbar sind, sondern ein Neustart notwendig ist.

Wenn man sich den ganzen Prozess vor Augen hält, ist wohl sinnvoll sich Gedanken darüber zu machen, welche Farben in der App verwendet werden und an welchen Stellen man "Sonderfarben" braucht.
Genau so, wie es theme's für Farben gibt, kann man auch theme's für Text erstellen.
Das erfordert zwar eine längere Vorbereitungszeit und mehr Planung, erleichtert aber später den Einsatz, als auch das anbringen von  allfälligen Änderungen.


import 'package:flutter/material.dart';
import 'mein_theme.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: meinThemeData,
home: MyHomePage(title: 'ThemeData Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: FlatButton(
child: Text("Mein kleiner Button"),
onPressed: (){},
),
),
RaisedButton(
onPressed: (){},
child: Text("Mein anderer Button"),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
view raw gistfile1.txt hosted with ❤ by GitHub
import 'package:flutter/material.dart';
final ThemeData meinThemeData = new ThemeData(
brightness: Brightness.light,
primarySwatch: MeineFarben.black,
primaryColorBrightness: Brightness.dark,
accentColor: MeineFarben.black[900],
buttonColor: MeineFarben.black[100],
accentColorBrightness: Brightness.dark,
);
class MeineFarben {
MeineFarben._(); // privater Konstruktor
static const _meineHauptFarbe = 0xFF388e3c;
static const MaterialColor black = const MaterialColor(
_meineHauptFarbe,
const <int, Color>{
50: const Color(0xFFe0e0e0),
100: const Color(0xFFf8bbd0),
200: const Color(0xFFce93d8),
300: const Color(0xFF9575cd),
400: const Color(0xFF5c6bc0),
500: const Color(_meineHauptFarbe),
600: const Color(0xFF039be5),
700: const Color(0xFF0097a7),
800: const Color(0xFF00695c),
900: const Color(0xFFff6f00),
},
);
}
view raw mein_theme.dart hosted with ❤ by GitHub

Kommentare

Beliebte Posts aus diesem Blog

Flutter: ein eigenes Widget erstellen und einbinden

Listen in Dart (2021): Part 1 List.filled List.empty und List.add

Dart Basic: Listen Part 2 add