Flutter 2021 - Farben (Android Studio)

In diesem Post geht es um Farben. Um genau zu sein, Farben in Flutter ! Jetzt könnte man meinen, das ist keine große Sache. 
Trotzdem stellen sich als Anfänger Fragen.

Eine der ersten dürfte sein: Wo setzt man die Farben ? Kurze erste Antwort: Im generellen löst man das mit einem Theme. Dieses Theme ist nichts anderes, als eine Sammlung von Styling Informationen, darunter auch Farben, die für die gesamte Anwendung gültig sind. Kurze zweite Antwort: Lokal auf der Ebene des Widgets. Manche Widgets akzeptieren einen Parameter für die Farbe. In diesem Post werde ich mich mit der lokalen Variante beschäftigen.

Color Picker

Inzwischen gibt es im Web einige Seiten die Farbwerte liefern. Hier möchte ich die von Google erwähnen. Sie ist einfach zu erreichen. Einfach nach color picker suchen !

Oben sehen wir, das Farben in verschiedenen Formaten definiert werden können. HEX , RGB, CMYK, HSV, HSL .

Während viele mit RGB etwas anfangen können, wird es bei HEX und den anderen Formaten schon schwierig. Ich möchte jetzt hier nicht auf die einzelnen Formate eingehen. Wer sich dafür interessiert folgt am besten den Links.

Für diesen Post benutze ich folgenden Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class MeineTestSeite extends StatelessWidget {
  MeineTestSeite({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Title(color: Colors.black, child: Text(title)),
      ),
      body: MeineTests(),
    );
  }
}

class MeineTests extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Colors.lightBlueAccent,
        )
      ],
    );
  }
}

Zu dem Code ist nicht viel zu schreiben. Wer die vergangenen Post in dieser Serie gelesen hat, sollte auf wenig Unbekanntes stossen. Erwähnenswert ist vielleicht das oben alle Farben über Namen angesprochen werden. Colors.lightBlueAccent oder Colors.black beziehen sich auf eine Standard Farbpalette von Flutter. 

Ich möchte aber die Farbe mit dem color picker wählen ! Das Web Tool hat auch eine bequeme Kopierfunktion, so das ich den Farbcode direkt in Android Studio übernehmen kann.

Hexadezimal

Das Tool liefert mir zum Beispiel: #51bed6 als HEX Farbcode. So kann ich den Farbcode aber nicht verwenden, # ist kein Bestandteil eines HEX Farbcodes!

In einem ersten Schritt ändern wir den Code zu 0x51bed6 . Mit 0x weiss Flutter das es sich um einen HEX Wert handelt. Das alleine aber reicht noch nicht. Der HEX Farbcode benötigt auch zwei Stellen für eine opacity (Transparenz) Angabe. So müssen wir den Farbcode noch um FF (nicht transparent) ergänzen. 

Der komplette Farbcode sieht dann so aus: 0xFF51bd6 ! Falls dich die möglichen Werte für Transparenz interessieren..hier findest Du eine Aufstellung.

Um jetzt meine gewählte Farbe anzuwenden verwende ich das Color(...) Widget :

class MeineTests extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Color(0xFF51bed6),
        )
      ],
    );
  }
}

Das Ergebnis im AVD (Emulator) :

Man könnte jetzt noch eine eigene Funktion schreiben, um den Farbcode des color picker Tools direkt übernehmen zu können. Wenn Du so eine Lösung brauchst, empfehle ich Dir diesen Artikel dazu.

RGB

Natürlich kann Flutter auch mit RGB Farbcodes umgehen. Zum testen ergänzen ich meine Column(...) um einen weiteren Container(...) . Wieder wähle ich mit dem color picker eine Farbe. Diesmal interessieren mich die RGB Werte: 240,213,151 . Auch hier liefert das Tool nicht die perfekten Daten, denn eine Angabe fehlt: opacity !

Ich verwende jetzt Color.fromRGBO(...), wobei O für opacity steht. Hier wähle ich den Wert 1. Damit hat die Farbe keine Transparenz !

Column(
      children: [
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Color(0xFF51bed6),
        ),
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Color.fromRGBO(240, 213, 151,1),
        )
      ],
    )

Du kannst im übrigen mit der Transparenz spielen. Ein Wert von 0.5 zum Beispiel setzt die opacity auf 50% . 

Das Ergebnis des Codes auf dem AVD (Emulator) :

Es gibt noch eine weitere Möglichkeit die opacity zu setzen:

Column(
      children: [
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Color(0xFF51bed6).withOpacity(0.5),
        ),
        Container(
          margin: EdgeInsets.all(20.0),
          height: 100.0,
          color: Color.fromRGBO(240, 213, 151,1).withOpacity(0.5),
        )
      ],
    )

.withOpacity(...) überschreibt dabei die ursprünglichen Werte für opacity. Im Code oben waren beide Farben undurchlässig und sind anschliessend 50% durchlässig. Das sieht dann so aus:

Eigentlich war es das für diesen Post. Wenn Du dich jetzt fragst, was mit den anderen Farbformaten ist, die ich am Anfang erwähnt habe, z.B. HSV oder CMYK, dann ist die Antwort: Sie haben sicherlich ihre Anwendungsgebiete. Für mich aber reichen HEX und RGB vollkommen aus 😀. Bis bald !