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.

37a2dd0f4a7e7c8584658f36d07e1e33?s=128

Burhanuddin Rashid

September 22, 2019
Tweet

Transcript

  1. 17.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 53.

    Summary • What and Why of Flutter • Getting Started

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

    Summary • What and Why of Flutter • Getting Started

    • Activity (Scaffold) • LinearLayout (Row/Column) • RecycleView (ListView.Builder) • Gesture (GestureDetector) • Platform Channels
  18. 56.