Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Flutter For Android Developers
    Burhanuddin Rashid

    View full-size slide

  2. What is Flutter ?

    View full-size slide


  3. Google’s mobile SDK.

    High-quality.

    Native interfaces on
    iOS/Android.

    Record time.

    Dart.

    View full-size slide

  4. Why Flutter ?

    View full-size slide

  5. Material Design

    View full-size slide

  6. Native Performance

    View full-size slide

  7. Why Android Developers ?

    View full-size slide

  8. https://flutter.io/get-started/editor/

    View full-size slide

  9. AndroidManifest.xml
    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">
    android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
    android:value="true" />





    Activity

    View full-size slide

  10. Toolbar








    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

    View full-size slide

  11. Menu

    xmlns:android="http://schemas.android.com/apk/res/android">




    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: [
    ],
    new IconButton(
    icon: new Icon(Icons.shopping_cart),
    onPressed: () {},
    ),
    new IconButton(
    icon: Icon(Icons.monetization_on),
    onPressed: () {},
    )
    Activity

    View full-size slide

  12. 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

    View full-size slide

  13. LinearLayout

    View full-size slide

  14. Orientation

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_parent"
    android:orientation="horizontal|vertical">




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

    View full-size slide

  15. LinearLayout

    View full-size slide

  16. LinearLayout
    Match vs Wrap

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_parent">




    body: new Container(
    color: Colors.yellowAccent,
    child: new Row(
    children: [...],
    ),
    )
    MainAxizSize
    mainAxisSize: MainAxisSize.max,
    mainAxisSize: MainAxisSize.min,

    View full-size slide

  17. LinearLayout

    View full-size slide

  18. LinearLayout
    Gravity

    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">




    body: new Container(
    color: Colors.yellowAccent,
    child: new Row(
    children: [...],
    ),
    )
    MainAxisAligment
    mainAxisAlignment: MainAxisAlignment.start,

    View full-size slide

  19. LinearLayout

    View full-size slide

  20. LinearLayout

    View full-size slide

  21. LinearLayout
    CrossAxisAligment

    View full-size slide

  22. LinearLayout
    Weight

    android:layout_width="match_parent"
    android:layout_height="match_parent">
    android:layout_width="0dp"
    android:layout_weight="2" />
    android:layout_width="0dp"
    android:layout_weight="4" />
    android:layout_width="0dp"
    android:layout_weight="6"/>

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

    View full-size slide

  23. LinearLayout

    View full-size slide

  24. FrameLayout
    FrameLayout
    encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">




    new Stack(
    children: [
    Container(
    height: 200.0,
    width: 200.0,
    color: Colors.red,
    ),
    Container(...),
    Container(...),
    Container(...),
    ],
    )
    Stack

    View full-size slide

  25. Layout Gravity
    encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    android:layout_gravity="center"/>



    new Stack(
    children: [
    ...
    ],
    )
    FrameLayout
    Align
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.topStart,
    ),
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.topEnd,
    ),
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.bottomEnd,
    ),

    View full-size slide

  26. Setting up in Android
    class SampleAdapter() : RecyclerView.Adapter() {
    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




    View full-size slide

  27. 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

    View full-size slide

  28. 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
    },

    View full-size slide

  29. 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

    View full-size slide

  30. Summary

    What and Why of Flutter

    Migrating

    Activity (Scaffold)

    LinearLayout (Row/Column)

    FrameLayout (Stack)

    RecycleView (ListView.Builder)

    Gesture (GestureDetector)

    View full-size slide

  31. Just try it out.

    View full-size slide

  32. Thank you
    @ burhanrashid52
    Burhanuddin Rashid
    Flutter for Android Developer Series

    View full-size slide