Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup

1,301 views

Published on

Eine Einführung in Flutter und die Entwicklung mobile Apps mit Flutter. Was kann Flutter? Was ist Dart? Wohin geht die Reise mit Flutter Web oder Flutter Desktop?

Published in: Technology
  • Be the first to comment

Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup

  1. 1. Flutter 101 Eine kleine Einführung
  2. 2. Agenda ● Was ist dieses Flutter und warum sollte ich es lernen? (10 min) ● Was kann ich mit diesem Flutter cooles machen? (45 min) ● Was mache ich jetzt mit diesem Wissen? (5 min) ● Austausch, Pizza und Getränke (bis 21 Uhr)
  3. 3. Über uns: Das Team hinter coodoo
  4. 4. https://coodoo.de Unser Team
  5. 5. https://coodoo.de Unsere Speaker Markus ist Gründer von coodoo und verantwortlich für agiles Projektmanagement und Scrum orientierte Softwareentwicklung. markus.kuehle@coodoo.de Markus Kühle, GF Jan ist ebenfalls Gründer und Experte für kundenorientiertes UI/UX, insbesondere unter Verwendung von Flutter und Angular. jan.marsh@coodoo.de Jan Marsh, GF
  6. 6. Consulting Produkte HALBZEIT.app Alarmcloud Workhorse Unsere Arbeit https://coodoo.de
  7. 7. Über Flutter
  8. 8. Was ist Flutter? “Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.”
  9. 9. Flutter hilft das eigene Branding und Design in einer mobilen App zu verwirklichen ohne Abstriche machen zu müssen. Für wen eignet sich Flutter? Design Prototyp Entwicklung Prototypen lassen sich in Rekordzeit erstellen. Man erhält in extrem kurzer Zeit eine klickbare App. Entwickler profitieren von einer sehr guten IDE Unterstützung, großer Auswahl von Widgets und weiteren Features wie z.B. Hot Reload. Dem eigenen Branding steht nichts im Weg. Die Hürde zum Einstieg in die Entwicklung sinkt. Entwicklung von Features steht im Vordergrund.
  10. 10. Ein Framework hebt ab Sucheingaben auf Google von 2014 bis 2019
  11. 11. Ein Framework hebt ab Sternvergabe für Flutter auf Github https://github.com/flutter/flutter 73.554
  12. 12. Ein Framework hebt ab 2 Flutter Meetups pro Tag finden durchschnittlich auf der ganzen Welt statt.
  13. 13. Flutter: Beispiele Google Adwords 10.000.000 Downloads Alibaba 50.000.000 Downloads Hamilton Musical 500.000 Downloads Reflectly 500.000 Downloads
  14. 14. Flutter: Wie bekomm ich es? https://flutter.dev/docs/get-started/install https://flutter.de/artikel/flutter-entwicklungsumgebung-einrichten.html
  15. 15. Flutter: Kurzes Cheatsheet! flutter create app Erstellt eine neue Flutter-App --template = app, plugin, package --sample = id of scaffold --list-samples = json output filename flutter doctor Prüft ob dein Setup korrekt ist flutter install Installiert die App und alle Abhängigkeiten der pubspec flutter devices Show a list of connected devices flutter run Startet eine Debug Version der App --release = Startet eine Release Version der App -d = Id des gewünschten Device flutter upgrade Automatisches Updaten der Flutter Installation flutter build Baut ein Release für Android & iOS flutter channel Welche Flutter Version gerade genutzt wird
  16. 16. Zeit zum Davonfluttern :)
  17. 17. Dart: Basiswissen
  18. 18. ● Open-Source Web Programmiersprache von Google ● 2011 veröffentlicht, 2014 standardisiert (ECMA 408), aktuell 2.4.0 ● Kompiliert in ARM and x86 Code, Dart VM & Javascript Cross-Compiler für Webapps ● Features ○ Strongly Typed (Type Checking) ○ Klassen, Abstrakte Klassen, Interfaces, Mixins ○ Functions ○ Getter & Setter ○ Lambda’s ○ Async/Future ○ Generics Dart: Programmiersprache (in 2min.)
  19. 19. Dart: Programmiersprache (in 2min.)
  20. 20. Dart: Eigenheiten
  21. 21. Dart: Packages https://pub.dev
  22. 22. Flutter: Basiswissen
  23. 23. Cross-Platform Landscape
  24. 24. Cross-Platform Framework: 1.Generation
  25. 25. Cross-Platform Framework: 2.Generation
  26. 26. Cross-Platform Framework: Flutter https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  27. 27. Everything is a Widget https://flutter.dev/docs/reference/widgets
  28. 28. Layouts https://flutter.dev/docs/reference/widgets
  29. 29. Inputs https://flutter.dev/docs/reference/widgets
  30. 30. Dialogs https://flutter.dev/docs/reference/widgets
  31. 31. Flutter: Der Widget-Baum
  32. 32. Flutter: Der Widget-Baum
  33. 33. Flutter: Web/Flutter Syntax
  34. 34. ● Eine Sprache für die gesamte Logik ● Einfaches Debugging (One Debugger, Formatter) ● Easy Code Refactoring (Try refactoring HTML/CSS) Warum keine Markup-Syntax?
  35. 35. Flutter: Base Widgets
  36. 36. Testen wir unser neues Wissen!
  37. 37. Flutter: Ausblick
  38. 38. Flutter: Mind-Blowing https://fuchsia.dev/fuchsia-src/glossary
  39. 39. Web, Desktop: Erste Prototypen https://flutter-widget-livebook.blankapp.org/basics/introduction/
  40. 40. Web, Desktop: Erste Prototypen https://www.nytimes.com/games/prototype/kenken
  41. 41. Flutter: Lernkurve React-Native, NativeScript, PhoneGap... Flutter 3. Party Plugins + Framework Updates Basiswissen Java, C#, C++ vorhanden Time Time Komplexität Komplexität Basiswissen Skriptsprache JS, Python, PHP vorhanden
  42. 42. Bootcamp: Proof of concept (48h) Java Developer JavaScript Developer Text to Speech Pong Game
  43. 43. Fazit
  44. 44. Warum sollte ich es lernen? ● Gleicher Quellcode, mehrere Plattformen ● Riesen UI-Bibliothek (Widgets) ● Stateful Hot Reload macht die Entwicklung extrem schnell ● Open Source erleichtert den Einstieg ● Wachsende Community
  45. 45. Flutter.de https://flutter.de
  46. 46. Join the Community Meetup: meetup.com/de-DE/Rhein-Main-Flutter-Meetup Website: https://flutter.de Slack: Flutter-de Twitter: @flutter_de
  47. 47. Wie geht’s weiter? 24.10.2019 Flutter: It’s all about Widgets
  48. 48. Vielen Dank!

×