Flutter For Android Developers - GDGMad 2018

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

Transcript

1. Flutter For Android Developers Burhanuddin Rashid
2. What is Flutter ? #DevfestMumbai
3. • Google’s mobile SDK • High-quality • Native interfaces on iOS/Android • Record time • Dart
4. Dart • Object Oriented • Fast • Portable • Approachable • Reactive • Dart 2.0 #DevfestMumbai
5. Why Flutter ? #DevfestMumbai
6. #DevfestMumbai
7. Hot Reload #DevfestMumbai
8. Material Design #DevfestMumbai
9. Native Performance #DevfestMumbai
10. Why Android Developers ? #DevfestMumbai
11. #DevfestMumbai
12. #DevfestMumbai
13. #DevfestMumbai
14. #DevfestMumbai
15. Getting Started #DevfestMumbai
16. https://flutter.io/get-started/editor/ #DevfestMumbai
17. #DevfestMumbai
18. #DevfestMumbai
19. Activity #DevfestMumbai
20. Project Structure #DevfestMumbai Activity
21. 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> #DevfestMumbai Activity
22. No XML #DevfestMumbai Activity
23. #DevfestMumbai Activity
24. 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, ), #DevfestMumbai Activity
25. 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: () {}, ) #DevfestMumbai Activity
26. Drawer new Scaffold( ) Scaffold drawer: new Drawer(), bottomNavigationBar: new BottomNavigationBar( items: [ new BottomNavigationBarItem(), new BottomNavigationBarItem() ] ), floatingActionButton: new FloatingActionButton( onPressed: () {}, child: new Icon(Icons.add), ), Bottom Navigation Floating Action #DevfestMumbai Activity
27. #DevfestMumbai Activity
28. LinearLayout #DevfestMumbai
29. 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: ), ), ); 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) ], #DevfestMumbai LinearLayout
30. #DevfestMumbai LinearLayout Row Column
31. 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, #DevfestMumbai LinearLayout
32. #DevfestMumbai LinearLayout wrap_content MainAxisSize.min match_content MainAxisSize.max wrap_content MainAxisSize.min match_content MainAxisSize.max Column Row
33. 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, #DevfestMumbai LinearLayout
34. #DevfestMumbai LinearLayout android:gravity="start|left" MainAxisSize.max MainAxisAligment.start android:gravity="center_horizontal" MainAxisSize.max MainAxisAligment.center android:gravity="end|right" MainAxisSize.max MainAxisAligment.end Row
35. #DevfestMumbai LinearLayout android:gravity="top" MainAxisSize.max MainAxisAligment.start android:gravity="bottom" MainAxisSize.max MainAxisAligment.end android:gravity="center_vertical" MainAxisSize.max MainAxisAligment.center Column
36. 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, ), #DevfestMumbai LinearLayout
37. #DevfestMumbai LinearLayout For each children android:layout_weight="2 or 4 or 6" flex : 2 or 4 or 6 For each children android:layout_weight="2 or 4 or 6" flex : 2 or 4 or 6 Row Column
38. FrameLayout #DevfestMumbai
39. 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 #DevfestMumbai FrameLayout
40. #DevfestMumbai FrameLayout
41. 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: [ ... ], ) Align Align( child: Container(...), alignment: AlignmentDirectional.topStart, ), Align( child: Container(...), alignment: AlignmentDirectional.topEnd, ), Align( child: Container(...), alignment: AlignmentDirectional.bottomEnd, ), #DevfestMumbai FrameLayout
42. #DevfestMumbai FrameLayout
43. RecycleView #DevfestMumbai
44. 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 <?xml version="1.0" encoding="utf-8"?> <SomeLayout/> <TextView/> </SomeLayout> #DevfestMumbai RecycleView
45. ListView new ListView.builder( ) itemBuilder: (context, index) { }, itemCount: 100, scrollDirection: Axis.horizontal, // Horizontal ListView #DevfestMumbai RecycleView return new Text( " Item no. $index ", style: new TextStyle(fontSize: 24.0), );
46. #DevfestMumbai RecycleView
47. #DevfestMumbai RecycleView
48. Gesture #DevfestMumbai
49. TouchListeners itemView.setOnClickListener { } itemView.setOnLongClickListener { true } itemView.setOnTouchListener { v, event -> true } new GestureDetector( child: ); GestureDetector new Text("Some Text"), onTap: () { //do something here }, onLongPress: () { //do something here }, onDoubleTap: () { //do something here }, #DevfestMumbai Gesture
50. 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, #DevfestMumbai Gesture
51. Does Flutter supports X? (Native Integrations) #DevfestMumbai
52. Platform Channels #DevfestMumbai
53. Summary • What and Why of Flutter • Getting Started • Activity (Scaffold) • LinearLayout (Row/Column) • FrameLayout (Stack) • RecycleView (ListView.Builder) • Gesture (GestureDetector) • Platform Channels
54. Just try it out !! #DevfestMumbai
56. Thank you @ burhanrashid52 Burhanuddin Rashid Flutter for Android Developer Series