Introduction to Flutter Muhammed Salih Guler @salihgueler 24.01.2019 

About me ● Android/Flutter Developer ● Organizer of Flutter Berlin meetup @FlutterBerlin ● Blogger (You can find it here) ● Public speaker ● Mentor @salihgueler 24.01.2019 

What is Flutter? ● Flutter Google’s cross-platform development SDK ○ Development for iOS and Android. ○ It is available for desktop applications, in the future web applications with Hummingbird ● Single codebase for cross-platform development @salihgueler 24.01.2019 

What is Flutter? ● It uses Dart Language ○ Dart compiles to ARM and x86 code, so that Dart mobile apps can run natively on iOS, Android, and beyond. ○ Dart provides optimizing ahead-of-time compilation to get predictably high performance and fast startup across mobile devices and the web. ○ It is Reactive @salihgueler 24.01.2019 

What is Flutter? @salihgueler 24.01.2019 High-level overview Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino 

Why should we use Flutter? ● Productivity ○ Creating a multi platform application from single codebase ○ Prototyping and iterating is easy. ○ Hot Reload - Hot Restart ○ Platform Channels ● Design ○ You can use a lot of out of the box widgets from Cupertino or Material libraries ○ Because of it’s 2D rendering engine, create views and animations at 60 fps ● Tools ○ You can use Android Studio, IntelliJ Idea and VSCode @salihgueler 24.01.2019 

Live Coding Creating a project and showing Hot Reload 

Widgets ● Everything is a Widget. ● Widgets are the basic building blocks of a Flutter app’s user interface ● They are immutable ● Highly composable ● Inherits the information from parent widget @salihgueler 24.01.2019 

Stateless Widgets ● A widget that does not require mutable state. A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. @salihgueler 24.01.2019 

Stateless Widgets @salihgueler 24.01.2019 StatelessWidget constructor build A single StatelessWidget can build in many different BuildContexts 

Stateful Widgets ● A widget that has mutable state. State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState. @salihgueler 24.01.2019 

Stateful Widgets ● A widget that has mutable state. State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState. @salihgueler 24.01.2019 

State @salihgueler 24.01.2019 ● The logic and internal state for a StatefulWidget. 

(created) initState dispose (dirty) build (clean) didUpdateConfig setState (defunct) A State object can rebuild if ... ... it receives a new configuration … it changes its internal state @salihgueler 24.01.2019 

Other State Management Methods @salihgueler 24.01.2019 ● Scoped model ● Redux ● BLoC / RxDart 

Scoped model @salihgueler 24.01.2019 ● It’s a package developed by Brian Egan. ● A set of utilities that allow you to easily pass a data Model from a parent Widget down to it's descendants. In addition, it also rebuilds all of the children that use the model when the model is updated. This library was originally extracted from the Fuchsia codebase. 

Scoped model @salihgueler 24.01.2019 ● The Model class. You will extend this class to create your own Models, such as SearchModel or UserModel. You can listen to Models for changes! ● The ScopedModel Widget. If you need to pass a Model deep down your Widget hierarchy, you can wrap your Model in a ScopedModel Widget. This will make the Model available to all descendant Widgets. ● The ScopedModelDescendant Widget. Use this Widget to find the appropriate ScopedModel in the Widget tree. It will automatically rebuild whenever the Model notifies that change has taken place. 

Redux @salihgueler 24.01.2019 ● StoreProvider - The base Widget. It will pass the given Redux Store to all descendants that request it. ● StoreBuilder - A descendant Widget that gets the Store from a StoreProvider and passes it to a Widget builder function. ● StoreConnector - A descendant Widget that gets the Store from the nearest StoreProvider ancestor, converts the Store into a ViewModel with the given converter function, and passes the ViewModel to a builder function. Any time the Store emits a change event, the Widget will automatically be rebuilt. No need to manage subscriptions! 

BLoC/RxDart @salihgueler 24.01.2019 ● BLoC is a pattern created and used by Google; it will help us to achieve a few things: ○ Separate business logic from presentation logic ○ Embrace the asynchronous nature of UI apps ○ Can be reused across different Dart applications, regardless of being a Flutter app or an Angular Dart application. 

Community 

Flutter Community @salihgueler 24.01.2019 ● Medium: http://medium.com/flutter-community/ ● Slack: https://flutterstudygroup.slack.com/ ● Facebook: https://www.facebook.com/FlutterCommunity/ ● Humpday Q&A: https://medium.com/flutter-community/hump-day-q-and-a/home 

Where to start? @salihgueler 24.01.2019 ● Flutter website: http://flutter.io ● GitHub: https://github.com/flutter ● Samples: http://fluttersamples.com/ ● Medium: Everything :) Jokes aside, (https://medium.com/flutter-io/https-medium-com-flutter-io-pitching-flutter-2d4f494e47d1 And https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514 Really good starts.) ● Udacity course ● Udemy courses 

Thanks! Twitter: @salihgueler GitHub: @salihgueler Medium: @muhammedsalihguler Email: [email protected] m