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

Es gibt Programmierer die sind auch gute Designer und umgekehrt. Ich denke aber das ist eher selten. Eine moderne Anwendung lebt heute nicht nur von der Funktionalität , sondern auch vom Look und Feel , also vom Design . Eine Benutzeroberfläche zu entwerfen klingt im ersten Moment einfach. Falls man es noch nie versucht hat 😀!  Die richtigen Farben auszuwählen, soll ein Bild kleiner oder grösser sein, eine Benutzeroberfläche ist eine Summe von Entscheidungen. Am Schluss sollte alles harmonieren und ansprechend wirken. Dieser Blog befasst sich vor allem mit Flutter, also mit programmieren. Aber halt, was programmieren wir ? Genau, unter anderem auch immer Elemente die eine Anwendung steuern, sprich eine Benutzeroberfläche. Es kann also nicht schaden ein Tool zu testen, das hier Unterstützung bietet. Man findet dann heraus ob man ein Flair dafür hat, oder eher nicht.  Ein einfacher Start Figma kann man in einer kostenlosten Version testen, aber das Tool hat auch Versione...

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

  Vor kurzem habe ich schon einige Posts über Listen in Dart online gestellt. Ein verwandtes Thema sind Generics in Dart. Verwandt deshalb, weil Listen eine Möglichkeit sind, eine Datensammlung zu bearbeiten. Eine Datensammlung wiederum kann verschiedene Typen enthalten.  Generics wiederum sind ein Ansatz mit solchen Typen umzugehen, wie zum Beispiel Integer oder String . Bevor wir aber in das Thema einsteigen ein kleines Vorwort: Vielleicht gehören Sie zu den Programmierern, die praktisch alles zu der verwendeten Sprache auswendig wissen. Dann Gratulation :-) !! Bei den meisten ist das nicht der Fall. So gehört ein Blick in die Dokumentation der Entwickler, oder die Verwendung von anderen Informationsquellen im Internet, für viele dazu.  Dart ist eine objektorientierte Programmiersprache und deshalb werden Sie früher oder später auf Generics treffen. Sie zu verstehen ist wichtig, um Dart richtig verwenden zu können. Erstes Beispiel Im Beispiel links, sehen Sie eine D...

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