flutter: basics
ephemeral v app state
- ephemeral: specific to widget, often part of StatefulWidget and set via setState() - app state: shared across widgets, sessions (e.g. user prefs, login info), often put into redux
check for outdated packages, update
- flutter pub outdated - flutter pub upgrade
flutter
- free, open source mobile UI framework - released in May 2017 by Google - target iOS and Android - Dart language (OO)
flutter pub get
- get packages
widget's main job
- implement build() - describe the widget in terms of other lower-level widgets
flutter widgets
- inspired by React; a component framework - blueprints - describe how to render - when state changes, rebuilds itself - framework diffs for minimal changes to underlying render tree
manual JSON serialization
- jsonDecode() in dart:convert - or, can be built into each model class - Foo.fromJson(), Foo.toJson() - see types.dart in x2flutter w/GraphQL - best for small projects
serialization / deserialization
- encoding/decoding data to/from string - often to JSON
flutter engine
- a primary component - written primarily in c++ - low-level rendering using Google's Skia graphics lib - interfaces to native platform - reactive framework and set of platform, layout and foundation widgets
flutter: imperative or declarative?
- declarative - components that build themselves based on state - simpler coding
flutter doctor
- diagnose setup issues
pubspec.yaml dependencies: auth0:
- don't specify version for latest
automated JSON serialization
- 3rd party json_serializable or built_value - uses annotations on classes: @JsonSerializable() with fromJson() and toJson() - best for medium/large projects
flutter equivalent of RN View container
- Container, Column, Row, Center
remote assets
- Image.network() to access
flutter equivalent of RN FlatList, SectionList
- ListView
dart v react native re compilation
- RN transpiles to native widgets, has JS bridge - dart compiles all the way to native code - dart can transcompile to JS - main() in dart, no specific entry point in JS
RN v flutter re routing
- RN: 3rd party libs - flutter: Route, Navigator
RN v flutter re canvas drawing/painting
- RN: 3rd party libs like react-native-canvas - flutter: CustomPaint and CustomPainter
RN v flutter re icons
- RN: 3rd party libs/frameworks for icons - flutter: Material built in, Cupertino for iOS style
RN v flutter re local storage
- RN: AsyncStorage - flutter: shared_preferences
RN v flutter re styles
- RN: CSS like style props; e.g. style prop on View - flutter: widgets and attrs; e.g. Container, Center, Padding, Align, Stack
RN v flutter re HTTP network requests
- RN: JS fetch - flutter: 3rd party http package both: .then() or async/await
RN v flutter re form input, text fields
- RN: TextInput - flutter: TextField w/TextEditingController
RN v flutter re layering components
- RN: absolute positioning - flutter: Stack()
RN v flutter re platform specific code
- RN: if (Platform.OS === 'ios') - flutter: if (Theme.of(context).platform == TargetPlatform.iOS)
RN v flutter re props
- RN: passed into component as this.props - flutter: passed into widget component constructor
RN v flutter re gesture detection
- RN: wrap in TouchableOpacity, PanResponder - flutter: wrap in GestureDetector
flutter alternatives
- React Native - NativeScript
routing widgets
- Route for app screen/page/view - Navigator for stack of routes
shared_preferences: ^0.4.3 SharedPreferences prefs = await SharedPreferences.getInstance(); _counter = prefs.getInt('counter'); prefs.setInt('counter', ++_counter);
- local storage - same as RN AsyncStorage (wraps NSUserDefaults on iOS, and SharedPreferences on Android) - key/value pairs
where to put packages
- pubspec.yaml - not package.json - will be automatically downloaded
provider package
- pubspec.yaml package for simple pub/sub - not needed if using Redux - class that extends ChangeNotifier and calls notifyListeners() when things change (publish) - ChangeNotifierProvider() above (at top) with app() as child, does the notifying - Consumer() which has builder to handle changes (subscribe) - Provider.of(context) to get data as needed
local assets
- put in assets/ - images, icons, JSON - AssetImage() to access - define in pubspec.yaml
Hot reload vs. hot restart
- reload loads changed code - restart for the entire app
flutter stated intent
- render consistently at 120 fps
stful
- snippet to create stateful class
stanim
- snippet to create stateful class with animation
stless
- snippet to create stateless class
pubspec.yaml dependencies: url_launcher: '>=5.4.0 <6.0.0'
- specify version range
design-specific widgets
- two sets - Material Design for Android - Cupertino for iOS
pubspec.yaml plugin1: git: url: git://github.com/flutter/plugin1.git
- use a github package (private if needed)
pubspec.yaml dependencies: plugin1: path: ../plugin1/
- use a local package
pubspec.yaml dependencies: some_package: another_package: dependency_overrides: url_launcher: '5.4.0'
- uses a specific package version used by dependencies
primary flutter components
1. Dart platform 2. Flutter engine 3. Foundation library 4. Design-specific widgets
a widget can define (3)
1. a structure element like a button or menu 2. a stylistic element like a font or color scheme 3. an aspect of layout like padding or alignment
