A gentle introduction to getting started with flutter.

1. Getting started with
@rihanna_ke

2. @rihanna_ke

3. ??
@rihanna_ke
An open-source toolkit, made by
UI toolkit for building beautiful, natively
compiled applications for mobile, web, and
desktop from a single codebase.

4. Tools
- to compile your code
to native code
- to develop with ease
SDK
(Software development kit)

5. - Collection of
re-usable UI blocks
(widgets)
- utility functions
- packages
Framework

6. Beautiful
No compromises
for your designers

7. Control every pixel
Never say no to your “designer”
Rich palette of tools

8. Fast
Take the speed
limiter off your app
Fast
Take the speed
limiter off your app

9. Graphics engine Skia 2D
60fps, GPU accelerated
Compiled to native machine code

10. Fast
Take the speed
limiter off your app
Productive
Develop while your
app is running

11. Paint your app to life
Hot Reload
Revolutionary capabilities for
developers and designers

12. Fast
Take the speed
limiter off your app
Open
Everything is free
100% community
contribution

13. 05/2017
12/201912/2018 08/2020
1.20
@rihanna_ke
1.0 1.12

14. Client -optimized language for
fast apps in any platform
Dart js compiler
Just in time and Ahead of time
��

15. Set up
https://flutter.dev/docs/get-started/install
@rihanna_ke

16. Set up an editor
flutter.dev/docs/get-started/editor

17. dartpad.dev
@rihanna_ke

18. codepen.io
@rihanna_ke

20. The Power of Widgets
@rihanna_ke

21. The widget catalog
https://flutter.dev/docs/development/ui/widgets@rihanna_ke
~ 395!!!

22. Layout - related Widgets
- Single-child layout widgets
(Container, Center, Expanded, Padding)
- Multi-child layout widgets
(Column, Row, ListView, Stack)
Structural Widgets
(Buttons, Icons, Text, Image)
Animation & motion Widgets:
Styling widgets
Scrolling widgets
…..
Material component Widgets
Cupertino widgets

23. Fast
Take the speed
limiter off your app
app
@rihanna_ke

25. @rihanna_ke

26. Stateless
widget
Input Data
Widget
Renders UI
Data can change
(externally)
Gets (re)- rendered
when
Input Data changes

28. Internal State
Stateful
widget
Input Data
Renders UI
Widget
Data can change
(externally)
Gets (re)- rendered
when
Input Data
or local State
changes

32. Flutter Plugins
Third party packages
pubspec.yml
@rihanna_ke

33. pub.dev
@rihanna_ke

34. Fast
Take the speed
limiter off your app
Why
Is Unique??
@rihanna_ke

35. App
@rihanna_ke

36. Web
@rihanna_ke

37. On every screen
@rihanna_ke

38. @rihanna_ke
stable
beta
alpha
alpha
developer
preview
Widget everywhere!!!

39. flutter build android [--release]
flutter build ios [--release]
flutter build linux [--release]
flutter build macos [--release]
flutter build windows [--release]

40. Great looking and fast Apps
40

41. Fast
Take the speed
limiter off your app
Getting
started with
@rihanna_ke

42. Fast
Take the speed
limiter off your app
flutter.dev/docs/get-started/flutter-for/
@rihanna_ke

43. Fast
Take the speed
limiter off your app
- Checkout examples
- Watch Flutter videos/courses
- Read Flutter documentations
- Play and practice
- Find a friend to learn with
@rihanna_ke
Newbie

44. Start with Dart
- Dart code lab
- Tour of dart
- Dart video tutorials

45. Flutter docs / blogs
- flutter.dev
- flutter.faq
- flutter.community
- flutter.medium
- Understand layouts
- Flutter CookBook
- Intro to animations
- State management intro

46. Examples, Play and practice
- flutter.showcases
- dartpad.dev
- codepen.io/flutter
- latest codelabs

47. Courses / Videos
- udacity free course
- full crash course youtube 2020
- The Flutter boring show
- Widget of the week
- Flutter in focus

48. For any question/suggestion Flutter related don’t
hesitate to contact me on
rihanna.kedir.dev@gmail.com

49. Rihanna Kedir
Photo from Unsplash
@rihanna_ke