Flutter Development
Peter Zverkov
9th June 2019 @ New York
Flutter allows you to build beautiful native apps on iOS and
Android from
a single codebase.
Flutter is based on Google Dart language.
Dart is an object-oriented, class defined, garbage-collected language using a C-style
syntax that transcompiles optionally into JavaScript. It supports interfaces, mixins,
abstract classes, reified generics, static typing, and a sound type system.
How to get started?!
Flutter configuration on
the local machine
Links and commands https://flutter.io/get-
started/install/
5-10 minutes
Checking Flutter configuration on the local machine
1) Update your path
2) Check path with using the command
echo $PATH
1) Check flutter installation and integration with using the command:
flutter doctor
Flutter Guides
Flutter for Android devs
https://flutter.io/docs/get-started/flutter-
for/android-devs
Flutter for iOS devs
https://flutter.io/docs/get-started/flutter-for/ios-devs
Cupertino iOS Style Widgets
https://flutter.io/docs/development/ui/widgets/cuperti
no
Flutter for Web devs
https://flutter.io/docs/get-started/flutter-for/web-devs
Flutter for React Native devs
https://flutter.io/docs/get-started/flutter-for/react-
native-devs
Flutter for Xamarin.Forms devs
https://flutter.io/docs/get-started/flutter-for/xamarin-
forms-devs
CookBook
https://flutter.io/docs/cookbook
Work with assets
Directory hierarchy. Within the pubspec.yaml file flutter:
block just add
assets:
- assets/fileName.fileFormat From the code side:
import 'package:flutter/services.dart' show rootBundle;
Troubleshooting
- Using files in the parent directory to avoid complicated paths.
Google Maps integration
Steps https://medium.com/@matthew.smith_66715/maps-in-flutter-a1ac49ab554b
Flutter’s team Google Maps plugin https://github.com/flutter/plugins/tree/master/packages
/google_maps_flutter
Google Maps Plugin
Fetching data from REST API
https://flutter.io/cookbook/networking/fetch-data/
https://github.com/flutterchina/dio
https://stackoverflow.com/a/49801308
JSON Processing
Basics https://flutter.io/json/#is-there-a-gsonjacksonmoshi-equivalent-in-flutter
Deserialize https://github.com/dart-
lang/json_serializable/issues/135
Releasing
Android https://flutter.io/android-release/
iOS https://flutter.io/docs/deployment/ios
Application states
https://docs.flutter.io/flutter/widgets/WidgetsBindingObs erver/didChangeAppLifecycleState.html
https://github.com/flutter/flutter/blob/master/examples /layers/services/lifecycle.dart
Packages development and customization
https://flutter.io/developing-packages/
Application without Debug/Slow/etc. How to remove annoying
Marks in the right top corner
You can use debugShowCheckedModeBanner flag
new MaterialApp(
showPerformanceOverlay: false,
debugShowCheckedModeBanner: false,
home: new LoginScreen(),
routes: <String, WidgetBuilder>{
'/main': (BuildContext context) => new MyApp(),
'/login': (BuildContext context) => new LoginScreen(),
'/restore_password': (BuildContext context) =>
new RestorePasswordScreen(),
'/settings': (BuildContext context) => new SettingsPage()
});
Bottom Navigation Bar
https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation
Navigation/Routes
https://www.raywenderlich.com/110-flutter-navigation-tutorial
Tutorials
https://flutter.io/docs/reference/tutorials
Performance profiling
https://flutter.io/docs/testing/ui-performance
Useful integrations
Flare - 2D
Github https://github.com/2d-inc/Flare-Flutter
Video demo https://www.youtube.com/watch?v=ve0r4B1D-S0
Assets Resources for The History of Everything
https://www.2dimensions.com/explore/popular/trending/all
CI/CD
https://codemagic.io/
https://flutter.io/docs/deployment/fastlane-cd
Aware of cross platform
Awaredevelopmentofcrossplatform
Start using Flutter right now
Youtube link: Flutter & Web -
Unite your code and your team
Flutter 1.5 is available!
Flutter 1.5 is live! See all of the Google I/O announcements on the
Google Developers blog.
Showcase – Made with Flutter
Questions?
[email protected]
