Flutter 2022 - Buttons Teil drei (Android Studio)

Auch im neuen Jahr geht es weiter mit meiner Flutter Serie. Hier der dritte Teil zum Thema Buttons in Flutter.

Bisher hatte ich verwendet: ElevatedButton, TextButton, OutlinedButton. Für die Styling Informationen waren das .styleFrom(...) und ButtonStyle(...) .

Alleine mit diesen Widgets lassen sich rechteckige Buttons erstellen. Was den Code betrifft, hat er über alle Buttons hinweg große Ähnlichkeit. In allen Buttons hatten wir bis jetzt Text, Farbe und eine (noch) nicht implementierte onPressed(...) Funktion. In diesem Post nehme ich als Grundlage den ElevatedButton.

Bisher: Buttons Teil eins Buttons Teil zwei

Ausgangslage

class MeinElevatedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ElevatedButton(
            onPressed: () {},
            child: Text('Elevated Button'),
            style: ButtonStyle(
              foregroundColor: getColor(
                Colors.red,
                Colors.orange,
              ),
            )));
  }
}

Das einzig Spezielle an dem Code oben, ist die Funktion getColor(...). Im letzten Post hatte ich sie eingefügt, um die Textfarbe des Buttons zu ändern, wenn er geklickt / gepresst wird.

Erwähnen muss man auch, das mit foregroundColor: die Textfarbe gemeint ist. Diesen Code werde ich für das nächste Beispiel ändern. Vorher sollten wir aber noch den Unterschied zwischen ButtonStyle(...) und .styleFrom(...) genauer betrachten. An der Oberfläche haben beide Widget identische Parameter. Betrachtet man aber den Typ der Parameter sieht man den Unterschied !

Als Beispiel nehme ich hier shape: . .styleFrom(...) erwartet als Parameter ein Objekt vom Typ OutlinedBorder. ButtonStyle(...) erwartet aber ein Objekt vom Typ MaterialStateOutlinedBorder . Manche Material Widget verfügen über einen MaterialState, d.h. sie können sich dynamisch verändern. Im letzten Post hatten wir ein Beispiel dazu.

Die Schlussfolgerung ist einfach: Benötigt man diesen MaterialState nicht, kann man .styleFrom(...) verwenden. 

class MeinElevatedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ElevatedButton(
            onPressed: () {},
            child: Text('Elevated Button'),
            style:ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(20.0),
                )
              ),
            ),
        ),
    );
  }
}

Oben wird RoundedRectangleBorder(...) verwendet. Mit diesem Widget kann man festlegen, wie stark die Ecken des Rechtecks abgerundet werden sollen. Man kann das auf alle vier anwenden, oder, wie im Beispiel oben, nur für eine Ecke. 

Beispiel mit MaterialState

Das identische Widget, diesmal aber mit MaterialState:

class MeinElevatedButtonZwei extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Elevated Button'),
        style:ButtonStyle(
          shape: MeinShape(),
        )
      ),
    );
  }
}

Nun verwendet der Code oben eine Funktion MeinShape(...):

class MeinShape extends RoundedRectangleBorder implements
MaterialStateOutlinedBorder
{
  @override
  OutlinedBorder? resolve(Set<MaterialState> states){
    if(states.contains(MaterialState.pressed)){
      return RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(20.0),
        )
      );
    }
    return null;
  }
}

Das Interessante bei der Funktion MeinShape steht ganz am Anfang: implements ! In Dart kannst Du mit extends eine Klasse erweitern. Dabei muss von der Elternklasse nichts zwingend mit @override neu implementiert werden.

Anders sieht das bei implements aus. MaterialStateOutlinedBorder ist ein Konstruktor eine Konstante. Für diesen schreibe ich mit OutlinedBoder? resolve(...) {...} die entsprechende Funktion.

Wenn der Button geklickt wird, erscheint die rechte obere Ecke abgerundet, solange die Maustaste gedrückt ist. Ist das nicht mehr der Fall (return null) wird das übliche Rechteck gezeigt. Bis bald 😀!