Flutter, Dart und mehr !

  Im letzten Post hatte ich die Grundversionen von Buttons in Flutter angeschaut. In diesem Post betrachte ich die Buttons weiter.  Insbesondere die Möglichkeiten sie weiter zu individualisieren. Wer sich für die aktuellen Empfehlungen zum Button Design interessiert, Stand 30.12.21 , der folgt diesem Link. Wie im letzten Post bereits ersichtlich, ist das Button Konstrukt in Flutter einfach aufgebaut: Man beginnt mit dem Haupt Widget, zum Beispiel ElevatedButton(...) , TextButton(...) Widget, während die eigentlichen Styling Informationen im .styleFrom(...) Widget übergeben werden. Farbveränderung Wenn Du einen Button anklickst, wird dies unter Umständen durch eine Farbveränderung am Button angezeigt. Dieser Effekt lässt sich natürlich programmieren. In diesem Beispiel wird dazu eine spezielle Methode programmiert: Oben im Code siehst Du die Funktion getColor . Sie arbeitet mit MaterialState . Aber was genau ist damit gemeint ? MaterialState Ein Bedienelement, in meinem Fall...

Das Jahr neigt sich seinem Ende zu . Ein guter Moment um einen Ausblick zu wagen. Bild von vikayatskina - de.freepik.com   Was Flutter betrifft, darf man optimistisch sein. Es gibt keine Anzeichen, das Google seine Unterstützung für das Framework reduziert, sondern im Gegenteil. Auf Twitter wurde Personal gesucht ! Die Kraft, und damit das Geld, das Google bisher in das Projekt investiert hat, deutet darauf hin, das mit Flutter noch lange zu rechnen ist. Konkurrenz - Microsoft's MAUI Der Erfolg ruft, wie anderen Bereichen auch, Konkurrenz auf den Plan. Mit MAUI hat Microsoft in diesem Jahr ein Projekt vorgestellt, das in eine vergleichbare Richtung geht, wie Flutter. Ich denke aber, das Flutter nach wie vor die Nase vorn haben wird. Eine nicht unwesentliche Rolle dabei, spielt die leichte Zugänglichkeit von Flutter . Auch die gut konzipierte Dokumentation im Netz macht Flutter attraktiv. Dart - und nun ? Bis auf weiteres bleibt in meinen Augen die Popularität der Programmiersp...

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....

In diesem kurzen Post möchte ich die styled_text package vorstellen. Wer diesen Post von mir gelesen hat, weiss das man mehrere Widgets braucht, um einen Text unterschiedlich zu formatieren. Einen anderen, aber bekannten Ansatz bringt styled_text ins Spiel. Wer ein wenig Erfahrung mit Html hat, und wer hat das nicht 😀, kennt das Tag Prinzip.  <h2> Mein kluger Text </h2> , zum Beispiel formatiert "Mein kluger Text" gemäß den Vorgaben die für h2 gültig sind. styled_text Die Installation wird auf der Homepage erklärt. Dort sind auch Beispiele für den Einsatz zu finden. class TextKonserve extends StatelessWidget { @ override Widget build(BuildContext context) { return StyledText( text: '<italic>Dies ist ein</italic> <bold>Test !</bold>' , tags: { 'bold' : StyledTextTag( style: TextStyle( fontFamily: 'Raleway' , fontSize: 20.0 , font...

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 andere...

Im letzten Post haben wir ein Bild auf einfache Art und Weise in Flutter eingebunden. Natürlich sind die Möglichkeiten die uns Flutter für den Umgang mit Bildern bietet umfangreicher.  Dabei sollte man sich noch einmal vor Augen führen, das man Bilder generell in zwei Kategorien einordnen kann: Bilder die in die Anwendung integriert sind ( assets ) und Bilder die während der Laufzeit der Anwendung von einer externen Quelle , zum Beispiel von einer Web Site, geladen werden. Flutter versteht dabei eine Vielzahl von Formaten: JPG , PNG , GIF , WebP , Animated WebP , BMP und WBMP . Sollte ein Bild in einem Format daher kommen, das Flutter nicht versteht, wird versucht mit Hilfe von Plattform Code ( Android /iOS ) eine Decodierung zu erreichen. Im Erfolgsfall wird das Bild dementsprechend auch von Flutter dargestellt. Bild aus dem Internet  Ich verwende nach wie vor d en Code aus dem letzten Post und ergänze ihn um folgendes Widget: Das Widget oben retourniert ein Center(....

In den letzten Posts habe ich vor allem mit Text experimentiert. Dabei hat sich herausgestellt, das Text in Row(...) und Text in Column(...) Widgets unterschiedlich funktionieren ! Nun lässt sich eine App in der Regel nicht nur mit Text gestalten. Da erwarten die potenziellen Anwender deiner App mehr ! Ein Bild sagt mehr als tausend Worte. Dieser Spruch hat etwas wahres. Und um Bilder geht es in diesem Post. Bilder in Flutter ! assets Eigentlich hört man den Begriff assets vor allem im Bereich der Kapitalanlage 😀. Wobei im übertragenen Sinne ist er auch in Flutter korrekt.  Alle Komponenten die du Deiner Anwendung hinzufügst, die also nicht von Flutter selbst bereitgestellt werden, sind deine Anlagen ! Sichtbare Anlagen, wie Bilder oder sonstige grafische Elemente , bestimmen den Look deiner Anwendung. So gesehen sind diese Anlagen dein Kapital. Nun wirst Du vielleicht schon vermuten, wo Du diese Anlagen platzieren musst: Genau ! Zuerst muss ich im Project Verzeichnis einen ne...

  Im letzten Post konntest Du den Einsatz eines Row(...) Widgets sehen. In diesem Post betrachte ich das Bruder oder, falls Dir das lieber ist 😀, Schwestern Widget: Column(...) ! Zuerst aber noch eine kleine Erinnerung. In dieser Serie zu Flutter habe ich das Thema constraints (Einschränkungen) schon einmal angeschnitten. Das Thema selbst ist umfangreich, also beginne ich mit dem wichtigsten: constraints (Einschränkungen) Natürlich kann ein Widget nicht beliebig gross sein. Natürlich deshalb , da jeder Bildschirm (PC / Mobile / Tablett) eine max. Auflösung in Pixel hat. Mit jedem Widget (Element) das Du auf dem Bildschirm darstellst, verringert sich der verfügbare Restplatz. Als Handybenutzer weißt Du aber, das mit scrollbaren Flächen (Horizontal und vertikal) theoretisch unbegrenzt Platz verfügbar ist. Sie repräsentieren aber an sich einen Sonderfall ! Wie gross nun ein Widget werden kann und darf, diese Information gibt das Eltern Widget an das Kinder Widget weiter. ...

In den letzten beiden Post's habe ich mich mit Text Widgets befasst. Es ist jetzt nicht so, das es dazu nichts mehr zu schreiben gäbe, aber Abwechslung tut gut ! Ein Text alleine, ist der Anfang , aber wohin damit auf dem Bildschirm ?  Natürlich denken wir jetzt an die sogenannten Layout Widgets von Flutter. Row(...) , Column(...) , Center(...) und andere mehr. Am kann verwirrend sein, das sich die Widgets unterschiedlich verhalten. Man muss sie erst richtig kennen lernen, um das richtige Widget für die eigene Problemstellung zu wählen ! Row(...) Widget Wie auch in anderen Post's, werde ich nicht auf alle Parameter eingehen. Das würde diesen Artikel sprengen. Stattdessen konzentriere ich mich auf das Grundsätzliche. Eine row (Reihe) platziert Kinder Widgets auf der horizontalen Achse . Wenn Du einen Blick auf die Parameter wirfst: Das wichtige zuerst: Du kannst Row(...) eine Liste von Widgets übergeben. Diese Kinder Widgets werden in der Row(...) platziert. Das geschieh...