Flutter Day

In regards to Flutter Day events series by Google, I gave a deep understanding of Flutter to developers in Burundi.

Transcript

1. Jacqueline Kendi Burundi
2. Flutter is Google’s UI Framework Helping developers craft high-quality native experiences across multiple platforms in record time.
3. How Flutter works YOUR APP Widget rendering Platform channels Canvas Events Location Bluetooth Audio Sensor Camera etc... Services
4. - To avoid performance problems caused by the need of a bridge, Flutter uses Dart language which is compiled AOT into native code for multiple platforms. Therefore Flutter communicates with the platform without going through a bridge that does a context switch.
5. Widgets Root Widget App Bar Column Text Text V Burundi Drums rhythms are cool. True False
6. - Widgets acts a bedrock of Flutter apps, hence everything in Flutter is a widget. - The previous diagram shows how widgets are nested in the root widget (The yellow color). - The text widget in the green lane is a Stateless widget because it does not change, however the radio buttons (true/false) is a Stateful Widget as it is dynamic.
7. Stateless widgets • Immutable - this means that it does not change. • Examples - Text, Icon, IconButtons Stateful widgets • Dynamic - changes as you progress on the UI • Examples - checkbox, Radio, Slider, Inkwell,Form and TextField
8. Layouts 1. Row - You can use a Row widget to arrange widgets horizontally 2. Column - Column widget to arrange widgets vertically. 3. ListView - ListView, a column-like widget, automatically provides scrolling when its content is too long for its render box. 4. Stack - Use Stack to arrange widgets on top of a base widget—often an image. The widgets can completely or partially overlap the base widget. 5. GridView - GridView provides two prefabricated lists, or you can build your own custom grid. When a GridView detects that its contents are too long to fit the render box, it automatically scrolls.
10. Why Dart? • Fast • JIT compilation that helps in hot-reload/hot-restart • AOT compilation to native machine code like Android and iOS. • Easy to create smooth animations and transitions. • Dart allows Flutter to avoid the need for a separate declarative layout language like JSX or XML, or separate visual interface builders, because Dart’s declarative, programmatic layout is easy to read and visualize. • Easy to learn
11. Environments
12. Material Design Firebase VS Code Android Studio Android APIs iOS APIs Redux Xcode 3rd-party Android SDKs Works with popular tools and platforms 3rd-party iOS SDKs
13. Resources ★ https://flutter.dev/ ★ https://flutter.dev/docs/codelabs ★ https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw ★ https://flutterbyexample.com/ ★ https://medium.com/flutter-community ★ https://flutterx.com/
14. Thank you!! flutter.dev