Build Android UI in Flutter

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, Gestures and RecycleView using Flutter.

Transcript

1. Build UI In Bhubaneswar #Devfest2019
2. What is Flutter ? #DevfestBBSR
3. • Google’s mobile SDK • High-quality • Native interfaces on iOS/Android • Record time • Dart
4. Why Flutter ? #DevfestBBSR
5. #DevfestBBSR
6. Hot Reload #DevfestBBSR
7. Material Design #DevfestBBSR
8. Native Performance #DevfestBBSR
9. Why Android Developers ? #DevfestBBSR
10. #DevfestBBSR
11. #DevfestBBSR
12. #DevfestBBSR
13. #DevfestBBSR
14. Getting Started #DevfestBBSR
15. https://flutter.dev/docs/get-started/editor #DevfestBBSR
16. #DevfestBBSR
18. Activity #DevfestBBSR
19. Project Structure Activity #DevfestBBSR
20. 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 #DevfestBBSR
21. No XML Activity #DevfestBBSR
22. Activity #DevfestBBSR
23. How to design Activity UI #DevfestBBSR
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, ), Activity #DevfestBBSR
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: () {}, ) Activity #DevfestBBSR
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 Activity #DevfestBBSR
27. Activity #DevfestBBSR
28. LinearLayout #DevfestBBSR
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) ], LinearLayout #DevfestBBSR
30. LinearLayout Row Column #DevfestBBSR
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, LinearLayout #DevfestBBSR
32. LinearLayout wrap_content MainAxisSize.min match_content MainAxisSize.max wrap_content MainAxisSize.min match_content MainAxisSize.max Column Row #DevfestBBSR
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, LinearLayout #DevfestBBSR
34. 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 #DevfestBBSR
35. LinearLayout android:gravity="top" MainAxisSize.max MainAxisAligment.start android:gravity="bottom" MainAxisSize.max MainAxisAligment.end android:gravity="center_vertical" MainAxisSize.max MainAxisAligment.center Column #DevfestBBSR
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, ), LinearLayout #DevfestBBSR
37. 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 #DevfestBBSR
38. FrameLayout #DevfestBBSR
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 FrameLayout #DevfestBBSR
40. FrameLayout #DevfestBBSR
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, ), FrameLayout #DevfestBBSR
42. FrameLayout #DevfestBBSR
43. RecycleView #DevfestBBSR
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> RecycleView #DevfestBBSR
45. ListView new ListView.builder( ) itemBuilder: (context, index) { }, itemCount: 100, scrollDirection: Axis.horizontal, // Horizontal ListView RecycleView return new Text( " Item no. $index ", style: new TextStyle(fontSize: 24.0), ); #DevfestBBSR
46. RecycleView #DevfestBBSR
47. RecycleView #DevfestBBSR
48. Gesture #DevfestBBSR
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 }, Gesture #DevfestBBSR
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, Gesture #DevfestBBSR
51. Does Flutter supports X? (Native Integrations) #DevfestBBSR
52. Platform Channels #DevfestBBSR
53. Summary • What and Why of Flutter • Getting Started • Activity (Scaffold) • LinearLayout (Row/Column) • FrameLayout (Stack) • RecycleView (ListView.Builder) • Gesture (GestureDetector) • Platform Channels
54. Summary • What and Why of Flutter • Getting Started • Activity (Scaffold) • LinearLayout (Row/Column) • RecycleView (ListView.Builder) • Gesture (GestureDetector) • Platform Channels
55. Just try it out !! #DevfestBBSR
57. THANK YOU! Does anyone have any questions? https://burhanrashid52.com @burhanrashid52 Burhanuddin Rashid