This is the repo for swyx's blog - Blog content is created in github issues, then posted on swyx.io as blog pages! Comment/watch to follow along my blog within GitHub
Unlike RN, Flutter doesn't use a Javascript bridge, it compiles straight to native iOS/Android files. (But in "slow mode" development, it operates as an interpreted language so you can still do hot reloading)
Unlike RN, Flutter comes "batteries included", with opinions on routing, animations, i18n and themes!!! In particular it comes with a bunch of inbuilt widget styles where you can use Material Design or "Cupertino" (aka Apple "inspired") designs right out of the box. Also, did I mention routing?!?!?! Here, let me do it justice:
FLUTTER COMES WITH ROUTING!!!1!!!
The animations are seriously good. Can you do this in React Native?
{% youtube CEcFnqRDfgw %}
Like RN, Flutter uses a lot of familiar paradigms including class extensions, setState and event handlers. If you can read RN, you can read Flutter:
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
The install experience is very smooth:
git clone -b alpha https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
flutter doctor
Give it a shot! http://flutter.io and the Google Codelab tutorial is here. or watch the Google I/O video!
source: devto devToUrl: "https://dev.to/swyx/flutter-for-react-native-devs-in-30-seconds-78g" devToReactions: 50 devToReadingTime: 2 devToPublishedAt: "2017-12-03T16:06:18.671Z" devToViewsCount: 6018 title: Flutter for React Native Devs in 30 Seconds published: true tags: inthirtyseconds, flutter, react native
You may have heard of Flutter, Google's answer to React Native. What should you know?
FLUTTER COMES WITH ROUTING!!!1!!!
{% youtube CEcFnqRDfgw %}
class
extensions,setState
and event handlers. If you can read RN, you can read Flutter:Give it a shot! http://flutter.io and the Google Codelab tutorial is here. or watch the Google I/O video!
{% youtube w2TcYP8qiRI %}