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

Build Android UI in Flutter

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.

Burhanuddin Rashid

September 22, 2019
Tweet

More Decks by Burhanuddin Rashid

Other Decks in Programming

Transcript

  1. Build UI In
    Bhubaneswar
    #Devfest2019

    View full-size slide

  2. What is Flutter ?
    #DevfestBBSR

    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 ?
    #DevfestBBSR

    View full-size slide

  5. #DevfestBBSR

    View full-size slide

  6. Hot Reload
    #DevfestBBSR

    View full-size slide

  7. Material Design
    #DevfestBBSR

    View full-size slide

  8. Native Performance
    #DevfestBBSR

    View full-size slide

  9. Why Android Developers ?
    #DevfestBBSR

    View full-size slide

  10. #DevfestBBSR

    View full-size slide

  11. #DevfestBBSR

    View full-size slide

  12. #DevfestBBSR

    View full-size slide

  13. #DevfestBBSR

    View full-size slide

  14. Getting Started
    #DevfestBBSR

    View full-size slide

  15. https://flutter.dev/docs/get-started/editor
    #DevfestBBSR

    View full-size slide

  16. #DevfestBBSR

    View full-size slide

  17. Activity
    #DevfestBBSR

    View full-size slide

  18. Project Structure
    Activity #DevfestBBSR

    View full-size slide

  19. 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 #DevfestBBSR

    View full-size slide

  20. No XML
    Activity #DevfestBBSR

    View full-size slide

  21. Activity #DevfestBBSR

    View full-size slide

  22. How to design Activity UI
    #DevfestBBSR

    View full-size slide

  23. 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 #DevfestBBSR

    View full-size slide

  24. 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 #DevfestBBSR

    View full-size slide

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

    View full-size slide

  26. Activity #DevfestBBSR

    View full-size slide

  27. LinearLayout
    #DevfestBBSR

    View full-size slide

  28. 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)
    ],
    LinearLayout #DevfestBBSR

    View full-size slide

  29. LinearLayout
    Row Column
    #DevfestBBSR

    View full-size slide

  30. 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,
    LinearLayout #DevfestBBSR

    View full-size slide

  31. LinearLayout
    wrap_content
    MainAxisSize.min
    match_content
    MainAxisSize.max
    wrap_content
    MainAxisSize.min
    match_content
    MainAxisSize.max
    Column
    Row
    #DevfestBBSR

    View full-size slide

  32. 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,
    LinearLayout #DevfestBBSR

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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,
    ),
    LinearLayout #DevfestBBSR

    View full-size slide

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

    View full-size slide

  37. FrameLayout
    #DevfestBBSR

    View full-size slide

  38. 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
    FrameLayout #DevfestBBSR

    View full-size slide

  39. FrameLayout #DevfestBBSR

    View full-size slide

  40. 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,
    ),
    FrameLayout #DevfestBBSR

    View full-size slide

  41. FrameLayout #DevfestBBSR

    View full-size slide

  42. RecycleView
    #DevfestBBSR

    View full-size slide

  43. 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 #DevfestBBSR

    View full-size slide

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

    View full-size slide

  45. RecycleView #DevfestBBSR

    View full-size slide

  46. RecycleView #DevfestBBSR

    View full-size slide

  47. Gesture
    #DevfestBBSR

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Does Flutter supports X?
    (Native Integrations)
    #DevfestBBSR

    View full-size slide

  51. Platform Channels
    #DevfestBBSR

    View full-size slide

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

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

    View full-size slide

  54. Just try it out !!
    #DevfestBBSR

    View full-size slide

  55. THANK YOU!
    Does anyone have any questions?
    https://burhanrashid52.com
    @burhanrashid52
    Burhanuddin Rashid

    View full-size slide