Flutter for Android Developers

This talk is meant for Android developers looking to apply their existing Android knowledge to build mobile apps with Flutter. In this talk, we are going to explore how to equivalent design Activity UI, LinearLayout, FrameLayout, RecycleView and Gestures using Flutter.

Transcript

1. Flutter For Android Developers Burhanuddin Rashid
2. What is Flutter ?
3. • Google’s mobile SDK. • High-quality. • Native interfaces on iOS/Android. • Record time. • Dart.
4. Why Flutter ?
6. Hot Reload
7. Material Design
8. Native Performance
9. Why Android Developers ?
11. Migrating
12. https://flutter.io/get-started/editor/
15. Activity
16. AndroidManifest.xml <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> <meta-data android:name="io.flutter.app.android.SplashScreenUntilFirstFrame" android:value="true" /> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> Activity
18. Toolbar <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar /> </android.support.design.widget.AppBarLayout> <FrameLayout/> <android.support.design.widget.FloatingActionButton/> </android.support.design.widget.CoordinatorLayout> Scaffold import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, ), )); appBar: new AppBar( title: new Text("My Title"), ), body: new Container( color: Colors.red, ), Activity
19. Menu <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item /> <item /> <item /> </menu> override fun onCreateOptionsMenu(menu: Menu?): Boolean { menuInflater.inflate(R.menu.sample_menu, menu) return true } override fun onOptionsItemSelected(item: MenuItem): Boolean { when (item.itemId) { } return super.onOptionsItemSelected(item) } new Scaffold( appBar: new AppBar( title: new Text("My Title"), ), ) Appbar actions: <Widget> [ ], new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: Icon(Icons.monetization_on), onPressed: () {}, ) Activity
20. Drawer new Scaffold( ) Scaffold Activity drawer: new Drawer(), bottomNavigationBar: new BottomNavigationBar( items: [ new BottomNavigationBarItem(), new BottomNavigationBarItem() ] ), floatingActionButton: new FloatingActionButton( onPressed: () {}, child: new Icon(Icons.add), ), Bottom Navigation Floating Action
22. LinearLayout
23. Orientation <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_parent" android:orientation="horizontal|vertical"> <View/> <View/> <View/> </LinearLayout> new Scaffold( body: new Container( color: Colors.yellowAccent, child: ), ), ); LinearLayout Row / Column new Row ( children: [ new Icon(Icons.access_time,size: 50.0), new Icon(Icons.pie_chart,size: 100.0), new Icon(Icons.email,size: 50.0) ], new Column ( children: [ new Icon(Icons.access_time,size: 50.0), new Icon(Icons.pie_chart,size: 100.0), new Icon(Icons.email,size: 50.0) ],
24. LinearLayout
25. LinearLayout Match vs Wrap <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_parent"> <View/> <View/> <View/> </LinearLayout> body: new Container( color: Colors.yellowAccent, child: new Row( children: [...], ), ) MainAxizSize mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.min,
26. LinearLayout
27. LinearLayout Gravity <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="start|center|bottom|end"> <View/> <View/> <View/> </LinearLayout> body: new Container( color: Colors.yellowAccent, child: new Row( children: [...], ), ) MainAxisAligment mainAxisAlignment: MainAxisAlignment.start,
28. LinearLayout
29. LinearLayout
30. LinearLayout CrossAxisAligment
31. LinearLayout Weight <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="0dp" android:layout_weight="2" /> <View android:layout_width="0dp" android:layout_weight="4" /> <View android:layout_width="0dp" android:layout_weight="6"/> </LinearLayout> body: new Container( color: Colors.yellowAccent, child: new Row( children: [ ], ... ), ) Expanded new Expanded( child: new Icon(...), flex: 4, ), new Expanded( child: new Icon(...), flex: 2, ),
32. LinearLayout
33. FrameLayout
34. FrameLayout FrameLayout <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View/> <View/> <View/> </FrameLayout> new Stack( children: [ Container( height: 200.0, width: 200.0, color: Colors.red, ), Container(...), Container(...), Container(...), ], ) Stack
35. FrameLayout
36. Layout Gravity <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_gravity="center"/> <View/> <View/> </FrameLayout> new Stack( children: [ ... ], ) FrameLayout Align Align( child: Container(...), alignment: AlignmentDirectional.topStart, ), Align( child: Container(...), alignment: AlignmentDirectional.topEnd, ), Align( child: Container(...), alignment: AlignmentDirectional.bottomEnd, ),
37. FrameLayout
38. RecycleView
39. Setting up in Android class SampleAdapter() : RecyclerView.Adapter<SampleAdapter.ViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder { TODO("not implemented") } override fun getItemCount(): Int { TODO("not implemented") } override fun onBindViewHolder(holder: ViewHolder?, position: Int) { TODO("not implemented") } inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) } val llm = LinearLayoutManager(this) rvSample.layoutManager = llm val sampleAdapter = SampleAdapter() rvSample.adapter = sampleAdapter RecycleView <?xml version="1.0" encoding="utf-8"?> <SomeLayout/> <TextView/> </SomeLayout>
40. ListView new ListView.builder( ) RecycleView itemBuilder: (context, index) { return new Text( " Item no. $index ", style: new TextStyle(fontSize: 24.0), ); }, itemCount: 100, scrollDirection: Axis.horizontal, // Horizontal ListView
41. RecycleView
42. RecycleView
43. Gesture
44. TouchListeners itemView.setOnClickListener { } itemView.setOnLongClickListener { true } itemView.setOnTouchListener { v, event -> true } new GestureDetector( child: ); Gesture GestureDetector new Text("Some Text"), onTap: () { //do something here }, onLongPress: () { //do something here }, onDoubleTap: () { //do something here },
45. List of Listeners this.onHorizontalDragDown, this.onHorizontalDragStart, this.onHorizontalDragUpdate, this.onHorizontalDragEnd, this.onHorizontalDragCancel, this.onPanDown, this.onPanStart, this.onPanUpdate, this.onPanEnd, this.onPanCancel, this.onScaleStart, this.onScaleUpdate, this.onScaleEnd, }) GestureDetector({ Key key, this.child, this.onTapDown, this.onTapUp, this.onTap, this.onTapCancel, this.onDoubleTap, this.onLongPress, this.onVerticalDragDown, this.onVerticalDragStart, this.onVerticalDragUpdate, this.onVerticalDragEnd, this.onVerticalDragCancel, Gesture
46. Summary • What and Why of Flutter • Migrating • Activity (Scaffold) • LinearLayout (Row/Column) • FrameLayout (Stack) • RecycleView (ListView.Builder) • Gesture (GestureDetector)
47. Just try it out.
49. Thank you @ burhanrashid52 Burhanuddin Rashid Flutter for Android Developer Series