{"id":303,"date":"2020-01-13T14:00:00","date_gmt":"2020-01-13T13:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/flutter-for-android-developers\/"},"modified":"2020-02-14T10:35:04","modified_gmt":"2020-02-14T09:35:04","slug":"flutter-for-android-developers","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/mobile-dev\/flutter-for-android-developers\/","title":{"rendered":"Flutter for Android Developers explained by Faisal Abid"},"content":{"rendered":"\n

F<\/span>lutter<\/b> is one of the most interesting technologies among the new trends in mobile software<\/span> development<\/b>. Thus, it is no surprise that Codemotion Milan 2018 included a talk about Flutter in its agenda. Such talk was delivered by Faisal Abid<\/b>, Google Developer Expert<\/span> and CTO at Zoom.ai. Faisal divided his speech into two parts; he started by introducing Flutter, and then discussed how Android<\/span> developers can benefit from using it.<\/p>\n\n\n\n

Introducing Flutter<\/b><\/h2>\n\n\n\n

Flutter is a framework developed by Google<\/span>, aimed at building native<\/b> mobile applications<\/span> for both Android<\/span> and iOS platforms. Using this technology, developers can easily and quickly build applications that \u201cfeel natural\u201d. Many of us have experienced weird behaviours from mobile applications<\/span>, in terms of animations or features that do not appear consistent with the surrounding mobile OS ecosystem<\/b>. According to Faisal, Flutter solved this issue by including material design<\/b> in the Flutter<\/span> widgets, producing applications with high quality and modern designs.<\/p>\n\n\n\n

One of the most common mistakes about Flutter is the belief that it uses HTML5<\/span> and WebViews in order to implement both Android<\/span> and iOS applications, similar to what other cross-platform development frameworks (e.g. PhoneGap<\/span>) did in the past. Actually, this is not the case. In fact, Flutter allows the developer to create fully native<\/b> mobile apps<\/span>, using the Dart programming language<\/span><\/b>.<\/p>\n\n\n\n

As mentioned by Faisal, when Google<\/span> decided to develop<\/span> Flutter, they had to decide which language to use. Among the many choices available, including Javascript<\/span>, Python<\/span>, Scala<\/span>, and many others, Google<\/span> opted for Dart. One might consider this choice as driven by ownership (Dart has been developed by Google too). However, the main reason why Google<\/span> choose Dart is in its learning curve<\/span><\/b>, which resulted in it being the best one among the languages evaluated. Indeed, Dart allows us to develop<\/span> applications very easily; while it was born as a sort of \u201cevolution of Javascript<\/span>\u201d, this programming language<\/span> has mostly simple features, usually included in other programming languages<\/span>, and thus known by many developers.<\/p>\n\n\n\n

By using Dart<\/span> and Flutter, developers can decide how to deploy their applications; they can opt for Java<\/span><\/b> or Kotlin<\/span><\/b> for Android<\/span>, or for Swift<\/span><\/b> or Objective-C<\/span><\/b> for iOS. It is worth highlighting that choosing one of these languages does not require any kind of knowledge from the developer\u2019s point of view. Dart<\/span> remains the only programming language<\/span> processed by Flutter, while the aforementioned native mobile languages are just useful for understanding what the output will be.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Figure 1. Creation of a new Flutter project with IntelliJ, allowing selection of native languages.<\/i><\/p>\n\n\n\n

Flutter for Android developers<\/b><\/h2>\n\n\n\n

In the second part of his speech, Faisal described some common patterns<\/b> that are useful for Android<\/span> developers who want to move to Flutter. In particular, he identified three interesting patterns: implementing AsyncTasks<\/b>, managing navigation via Intents<\/b> and understanding how the Activity\u2019s life cycle<\/b> is affected by Flutter.<\/p>\n\n\n\n

For implementing asynchronous tasks in the background, it is crucial to understand that Flutter has a single-threaded execution model<\/b>, supporting the so-called Isolates<\/i> (a way to run Dart<\/span> code on another thread). Instead of implementing the onPreExecute(), doInBackground() and onPostExecute() methods of the AsyncTask class<\/span>, Flutter solves the problem by declaring a function as async<\/b>, and using the await<\/b> keyword for long run tasks. Dart<\/span> will \u201cfigure out\u201d how to pass this task to a background thread, avoiding freezing the UI.<\/p>\n\n\n\n

\n\nloadData() async {\n    String dataURL = \"https:\/\/mysite.com\/data.json\";\n    http.Response response = await http.get(dataURL);\n    setState(() {\n        widgets = json.decode(response.body);\n    });\n}\n<\/code>\n<\/pre>\n\n\n\n
In order to navigate among Activities, Android<\/span> uses Intents. However, there is nothing like Intents in Flutter. Instead, you need to use Navigator<\/b> and Routes<\/b>. A Route is an abstraction for a \u201cscreen\u201d or \u201cpage\u201d of an app<\/span> (i.e. an Activity on Android<\/span>); a Navigator is a widget that manages routes. Navigators work like a stack on which you can push() new routes you want to navigate to, and from which you can pop() routes when you want to \u201cgo back\u201d. The following snippet shows how to navigate to a route by pushing its name (\u201c\\b\u201d) to the Navigator:<\/p>\n\n\n\n
Navigator.of(context).pushNamed('\/b');<\/code><\/pre>\n\n\n\n
Finally, the third common pattern described by Faisal is about understanding the Activity\u2019s life cycle. In Flutter, all the Activities are widgets<\/b>. Similar (but not equal) to what happens with Android<\/span> Activities, you can observe for the following lifecycle events:<\/p>\n\n\n\n