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

Flutter For Android Developers - GDGMad 2018

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.

Burhanuddin Rashid

October 15, 2018
Tweet

More Decks by Burhanuddin Rashid

Other Decks in Programming

Transcript

  1. Flutter For Android Developers
    Burhanuddin Rashid

    View full-size slide

  2. What is Flutter ?
    #DevfestMumbai

    View full-size slide

  3. ● Google’s mobile SDK
    ● High-quality
    ● Native interfaces on
    iOS/Android
    ● Record time
    ● Dart

    View full-size slide

  4. Dart
    ● Object Oriented
    ● Fast
    ● Portable
    ● Approachable
    ● Reactive
    ● Dart 2.0
    #DevfestMumbai

    View full-size slide

  5. Why Flutter ?
    #DevfestMumbai

    View full-size slide

  6. #DevfestMumbai

    View full-size slide

  7. Hot Reload
    #DevfestMumbai

    View full-size slide

  8. Material Design
    #DevfestMumbai

    View full-size slide

  9. Native Performance
    #DevfestMumbai

    View full-size slide

  10. Why Android Developers ?
    #DevfestMumbai

    View full-size slide

  11. #DevfestMumbai

    View full-size slide

  12. #DevfestMumbai

    View full-size slide

  13. #DevfestMumbai

    View full-size slide

  14. #DevfestMumbai

    View full-size slide

  15. Getting Started
    #DevfestMumbai

    View full-size slide

  16. https://flutter.io/get-started/editor/
    #DevfestMumbai

    View full-size slide

  17. #DevfestMumbai

    View full-size slide

  18. #DevfestMumbai

    View full-size slide

  19. Activity
    #DevfestMumbai

    View full-size slide

  20. Project Structure
    #DevfestMumbai
    Activity

    View full-size slide

  21. 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" />





    #DevfestMumbai
    Activity

    View full-size slide

  22. No XML
    #DevfestMumbai
    Activity

    View full-size slide

  23. #DevfestMumbai
    Activity

    View full-size slide

  24. 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,
    ),
    #DevfestMumbai
    Activity

    View full-size slide

  25. 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: () {},
    )
    #DevfestMumbai
    Activity

    View full-size slide

  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

    View full-size slide

  27. #DevfestMumbai
    Activity

    View full-size slide

  28. LinearLayout
    #DevfestMumbai

    View full-size slide

  29. 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:
    ),
    ),
    );
    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

    View full-size slide

  30. #DevfestMumbai
    LinearLayout
    Row Column

    View full-size slide

  31. 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,
    #DevfestMumbai
    LinearLayout

    View full-size slide

  32. #DevfestMumbai
    LinearLayout
    wrap_content
    MainAxisSize.min
    match_content
    MainAxisSize.max
    wrap_content
    MainAxisSize.min
    match_content
    MainAxisSize.max
    Column
    Row

    View full-size slide

  33. 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,
    #DevfestMumbai
    LinearLayout

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  36. 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,
    ),
    #DevfestMumbai
    LinearLayout

    View full-size slide

  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

    View full-size slide

  38. FrameLayout
    #DevfestMumbai

    View full-size slide

  39. 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
    #DevfestMumbai
    FrameLayout

    View full-size slide

  40. #DevfestMumbai
    FrameLayout

    View full-size slide

  41. 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: [
    ...
    ],
    )
    Align
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.topStart,
    ),
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.topEnd,
    ),
    Align(
    child: Container(...),
    alignment: AlignmentDirectional.bottomEnd,
    ),
    #DevfestMumbai
    FrameLayout

    View full-size slide

  42. #DevfestMumbai
    FrameLayout

    View full-size slide

  43. RecycleView
    #DevfestMumbai

    View full-size slide

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




    #DevfestMumbai
    RecycleView

    View full-size slide

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

    View full-size slide

  46. #DevfestMumbai
    RecycleView

    View full-size slide

  47. #DevfestMumbai
    RecycleView

    View full-size slide

  48. Gesture
    #DevfestMumbai

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  51. Does Flutter supports X?
    (Native Integrations)
    #DevfestMumbai

    View full-size slide

  52. Platform Channels
    #DevfestMumbai

    View full-size slide

  53. Summary
    ● What and Why of Flutter
    ● Getting Started
    ● Activity (Scaffold)
    ● LinearLayout (Row/Column)
    ● FrameLayout (Stack)
    ● RecycleView (ListView.Builder)
    ● Gesture (GestureDetector)
    ● Platform Channels

    View full-size slide

  54. Just try it out !!
    #DevfestMumbai

    View full-size slide

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

    View full-size slide