Crafting native Flutter apps

Pavel Lavreshin

github.com/plavreshin

FE/BE background

- Flexbox inspired layout

- CSS-like decoration and text styles

- Declarative style of UI layout (GWT-like*)

- Hot reload / debugging capabilities

Joining Flutter platform I

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

vs 

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

RN/iOS/Android

Joining Flutter platform II

- Stateless and Stateful components aka Widgets (React PureComponents)

- Dependency management via Pub Package manager / Cocoapods for native deps

- Dart language resembles Typescript / JS

- Async / await keywords to work with futures (recall Promises and ES6 async/await)

// React Native
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

// Flutter
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Under the hood

Tooling and dev tools

Yours favourite dev tools like VsCode / Android Studio
Flutter DevTools with debugging and profiling support (resembles Chrome devtools)
Convenient unit testing out of the box
Snapshot testing

Pros

Cons

Development experience

- Learning curve is OK

- Single codebase; interoperability with native modules

- Composition > inheritance

- Streams / Future support (aka Reactiveness)

- Material UI components (might be considered as Cons...

- Bundle / download size

- First stable 1.0 release in December 2018 (though RN is ~ v0.6 still)

- Over 5K issues in Github reported

- Clean build time (vs native Swift / Kotlin builds)

- Glitches with native keyboard

- Time to click

Self-hosted

- Fastlane support

- Gitlab

- Macmini

Cloud

- Bitrise