Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Flutter for Android Developers

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.

Burhanuddin Rashid

August 25, 2018
Tweet

More Decks by Burhanuddin Rashid

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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) ],
  5. 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,
  6. 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,
  7. 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, ),
  8. 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
  9. 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, ),
  10. 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>
  11. 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
  12. 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 },
  13. 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
  14. Summary • What and Why of Flutter • Migrating •

    Activity (Scaffold) • LinearLayout (Row/Column) • FrameLayout (Stack) • RecycleView (ListView.Builder) • Gesture (GestureDetector)