Flutter 2021 - Buttons Teil eins (Android Studio)

Bisher hatten wir in dieser kleinen Flutter Serie schon einige Widgets angewandt.

Row, Column, Container, aber auch das Text oder Image Widget hast Du schon im Einsatz gesehen. In diesem Post geht es nun um ein interaktives Element: den Button !

Kaum eine modernes User Interface kommt ohne ihn aus. Natürlich hat hier auch Flutter seine Möglichkeiten. Wer sich für Google's Meinung zu Buttons interessiert, findet hier interessante Informationen !

Elevated Button

Wenn Du elevated auf Deutsch übersetzt, erhälst du das Wort erhöht. Konkret ist damit gemeint, das es scheint, als sei der Button vom Hintergrund abgehoben. Das wird dadurch erreicht, das er einen dezenten Schatten wirft, der sich verstärkt, wenn Du ihn anklickst. 

class MeinButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ElevatedButton(
      onPressed: () {},
      child: Text('Mein Button'),
      style: ElevatedButton.styleFrom(
        minimumSize: Size(280.0, 80.0),
        textStyle: TextStyle(
          fontFamily: 'Raleway',
          fontWeight: FontWeight.w500,
          fontSize: 28.0,
        ),
        primary: Colors.lightBlueAccent // Hintergrund Farbe
      ), //styleFrom
    ));
  }
}

Zum Code oben: Die Widgets, dich bisher noch nicht eingesetzt habe sind ElevatedButton(...) und ElevatedButton.styleFrom(...).

ElevatedButton:

onPressed: In einer realen Anwendung würde hier die Funktion stehen, die ausgeführt wird, wenn der Button geklickt wird.

child: Der Inhalt des Buttons. Im Code oben ein Text. Obwohl dem Text(...) Widget ein TextStyle(...) Widget übergeben werden könnte, benutze ich den textStyle: von .styleFrom(...).

primary: Die Hintergrundfarbe des Buttons.

style: Hier übergebe ich das ElevatedButton.styleFrom(...) Widget.

ElevatedButton.styleFrom:

minimumSize: Als Grundeinstellung verwendet Flutter ein Padding, um Raum zwischen dem Text und den Button Rändern zu schaffen. In diesem Zusammenhang wird trotzdem versucht, den Button so klein wie möglich zu halten. Durch den Einsatz des Size(...) Widgets kann ich diese Grösse beeinflussen.

textStyle: Jetzt kommt das TextStyle(...) Widget zum Einsatz. Hier können alle gewünschten Parameter gesetzt werden.

primary: Die Hintergrundfarbe des Buttons. Du könntest hier noch ergänzen mit onPrimary: , für die Vordergrundfarbe.

Die Parameter die ich in diesen zwei Widgets verwendet habe, sind längst nicht alle. Aber sie reichen aus um auf dem AVD (Emulator) einen Button darzustellen:

Text Button

Der Text Button ähnelt dem Elevated Button. Mit dem Unterschied, das der Text Button flach daherkommt. Die Widgets sind sehr ähnlich, bei den Farben aber gibt es Unterschiede.

class MeinButton2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: TextButton(
      onPressed: () {},
      child: Text('Text Button'),
      style: TextButton.styleFrom(
        minimumSize: Size(280.0, 80.0),
        textStyle: TextStyle(
          fontFamily: 'Raleway',
          fontWeight: FontWeight.w500,
          fontSize: 28.0,
        ),
        primary: Colors.black, // Textfarbe
        backgroundColor: Colors.lightBlueAccent,
      ), //styleFrom
    ));
  }
}

Zuerst die Gemeinsamkeiten: Auch beim TextButton(...) verwenden wir .styleFrom(...), um alle gewünschten Formatierungsparameter zu setzen. Die Farben werden auch im Code oben im .styleFrom(...) Widget gesetzt. onPressed: ist ein Parameter der in Flutter bei jeder Button Klasse gesetzt werden muss.

Die Unterschiede: Hatte primary: im ElevatedButton(...) noch die Aufgabe die Hintergrundfarbe des Buttons zu definieren, setzt sie im TextButton(...) die Textfarbe !

Das Ergebnis im AVD (Emulator):

OutlinedButton

Dieser Button ist optisch ein Sonderfall und es ist bezeichnend, das ihn die Flutter Entwickler als Standard eingebunden haben 😀.

class MeinOutlinedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: OutlinedButton(
          onPressed: () {},
          child: Text('Outline Button'),
          style: OutlinedButton.styleFrom(
            minimumSize: Size(280.0, 80.0),
            textStyle: TextStyle(
              fontFamily: 'Raleway',
              fontWeight: FontWeight.w500,
              fontSize: 28.0,
            ),
            side: BorderSide(
              color: Colors.red,
              width: 2,
            ),
            primary: Colors.black,
          ), //styleFrom
        ));
  }

Der Code oben ähnelt den anderen Varianten stark. Ein wesentlicher Unterschied ist side: .

Mit dem BorderSide(...) Widget implementierst Du die Stärke des Randes und seine Farbe.

Das Ergebnis sieht im AVD (Emulator) dann so aus:

Im nächsten Post werde ich die Buttons weiter verändern und anpassen. Bis bald 😀!

Hier findest Du den Code auf GitHub !