Flutter, Dart und mehr !

In Flutter kennen wir die AppBar , aber auch die BottomNavigationBar .  In diesem Post betrachten wir die letztere im Zusammenhang mit Modal Bottom Sheet . Die Erklärung von Wikipedia: Modale Dialoge sperren den Rest der Anwendung (oder sogar der Benutzeroberfläche), solange der Dialog angezeigt wird. Bottom Sheet's gibt es in zwei Varianten: Persistent und Modal . Beide fungieren als, im Vergleich zum "Main Screen", kleine Anzeigeflächen für Informationen. Während die Variante Modal die restliche App sperrt solange aktiv, fungiert die persistente Version als Ergänzung zur laufenden App. In diesem Post schauen wir uns die Modal Variante an. Der Beispiel Code arbeitet mit fluttertoast , einer Library die wir zuerst im pubspec.yaml File einbinden: dependencies: flutter: sdk: flutter fluttertoast: ^ 3.1 . 0 Der erste Teil des Beispielquellcode's ist wie immer der Einstieg in die App: import 'package:flutter/material.dart' ;

Im ersten Teil zu Routing in Flutter haben wir uns routes: angesehen . Diesem Eintrag in unserer MaterialApp konnten wir eine Map übergeben, die unsere Links zu anderen Seiten der App enthielt. In diesem Post geht es nun um onGenerateRoute:  , ebenfalls ein Eintrag der MaterialApp. Aber noch einmal ein Blick zurück: In der MaterialApp haben wir bis jetzt mindestens den home: Eigenschaft des Widgets gesetzt. Im Routing System von Flutter entspricht das "/" . Im Bildschirm Stack ist home: bzw "/" immer der "unterste" Bildschirm . import 'package:flutter/material.dart' ; import 'package:ongeneratetd_001/routing_konstanten.dart' ; import 'router.dart' as router; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @ override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , onGener

Ich habe in diesem Blog schon einmal über das Routing geschrieben. Das ist jetzt schon eine Weile her und da ich selten Gebrauch davon machen musste, ist es Zeit das Wissen ein wenig aufzufrischen. Das wichtigste vorneweg: In Flutter besteht ein Bildschirm aus mindestens einem, meistens aus mehreren, miteinander verbundenen Widgets. Der Name des ersten (oder alleinigen) Widgets dieses Bildschirms, ist auch gleichzeitig der Bildschirm Name. Das ist insofern wichtig, da uns Flutter die Möglichkeit bietet, mit Hilfe der Namen zu navigieren. Stapelverarbeitung Dabei organisiert Flutter seine Bildschirme von Haus aus, als ein Stapel. Wenn man sich einen Stapel Bildschirme vorstellt, ist der oberste in diesem Stapel,  jeweils der Bildschirm, den wir sehen. Möchten wir auf einen anderen Bildschirm navigieren, müssen wir den Ziel Bildschirm auf diesen Stapel packen, was Flutter dann .push nennt. Möchten wir einen Bildschirm zurück gehen in diesem Stapel müssen, wir den obersten B

Vor kurzer Zeit habe ich zwei Post zum Thema Flutter und JSON online gestellt. Dieser Post ist eine Fortsetzung zu diesen Artikeln. Wir werden in diesem Post zwei neue Librarys benutzen, beide im pubspec.yaml File eintragen, diesmal in  der Rubrik dev_dependencies: build_runner: und  json_serializable: Noch einmal zur Erinnerung ein Code Ausschnitt: class Message { final String subject; final String body; Message( this .subject, this .body); Message.fromJason(Map < String ,dynamic > json) : subject = json[ 'subject' ], body = json[ 'body' ]; } Unsere Klasse ist einfach Sie weist den Klassen Variablen die entsprechenden JSON Inhalte zu. Bei JSON Daten mit wenigen Feldern kann man das von Hand machen, also wie im Fall oben. Bei einer grösseren Anzahl an Feldern kann man diesen Vorgang aber auch automatisieren. So sieht meine Ordner Struktur aus, bevor wir das automatisieren: Die Folge dieses Automatisieren wird s

Wer ein Smartphone benutzt ist wahrscheinlich schon mit folgendem Effekt konfrontiert gewesen: Man dreht das Gerät in eine andere Lage und der Bildschirm passt sich dieser neuen "Orientierung" an. Diesen Effekt kann man auch in Flutter erzielen. Zuerst sollte man aber wissen, wie trifft die Software die Entscheidung, in welchem Modus das Gerät sich befindet. Die Information in welcher Lage sich das Smartphone sich befindet, kommt von dem Gerätesensor. Diese ist also für die Plattform ( Android / iOS ) verfügbar. Flutter hat diese Auswertung im SDK implementiert, wobei es noch eine Möglichkeit über einen Plattform Channel gäbe, an diese und weitere Informationen zu gelangen. Die Entscheidung ob Portrait oder Landscape Modus wird dabei ganz einfach getroffen: Breite > Höhe => Landschaftsmodus (Landscape) import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @ override Wid

Die Programmiersprache Dart bietet viel Bemerkenswertes. Je nach den eigenen Vorlieben, braucht man die einten Möglichkeiten mehr und die anderen weniger. Wie in anderen Programmiersprachen auch, gibt es in Dart oft nicht nur eine Variante, wie man ein Problem lösen kann. Ich schreibe diesen Post eigentlich auch, um mir diese Punkte wieder in Erinnerung zu rufen. Der Code ist, wie in allen Beispielen auf diesem Blog, getestet und mit der aktuellen Version von Dart lauffähig. Im Falle von Dart ist das 2.3.2 und von Flutter   v1.5.4-hotfix.2.  Auch eine Funktion hat einen Typ bool demofunktion(){ var meineVariable = true; return meineVariable; } void main() { print (demofunktion()); } Im Code oben sehen wir eine Funktion die einen bool Wert retourniert. Durch die Schreibweise bool demofunktion(){...}  wissen wir beim lesen sofort was für einen Variablen Typ die Funktion zurückgibt. Sollten wir eine sehr große Funktion  haben und der Var

Und wieder ein Post zu JSON wird man sich denken. Aber ich vermute mal das ist auch nötig. JSON ist ein sehr häufig anzutreffendes Format. Wenn man also mit externen Quellen arbeiten möchte, ist jede Kenntnis darüber nicht schlecht. Es gibt einige Websiten für Testdaten , die einem Programmierer das Leben einfacher machen, JSONPlaceholder ist eine davon. Sie stellt JSON Datensätze zur Verfügung, die man dann über das Netz in die App laden kann. Wie man sieht bietet sie einige Möglichkeiten. Einfach eine Variante anklicken und man kann im Webbrowser die entsprechenden Daten betrachten. Zu unserem Beispielcode: 1 2 3 4 import 'package:flutter/material.dart' ; import 'dart:async' ; import 'dart:convert' ; import 'package:http/http.dart' as http; Im Code oben importieren wir diesmal ein wenig mehr: material.dart für unsere Widgets, wie immer dart:async , für sie asynchrone Verarbeitung von Code dart:convert , für das Dat

Im ersten Teil zu diesem Thema, den man hier findet , haben wir uns einen Code angesehen, der ein JSON Asset in unsere App einliest und mithilfe eines ListView Widgets auf den Bildschirm bringt. In diesem Post geht es darum diesen Code zu verbessern. Wer den ersten Teil nicht gelesen hat, sollte das nachholen. Ohne diese Info, wird es schwierig diesem Teil zu folgen . Da ich selbst am lernen von Flutter und Dart bin, ist das schreiben dieses Artikel nicht nur eine Wiederholung von etwas gelerntem, sondern dient auch der nochmaligen Reflektion :-) Das Code Beispiel stammt aus einem YouTube Video von Zaiste , welches man hier findet (englisch). Der komplette Code ist auch auf GitHub . 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 class _MyHomePageState extends State<MyHomePage> { List nachrichten = const []; Future loadNachrichtListe()async{ var content = await rootBundle.loadString( "assets/data/message.json" ); var colle

Es gibt bis jetzt noch nicht viel Bücher die man sich zum Thema Flutter kaufen könnte. Ein wenig erstaunlich, da dieses SDK von Google ja schon eine Weile öffentlich verfügbar ist. Vielleicht hat es aber auch mit dem sich veränderten Nutzer Verhalten zu tun, oder aber auch mit der sehr guten Dokumentation durch die Entwickler. Was es durchaus gibt sind online Quellen und YouTube Videos. Zusätzlich, wer mag, kann auch Onlinekurse besuchen (kostenpflichtig). Gegenüber kostenpflichtigen Online Kursen bin ich skeptisch. Ich frage mich immer, was lerne ich dort, was nicht schon jetzt online als Information verfügbar ist ? Es kommt auf den Lehrer / Lehrerin an, wie gut man etwas lernt, könnte man jetzt einwerfen. Wohl wahr, darum..ich bin skeptisch. Aber es ist durchaus möglich, das solche Kurse einen beachtlichen Nutzwert haben..also auf zu Udemy und Co. wer das möchte ! Flutter in Practice Autor: Zaiste Diese Video Serie, sie ist noch nicht abgeschlossen, erklärt in ein

Wer sich, und wenn es nur oberflächlich ist, mit programmieren befasst wird auf den Begriff JSON stoßen. Wenn man Großmama Google danach fragt, bekommt man von Großvater Wiki diese Definition angeboten: Die JavaScript Object Notation, kurz JSON , ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. Ein Datenformat ist ein Standard, den sich jemand ausgedacht hat. Wieso und warum ist interessant, aber sekundär. JSON ist ein Datenaustausch Format und ist aktuell im Web weit verbreitet. Viele Quellen mit denen man interagieren kann, bieten ihre Daten in diesen Format an. In aller kürze (ohne ein Tutorial zu JSON ersetzen zu wollen) hier das wichtigste: Der Inhalt eines JSON Files befindet sich entweder zwischen [..] oder {...} Klammern. [...] = Der Inhalt ist eine Liste. Diese Liste kann ein oder mehrere Objekte enthalten. {...} = Der Inhalt ist ein Objekt aus einem oder mehreren Schlüssel/Wert Paaren. Beispi