OK Flutter, Welcome to All platform era

#mobileconf18 www.nextﬂow.in.th | facebook.com/nextﬂow
OK, Flutter.
Welcome to the All Platform era

Pon
Teerasej Jiraphatchandej

nextﬂow.in.th

Ah… Eh? Oh…

Now. How. Adapt.

Now.

Platforms

#mobileconf18 www.nextﬂow.in.th | facebook.com/nextﬂow By Cricilla

All Platforms

Demo
https://nextﬂow.in.th/2018/capacitor-with-ionic-beginner-thai/

60fps

How.

UI & Logic

Concept always work.

#mobileconf18
class TeerasejClass extends PapaClass {
String IAmProperty;
void IDoNothing() {
}
}

User Interface

#mobileconf18 www.nextflow.in.th | facebook.com/nextflowIcon made by Smashicons from www.flaticon.com

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),
),
);

#mobileconf18 www.nextflow.in.th | facebook.com/nextflow By Jeff Kramer

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,
),
],
),
),

Logic

// Start point
void main() {
runApp(new MyApp());
}

// Things we don't change it
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Widget();
}
}

#mobileconf18
// We think this will be changed a lot
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() {
return new _MyHomePageState();
}
}

// Let it go!
class _MyHomePageState extends State<MyHomePage> {
// properties
// methods
@override
Widget build(BuildContext context) {
return new Widget();
}
}

Adapt.

Package

Native Integration

#mobileconf18
class MainActivity() : FlutterActivity() {
private val CHANNEL = "samples.flutter.io/battery"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
…
result.success(…)
}
}
}

#mobileconf18
@implementation AppDelegate
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions: … {
FlutterViewController* controller
= (FlutterViewController*)self.window.rootViewController;
FlutterMethodChannel* batteryChannel = [FlutterMethodChannel
methodChannelWithName:@"samples.flutter.io/battery"
binaryMessenger:controller];
[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
result(@batterylevel)
}];
…
}

#mobileconf18
static const MethodChannel methodChannel =
MethodChannel('samples.flutter.io/battery');
Future<Null> _getBatteryLevel() async {
String batteryLevel;
final int result
= await methodChannel.invokeMethod('getBatteryLevel');
}

Siri Shortcut

Demo
https://nextﬂow.in.th/2018/google-ﬂutter-siri-shortcut-mini-demo/

Resource
• Flutter Official Website https://flutter.io

• Thailand Flutter Developer

• https://github.com/teerasej/awesome-flutter (รวมข้อมูลการเรียนรู้
ต่างๆ ของ Flutter แปลไทย)

• Youtube สอน Flutter ภาษาไทย https://goo.gl/mzdR5Y

Thank you :)
teerasej
www.nextﬂow.in.th

OK Flutter, Welcome to All platform era

More Related Content

Similar to OK Flutter, Welcome to All platform era (11)

More from Teerasej Jiraphatchandej (20)

Recently uploaded (20)

OK Flutter, Welcome to All platform era