Pune Flutter Presents - Flutter 101
10 likes2,051 views
The document is an introductory presentation on Flutter, Google's UI toolkit for building natively compiled applications for multiple platforms from a single codebase. It highlights Flutter's unique features, including its performance, beautiful UI capabilities, and a rich set of widgets and tools for developers. Additionally, it discusses the Dart programming language, state management options, and concludes with a demo and job opportunities in the field.
Pune Flutter Presents - Flutter 101
- 1. Flutter 101 Introduction to Flutter Arif Amirani CTO & Co-Founder at MetroGuild Inc
- 2. Agenda ◦ What is Flutter? ◦ Compare to Native/OEM Widgets based ◦ Setting it up ◦ Demo application walkthrough ◦ Q&A 2
- 4. “Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase 4
- 5. Why Flutter? ◦ Beautiful UI ◦ Control every pixel on the screen ◦ Never say "no" to your designer ◦ Stand out in the marketplace ◦ Beautiful animations ◦ Standard (Tween, etc) and Physics-based 5
- 6. Why Flutter for Developers? ◦ Fast ◦ 60fps ◦ Compiled to native code ◦ Productive ◦ Sub-second reload times (JIT vs AOT) ◦ Iterate rapidly on features ◦ Single-codebase for faster collaboration ◦ Vibrant community & growing 6
- 7. Flutter is Unique ◦ Compiles to Native Code (ARM Binary code) ◦ No reliance on OEM widgets ◦ No bridge needed ◦ No mark-up language (only Dart) 7
- 8. What makes it unique? 8 Platform SDKs Webviews
- 9. What makes it unique? 9 Reactive (Flux)
- 10. Flutter way – Awesome! 10
- 12. Flutter Embedders 12 Google Fuchsia Fuchsia is a capability-based, real- time operating system (RTOS) currently being developed by Google. No more Java/Dalvik/Oracle ◦ Android ◦ iOS ◦ Desktop ◦ Web ◦ Raspberry Pi ◦ Android Things
- 13. Daaaaa…Dart? ◦ Open-source web programming language developed by Google. (By the guy who wrote v8 – Lars Bak) ◦ Class-based, single-inheritance with mixins, object oriented language with C- style syntax. ◦ Supports interfaces, abstract classes, reified generics, and strong typing 13
- 14. Dart is easy peasy lemon squeezy 14
- 16. Widgets everywhere ◦ Widgets are immutable ◦ Declarations of parts of the UI ◦ Like a <div> ◦ A structural element like a button, menu ◦ A stylistic element like a font, theme ◦ Part of layout like padding, center 16
- 18. What kind of Widgets are there? ◦ Generic Widget ◦ Column, Row, Flex, Padding, Opacity, etc. ◦ GestureDetector, Painter, etc. ◦ Material widgets ◦ RaisedButton, FlatButton, InkWell, etc. ◦ FloatingActionButton, etc. ◦ Cupertino widgets ◦ CupertinoActionSheet, CupertinoButton, etc ◦ CupertinoTextField, etc 18
- 19. 19
- 20. 20
- 21. 21 The widget library The package manager (pub.dev)
- 22. 22
- 24. Most common widgets ◦ Text, Image, Icon – Basic widgets ◦ Container - The div of Flutter UI. It's a convenience widget that allows you to add padding, alignment, backgrounds, force sizes on widgets, and boatloads of other things. It also takes up 0px space when empty, which comes in handy. ◦ Row, Column – Flex rule based ◦ Stack - A stack displays a list of children on top of one and other. ◦ Scaffold - This is the root of every page in your app, which gives your app a basic layout structure. It makes it easy to implement bottom navigations, appBars, back buttons, etc. 24
- 25. Stateful vs Stateless Widgets 25 BuildContext Class is nothing else but a reference to the location of a Widget within the tree structure of all the Widgets which are built.
- 27. Flutter for HTML Developers 27
- 28. State Management ◦ Scoped Model ◦ Provider (Recommended) ◦ Business Logic Component or BLoC (too complicated) ◦ Mobx ◦ Redux 28
- 29. Oh one more thing… Physics!! 29
- 30. Real Assets 30
- 32. Trim Paths – Icons/Animations 32
- 33. Setting it up 33
- 34. 34
- 35. Demo time!
- 36. 36 Thanks! MetroGuild Pune is hiring! Flutter/Python/ReactJS Developers You can find me at: ◦ https://www.linkedin.com/in/arifamirani/ ◦ @kontinuity
- 37. References ◦ https://hackernoon.com/why-flutter-uses- dart-dd635a054ebf ◦ https://medium.com/saugo360/flutters- rendering-engine-a-tutorial-part-1- e9eff68b825d ◦ https://hackernoon.com/whats- revolutionary-about-flutter-946915b09514 ◦ https://medium.com/@ralfgehrer/how- flutter-works-under-the-hood-and-why-it- is-game-changing-2335954a5bfc 37