Flutter For Android Developers Burhanuddin Rashid 

What is Flutter ? 

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

Why Flutter ? 

No content

Hot Reload 

Material Design 

Native Performance 

Why Android Developers ? 

No content

Migrating 

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

No content

No content

Activity 

AndroidManifest.xml Activity 

No content

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 

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: () {}, ) Activity 

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 

No content

LinearLayout 

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

LinearLayout 

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

LinearLayout 

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

LinearLayout 

LinearLayout 

LinearLayout CrossAxisAligment 

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

LinearLayout 

FrameLayout 

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

FrameLayout 

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

FrameLayout 

RecycleView 

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 

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 

RecycleView 

RecycleView 

Gesture 

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

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 

Summary ● What and Why of Flutter ● Migrating ● Activity (Scaffold) ● LinearLayout (Row/Column) ● FrameLayout (Stack) ● RecycleView (ListView.Builder) ● Gesture (GestureDetector) 

Just try it out. 

No content

Thank you @ burhanrashid52 Burhanuddin Rashid Flutter for Android Developer Series