Flutter, Dart und mehr !

In diesem Artikel befassen wir uns mit dem Floating Action Button und der Snack Bar ! Photo by Luis Cortes on Unsplash Wenn Du deine ersten Schritte mit Flutter gemacht hast, bist Du eventuell schon auf diesen Button gestossen. Im Boiler Code eines jeden Flutter Projekts, das Du neu erstellst, wird er verwendet ! Die Snack Bar wiederum ist ein Standard Element moderner App's.  Sie erscheint unten auf dem Screen. Ein gutes Beispiel ist zum Beispiel die Gmail App . Wenn Du dort zum Beispiel eine E-Mail löschst, erscheint sie und Du könntest die Aktion rückgängig machen. Code Basis Um es einfach zu halten verwende ich den Code aus dem Listen Artikel: import 'package:flutter/material.dart' ; List meineListe = [ 'Riad' , 'Zürich' , 'Hamburg' , 'London' , 'New York' , 'Moskau' , 'Peking' , 'Boston' , 'Köln' , 'St.Moritz' , 'Davos' ]; void main() { runApp(const...

In meinem zweiten Post zu diesem Thema geht es um zwei Varianten von ListView . Im letzten Post haben wir gelernt, das ListView(...) in der Grundversion nur für eine kleine Anzahl an Einträgen empfohlen wird ! Die Entwickler begründen das damit, das Flutter bei dieser Variante jeden Listeneintrag erstellt. Egal ob er auf dem Bildschirm sichtbar ist oder nicht. In realen Anwendungen kommt es aber oft vor, das man nicht genau weiss, wie viele Einträge eine Liste haben wird. Ein gutes Beispiel dafür ist eine Kontaktliste. Wahrscheinlich wird sie mit der Zeit grösser, kann aber auch wieder schrumpfen.  Hier kommt ListView.builder(...) ins Spiel. Wie builder schon vermuten lässt, wird etwas aufgebaut. ListView.builder Als Basis für den Code nehme ich das Gerüst vom ersten Post zu diesem Thema: void main(){ runApp( const MeineApp()); } class MeineApp extends StatelessWidget { const MeineApp({Key? key}) : super (key: key); @ override Widget build(BuildContext conte...

Listen für Flutter In diesem Post werde ich mir das ListView(...) Widget von Flutter anschauen. Daten werden häufig in Form einer Liste dargestellt. In diesem Blog hatten wir schon das Column Widget(...)   und das Row Widget(...) im Einsatz. Du weißt wahrscheinlich schon, das Du mit dem Column Widget Inhalte in der vertikalen Ebene anordnen kannst, während das Row Widget, das gleiche auf der horizontalen Ebene vornimmt. Sobald Du an den Einsatz eines dieser Widgets denkst, sollte immer die Frage beantwortet sein, ob dein Inhalt die Grenzen des Bildschirms in der entsprechenden Richtung überschreiten wird. Abhängig von der Antwort ergeben sich andere Problemstellungen. ListView ist etwas für bequeme Der Zweck eines Frameworks wie Flutter ist es Dinge einfacher zu machen. So kann man mit dem Column und Row Widget vieles, was mit dem ListView Widget möglich ist, auch ohne dieses erreichen. Man sollte sich aber immer die Frage stellen, ob sich der Aufwand lohnt. Um das Widget...

  Vor kurzem hatte ich in diesem Blog einen Post über AlertDialog(...) geschrieben. Photo by 수안 최 on Unsplash In diesem Zusammenhang bin ich dort auf, ShowDialog(...) gestossen. Es ist also keine schlechte Idee diese Funktion näher zu betrachten.  Im Zusammenhang mit AlertDialog(...) haben wir die Frage, was passiert wenn der Button gedrückt wurde, noch damit beantwortet, das der Anwender zurück auf den ursprünglichen Schirm kam.  In einer realen Anwendung wird man aber in der Regel zwei Buttons haben, ok und cancel zum Beispiel. Wir müssen diese zwei Buttons auswerten können. Grundlagen Ein Dialog in Flutter schwebt über allen anderen Bildschirmelementen. Er kann Buttons, aber auch zum Beispiel ein Bild, enthalten. Als Grundeinstellung wird der Hintergrund abgedunkelt. Um effektiv auf die Buttons reagieren zu können, benötigen wir ein Statefull Widget . Ich werde in diesem Post nicht weiter auf dieses Widget eingehen. In diesem Blog, aber auch im Internet, finden s...

Eine  Anwendung  kann immer vor der Situation  stehen, das der Anwender eine  kritische Handlung   vornimmt. Sei es, das er etwas löscht, oder eine  Grundeinstellung der Anwendung ändert. Oft wird in so einem Fall ein  Dialog angezeigt , der den Anwender explizit zwingt seine Handlung zu bestätigen, oder im Falle eines Irrtums, sie zu verwerfen. Das  Flutter SDK  liefert hierzu von Haus aus ein Widget, mit dem wir diese Problemstellung lösen können:  AlertDialog(...)  . Dieser Dialog hat große Ähnlichkeit mit einem Card(...) Widget , welches wir vor kurzem in diesem Blog betrachtet haben. Die drei Hauptbestandteile Dieser Dialog besteht aus drei Komponenten: title: Die Fragestellung an den Anwender: Beispiel: App wirklich zurücksetzten ? content: Eine ausführliche Information, wieso die Fragestellung wichtig ist. actions: Hier hat der Anwender die Möglichkeit fortzufahren, oder abzubrechen.  Was macht diesen AlertDialog spe...

Im ersten und im zweiten Teil dieser kleinen Serie, haben wir uns schon mit einigen Punkten beschäftigt, die ich wichtig für Flutter finde. Aller Anfang ist....leicht ! Für Anfänger bietet sowohl Android Studio, wie Visual Studio Code einen bequemen Einstieg zum Flutter SDK. Beide Programme erstellen uns die Ordnerstruktur und beglücken uns mit einem kleinen Demoprogramm , das wir gleich ausprobieren können. Im weiteren Verlauf des Artikel beziehe ich mich auf Visual Studio Code , aber das prinzipielle ist auch für Android Studio gültig ! Was die default Ordnerstruktur angeht, ist für uns zuerst mal das main.dart File wichtig. Es enthält das kleine Demoprogramm. In einem anderen Post werden wir noch das pubspec.yaml File betrachten. Dieses ist dann von Bedeutung, wenn es um den Import von Librarys bzw den Code von Drittanbietern geht. Das widget_test.dart File fällt unter die Rubrik "debuggen" . Ich werde in diesem Post nicht darauf eingehen, aber ...

Im ersten Teil dieses Tutorials sind wir schon auf ein paar Begriffe gestoßen, die für Flutter wichtig sind. Da wären Widgets, MaterialApp, und was mit extends , also eine Klasse erweitern, gemeint ist. Wir sollten uns noch einmal in Erinnerung rufen, das wir eine moderne Anwendung grob unterteilen können. Code der die Benutzeroberfläche erstellt und verwaltet und Code, der den Nutzwert des Programmes umsetzt. Eine Taschenrechner App braucht ebenso eine Benutzeroberfläche, wie eine Wetter App . Der Teil des Codes der den Nutzwert der App ermöglicht, dürfte aber sehr unterschiedlich sein. Taschenrechner und Wetter App benötigen wahrscheinlich Buttons, eventuell Bilder und ganz sicher Text. Das heisst vieles was man in Richtung Benutzeroberfläche programmiert, ist eventuell nicht nur in einem Projekt brauchbar. Sondern könnte, mit Anpassungen, in einem anderen wiederverwendet werden. Diese Erkenntnis führt zu dem Versuch den Code des Userinterfaces , von dem Code für die Busines...

Flutter ist das SDK von Google für die Entwicklung von App's für mobile Geräte. Ich gehe hier nicht auf die Installation ein, da gibt es genügend Ressourcen im Netz, angefangen mit der offiziellen Seite . Als IDE verwende ich Visual Studio Code , aber die Code Beispiele sollten, auch anstandslos in Android Studio laufen, beide übrigens kostenlos erhältlich. Ich persönlich habe beide installiert. Android Studio ist die ausgefeiltere Entwicklungsumgebung und hat mit den Möglichkeiten rund um den Android Emulator ein klares plus. Ich verwende trotzdem meistens Visual Studio Code, da das Programm auf meinem System im Vergleich weitaus schneller läuft. Flutter - Grundsätzliches Wer im Netz über Flutter recherchiert, wird ohne Zweifel auf den Begriff Widget stoßen. Real betrachtet handelt es sich dabei um Datenstrukturen, häufig ineinander verschachtelt. In der Flutter Welt konzipiert man eine Anwendung unter Verwendung dieser Widgets. Die Programmiersprache hinter Flutter i...