Flutter, Dart und mehr !

Hier kommt die aktuelle Version meines Lehrbeispiels für Flutter. Ohne Anspruch auf gute, effiziente Programmierung ging es mir hier nur darum Flutter Widgets im Einsatz zu testen bzw. auszuprobieren. Auch in Flutter gilt, man lernt in dem man es tut und wahrscheinlich, in dem man es falsch tut. Das Ergebnis meines "Ausprobierens" : Drei Icons, ein wenig Text und die Erkenntnis, das ich das Layout Prinzip von Flutter beginne zu verstehen, aber noch nicht gänzlich durchschaut habe. Prinzipiell kann man sagen, das es wichtig ist, in welcher Reihenfolge Flutter die Elemente auf den Bildschirm zeichnet. Hinzu kommt, das jedes Element oder besser jedes Layout Element eigene Eigenschaften besitzt, die Auswirkungen darauf haben können, wie das Element im Kontext mit anderen Elementen auf dem Bildschirm dargestellt wird. Zu guter letzt..hier der Code . Und hier geht es weiter zum nächsten Beispiel! Follow @Darkdust1

Im ersten Beispiel habe ich die Widgets Row und Colum verwendet.Für den Anfang nicht schlecht, auch wenn ich mit dem Center Widget nicht den gewünschten Effekt erzielt habe. Im Code oben kommt als "oberstes" Widget ein Container zum Einsatz. In diesem, als Child, ein Spalten Widget (Column) mit zwei Reihen (Row) als Kinder. Die erste Reihe hat wiederum einen Container Widget als Child, sowie auch ein Column Widget mit 2 Container Children als Kinder.  Dieses Prinzip..ein Widget hat ein "Kind" oder "Kinder", diese wiederum können auch Kinder haben etc ist charakteristisch für Flutter. Der Code kann da sehr schnell unübersichtlich werden, was Kommentare (was ich bei einem so kleinen Beispiel nicht gemacht habe ) wichtig macht, aber auch eine klare Struktur des eigenen Projekts. Der Code oben hat im übrigen als Ergebnis: Inhalt zentriert Im übrigen habe ich die Frage des zentrierens über MainAxisAlignement.center gelöst und nicht mit einem Center ...

Ich bin wieder mal dazugekommen mich mehr mit Flutter zu befassen. Herausgekommen ist dabei folgendes Beispiel: Code Teil 1 Wie oft importieren wir das material.dart File und kommen dann gleich zu der main Funktion. Als erstes erstellen wir eine MaterialApp und schalten das Debuggbanner mit false aus. Als "home" definieren wir einen Scaffold , und als Teil dieses Scaffolds eine AppBar , welcher wir wiederum einen title zuweisen. Man sollte bei title daran denken, das der Title der MaterialApp, nicht der Titel ist der auf dem Bildschirm angezeigt wird. Der Scaffold hat des weiteren noch einen " body ", welchem wir HelloRow() zuweisen. Hier der kleine Hinweis, das in Dart Zeichenketten, sowohl zwischen einfachen, als auch doppelten Anführungszeichen stehen dürfen. Bis jetzt also alles keine Hexerei. Wer mehr über diese Dinge wissen möchte, informiert sich am besten direkt in den Flutter Docs . Am Anfang und ohne Übung kommt man daran auch nicht herum. Der ers...

Hilfsmittel, oder Tools, für das Programmieren gibt es einige. Hier eine kleine Auswahl nützlicher Webseiten. Wie immer ohne Anspruch auf Vollständigkeit. Color Tool, Codepen, Android Pixel Calculator Modern sind aktuell sogenannte Themes oder, ähnlich, Material Designs, die Vorgaben zum Design zusammenfassen, die für das gesamte Projekt gültig sein sollten, oder mind. für einen Grossteil. Mit diesem Tool lässt sich eine Farbpalette zusammenstellen. Für Flutter besonders nützlich: Es gibt eine Exportfunktion, die noch einen besseren Eindruck des Resultats vermittelt. Natürlich ist es relativ aufwendig sich ein passendes Design zu erstellen. Aber es ist immer noch viel schneller, als sich Gedanken im nachhinein, oder während des Programmierens darüber machen zu müssen. Hier der Export Button: Wenn man auf den Button clickt, hat man die Auswahl zwischen Android, iOS und Codepen . Ich finde vor allem Codepen interessant, da es einen ersten Eindruck über die Auswirku...

Fangen wir mal an damit zu versuchen, das Konzept das hinter Flutter steht zu verstehen. An erster Stelle steht hier sicher das Konzept der Widgets, das sich gut in das Konzept des objektorientierten Programmierens fügt.Widget stammt aus dem englischen, wie oft bei Softwarebegriffen. Leider gibt es keine eindeutige Übersetzung für die Deutsche Sprache. Relativ nahe kommt sicher: "das Widget -- Komponente einer Benutzeroberfläche". Diese Komponenten, oder eben Widgets, erlauben es in Flutter eine Benutzeroberfläche zu programmieren. Widgets kann man sich durchaus als Objekte vorstellen, die veränderbare und unveränderbare Eigenschaften besitzen. Eine mobile Flutter App besteht dementsprechend aus einer Anzahl x an Widgets, die die gewünschte Softwareoberfläche erzeugen, plus der allgemeinen Programmlogik. Die allgemeine Programmlogik steuert die App, führt Berechnungen aus etc, steuert die Widgets. Hier ein einfaches Beispiel: void main() { runApp (   Center (   ...

Flutter ist ein SDK von Google, das es erlaubt, Interfaces bzw Apps zu programmieren, die sowohl auf dem  Android  - Betriebssystem , als auch auf Apples  iOS  funktionieren. Das verkürzt die Entwicklungszeit für kommerzielle Projekte deutlich. Flutter ist eine "Erweiterung" der Programmiersprache  Dart . Flutter und Dart sind relativ neu und kostenlos. Bis anhin gibt es zu beiden kaum deutschsprachige  Ressourcen . Da mich aktuelle Technologien schon immer fasziniert haben, werde ich auf diesem  Blog  Episoden meiner Abenteuer mit dieser Software veröffentlichen. Wer ebenfalls in das Thema eintauchen möchte braucht zuerst eine funktionierende Entwicklungsumgebung. Hier ist meine: Editor:  Visual Studio Code  von Microsoft. Nach seiner Installation, müssen noch die Erweiterungen für Dart und Flutter installiert werden. Dies kann man praktischer Weise in der Anwendung selbst machen. Android:  Android Studio  von Go...

Ich habe mir vorgenommen eine Rubrik News zu starten, mit Posts zu Artikeln / Videos, die ich für interessant und lehrreich halte. Starten möchte ich mit einer Video Serie zu Flutter, die eine gute Einführung zu Flutter sein kann. Sie richtet sich nicht ganz an Anfänger, aber ist auch nicht zu kompliziert: Das Advents Design passt ja eigentlich auch gut zur Jahreszeit. Flutter hat nun die Version 1.0 erreicht. Hier geht's zum Post der Entwickler . Flutter basiert ja bekanntlich auf der Programmiersprache Dart. Leider sind zu dieser Sprache gar nicht so viele gute Artikel zu finden. Einer davon ist sicher diese Einführung zu Mixins in Dart . BloC Pattern ist ein Thema, das nicht nur für Flutter diskutiert werden kann. Eine gute Einführung dazu (englisch), ist dieses Video: So..das war es für heute 😃

Flutter ist ein ein SDK für die Programmiersprache Dart. Somit ist auch Flutter, wie Dart, objektorientiert. Ein erster Einstieg kann folgender Code sein: import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Directionality(         textDirection: TextDirection.ltr,         child: new Text("Hello Flutter"));   } } Im Detail bedeutet das : import 'package:flutter/material.dart'; Wir importieren die Bibliothek material.dart und haben so Zugriff auf alle Funktionen / Objekte die darin enthalten sind. void main() => runApp(new MyApp()) ; Das ist jetzt eigentlich schon unser "Hauptprogramm". Wobei der Teil nach => eine kurze Schreibweise von void main() { runApp(new MyApp()); } ist. runApp ist eine Funktion und nimmt als Argument eine neue ...

Im ersten Post zu diesem Thema haben wir ein ganz einfaches Beispiel genommen. Hier ein weiteres: Quellcode: Column zentriert Dieser Beispielcode, wenn in Android Studio ausgeführt, ergibt bei der Ausführung folgendes Bild: Android Studio AVD Ausgabe Die Zentrierung erreicht man, indem das Column Widget als "Child" eines Center Widgets implementiert ist. In diesem Fall wurden die drei Text-Widgets vom ersten Beispiel, mit Container-Widgets ersetzt. Damit lassen sich jetzt einige Dinge testen. Mehr in Kürze !