August 29, 2019

992 words 5 mins read

m3sv/Flutter-for-Android-developers

m3sv/Flutter-for-Android-developers

Compilation of Flutter materials for Android developers

repo name m3sv/Flutter-for-Android-developers
repo link https://github.com/m3sv/Flutter-for-Android-developers
homepage
language
size (curr.) 126 kB
stars (curr.) 481
created 2018-12-28
license MIT License

Flutter for Android developers

The tutorial assumes that you are at least familiar with Android development and know what scary words like View, ViewGroup, Java, Kotlin mean.

Table of contents

Overview of Flutter

Installing Flutter

Tools/IDE

Working with an editor

Learning Dart

Flutter introductory resources

Architecture and state management

Dependency injection

Flutter uses Navigator for navigation.

Handling incoming intents

Handling intents from external applications

Network requests and Serialization

No, there’s no Retrofit or Gson/Moshi in Flutter.

Persistence

Reactive/Rx

Dart is a reactive language out of the box, you can either use Dart’s Streams or RxDart if you’re familiar with ReactiveX.

Android functionality and corresponding plugins

Android Flutter
AlarmManager android_alarm_manager
Intent android_intent
Battery battery
Camera camera
Network connectivity
Build device_info
Google maps google_maps_flutter
Google Sign-in google_sign_in
Image picker image_picker
Local authentication local_auth
PackageInfo package_info
FileProvider path_provider
App shortcuts quick_actions
Sensors sensors
Sharing data share
SharedPreferences shared_preferences
Launch URL url_launcher
ExoPlayer/MediaPlayer video_player
WebView webview_flutter

Activity/Fragment?

Both activities and fragments are represented as a Widget in Flutter.

Read more: What are the equivalent of activities and fragments in Flutter?

Lifecycle?

How do I listen to Android activity lifecycle events?

Orientation change?

How do I handle landscape transitions in Flutter?

Declarative vs Imperative

In the imperative style, you would typically go to ViewB’s owner and retrieve the instance b using selectors or with findViewById or similar, and invoke mutations on it (and implicitly invalidate it). For example:

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

In the declarative style, view configurations (such as Flutter’s Widgets) are immutable and are only lightweight “blueprints”. To change the UI, a Widget triggers a rebuild on itself (most commonly by calling setState() on StatefulWidgets in Flutter) and constructs a new Widget subtree.

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

Why Flutter uses declarative UI

Android views and their corresponding Flutter widgets

Flutter contains much more widgets than Android SDK, you can discover them here and in Widget index.

The most common Android views and their corresponding Flutter widgets are here:

Android Flutter
TextView Text
EditText TextField
ExpandableListView ListView + ExpansionTile
Button RaisedButton
BorderlessButton FlatButton
CalendarView
CheckBox Checkbox
DatePicker showDatePicker
FrameLayout Stack
GridView GridView
HorizontalScrollView ListView
ImageButton RaisedButton/FlatButton
ImageView Image
LinearLayout Column/Row
ListView ListView
NumberPicker Custom Widget
PopupMenu PopupMenuButton
ProgressBar LinearProgressIndicator
RadioButton/RadioGroup Radio
RatingBar How to create rating bar
RelativeLayout
ScrollView ListView
SeekBar Slider
Spinner DropDownButton
Switch Switch
TableLayout Table
TimePicker showDatePicker
Toast fluttertoast
Toolbar AppBar
RecyclerView ListView with ListView.builder()
ViewPager PageView(Tutorial)
SwipeRefreshLayout RefreshIndicator(Tutorial)
CardView Card
ConstraintLayout
CoordinatorLayout Scaffold
AppBarLayout AppBar within Scaffold
ExpandableWidget ExpansionTile
FloatingActionButton FloatingActionButton within Scaffold
DrawerLayout Drawer within Scaffold
TabLayout TabBar in conjunction with TabBarView
TextInputLayout TextFormFiled
SnackBar SnackBar

Hint on an EditText

To add a hint to an EditText(TextField) you add InputDecoration to it:

body: Center(
  child: TextField(
    decoration: InputDecoration(hintText: "This is a hint"),
  )
)

Custom Views/Canvas drawing

Flutter has similar to Android Canvas API.

To create custom widgets you compose smaller widgets.

Gesture and click listeners

Glide/Picasso/Fresco(Image loading)?

Flutter is able to load images from URL out of the box, all you have to do is use the Image.network constructor, like this:

Image.network(
  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
)

It also supports gifs!

Unfortunately, Image.network does not support placeholders and/or caching. To achieve those, please see the following recipes:

Animations

Resource management

Theming

How do I theme my app?

Gradle

Flutter uses Dart’s own build system, and the Pub package manager. You can read more about here.

Plugins/Libraries

Packages allow you to use Flutter packages or access underlying platform features in a form of a library.

Local notifications

For local notifications you would have to rely on a 3rd party plugin.

Firebase

Facebook

To Log in with Facebook, use flutter_facebook_login plugin.

Communicating with native platform

NDK

How do I use the NDK in my Flutter application?

Background processing

Testing and profiling, DevTools

Flavors and deployment

Samples and tutorials

Community

comments powered by Disqus