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 ?
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.
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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
}, | |
); | |
} |
Kommentare
Kommentar veröffentlichen