Compilation of Flutter materials for Android developers
Clone or download
Latest commit 6cd31f3 Jan 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Dec 28, 2018
README.md Remove PopupWindow Jan 6, 2019
android_flutter.png Remove svg logo, add png image Dec 28, 2018

README.md

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

Working with an editor

Learning Dart

Flutter introductory resources

Architecture and state management

Basically Flutter world is split between BLoC/Rx(kind of like MVVM) and Redux.

Dependency injection

While there's no Dagger 2 in Flutter, there's inject.dart.

Navigation & routing

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

Flavors and deployment

Samples and tutorials

Community