Slide 1
Slide 1 text
Flutter For Android Developers
Burhanuddin Rashid
Slide 2
Slide 2 text
What is Flutter ?
#DevfestMumbai
Slide 3
Slide 3 text
● Google’s mobile SDK
● High-quality
● Native interfaces on
iOS/Android
● Record time
● Dart
Slide 4
Slide 4 text
Dart
● Object Oriented
● Fast
● Portable
● Approachable
● Reactive
● Dart 2.0
#DevfestMumbai
Slide 5
Slide 5 text
Why Flutter ?
#DevfestMumbai
Slide 6
Slide 6 text
#DevfestMumbai
Slide 7
Slide 7 text
Hot Reload
#DevfestMumbai
Slide 8
Slide 8 text
Material Design
#DevfestMumbai
Slide 9
Slide 9 text
Native Performance
#DevfestMumbai
Slide 10
Slide 10 text
Why Android Developers ?
#DevfestMumbai
Slide 11
Slide 11 text
#DevfestMumbai
Slide 12
Slide 12 text
#DevfestMumbai
Slide 13
Slide 13 text
#DevfestMumbai
Slide 14
Slide 14 text
#DevfestMumbai
Slide 15
Slide 15 text
Getting Started
#DevfestMumbai
Slide 16
Slide 16 text
https://flutter.io/get-started/editor/
#DevfestMumbai
Slide 17
Slide 17 text
#DevfestMumbai
Slide 18
Slide 18 text
#DevfestMumbai
Slide 19
Slide 19 text
Activity
#DevfestMumbai
Slide 20
Slide 20 text
Project Structure
#DevfestMumbai
Activity
Slide 21
Slide 21 text
AndroidManifest.xml
#DevfestMumbai
Activity
Slide 22
Slide 22 text
No XML
#DevfestMumbai
Activity
Slide 23
Slide 23 text
#DevfestMumbai
Activity
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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: [
],
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: Icon(Icons.monetization_on),
onPressed: () {},
)
#DevfestMumbai
Activity
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
#DevfestMumbai
Activity
Slide 28
Slide 28 text
LinearLayout
#DevfestMumbai
Slide 29
Slide 29 text
Orientation
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
Slide 30
Slide 30 text
#DevfestMumbai
LinearLayout
Row Column
Slide 31
Slide 31 text
Match vs Wrap
body: new Container(
color: Colors.yellowAccent,
child: new Row(
children: [...],
),
)
MainAxizSize
mainAxisSize: MainAxisSize.max,
mainAxisSize: MainAxisSize.min,
#DevfestMumbai
LinearLayout
Slide 32
Slide 32 text
#DevfestMumbai
LinearLayout
wrap_content
MainAxisSize.min
match_content
MainAxisSize.max
wrap_content
MainAxisSize.min
match_content
MainAxisSize.max
Column
Row
Slide 33
Slide 33 text
Gravity
body: new Container(
color: Colors.yellowAccent,
child: new Row(
children: [...],
),
)
MainAxisAligment
mainAxisAlignment: MainAxisAlignment.start,
#DevfestMumbai
LinearLayout
Slide 34
Slide 34 text
#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
Slide 35
Slide 35 text
#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
Slide 36
Slide 36 text
Weight
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
Slide 37
Slide 37 text
#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
Slide 38
Slide 38 text
FrameLayout
#DevfestMumbai
Slide 39
Slide 39 text
FrameLayout
new Stack(
children: [
Container(
height: 200.0,
width: 200.0,
color: Colors.red,
),
Container(...),
Container(...),
Container(...),
],
)
Stack
#DevfestMumbai
FrameLayout
Slide 40
Slide 40 text
#DevfestMumbai
FrameLayout
Slide 41
Slide 41 text
Layout Gravity
new Stack(
children: [
...
],
)
Align
Align(
child: Container(...),
alignment: AlignmentDirectional.topStart,
),
Align(
child: Container(...),
alignment: AlignmentDirectional.topEnd,
),
Align(
child: Container(...),
alignment: AlignmentDirectional.bottomEnd,
),
#DevfestMumbai
FrameLayout
Slide 42
Slide 42 text
#DevfestMumbai
FrameLayout
Slide 43
Slide 43 text
RecycleView
#DevfestMumbai
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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),
);
Slide 46
Slide 46 text
#DevfestMumbai
RecycleView
Slide 47
Slide 47 text
#DevfestMumbai
RecycleView
Slide 48
Slide 48 text
Gesture
#DevfestMumbai
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
Does Flutter supports X?
(Native Integrations)
#DevfestMumbai
Slide 52
Slide 52 text
Platform Channels
#DevfestMumbai
Slide 53
Slide 53 text
Summary
● What and Why of Flutter
● Getting Started
● Activity (Scaffold)
● LinearLayout (Row/Column)
● FrameLayout (Stack)
● RecycleView (ListView.Builder)
● Gesture (GestureDetector)
● Platform Channels
Slide 54
Slide 54 text
Just try it out !!
#DevfestMumbai
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Thank you
@ burhanrashid52
Burhanuddin Rashid
Flutter for Android Developer Series