Flutter! You definitely should give it a try.
Many developer who I recently talked are hopeful to in a soon future has in their hands the tools to build crossplatform application as good as native. Building it separated/natively may not be sustainable and painful. I struggled to not judge crossplatform and opened my mind to Flutter.
First things first, Installing Flutter:
As I already had XCode and Android Studio installed it was just a few minutes to get started. There's a flutter doctor command that is going to be very helpful to point any missing installation. Here you can find details on how to setup Flutter.
As you can see I am already out of date, the cool thing is that flutter doctor command says to me what I should to do to get updated. So definitely flutter doctor is going to be a good friend :)
After running the upgrade, I have checked that in a few days the Flutter SDK already had 303 files changed, 11.623 insertions and 3.076 deletions, as we can see, Flutter has a very active community.
Ok, so I have installed flutter and now I am ready to go, so lets see it. First thing that caught my eyes in flutter's web site was:
Build beautiful native apps in record time (https://flutter.io/)
Hummm… Record time right? Let's see if it's really true. I started a demo project with the goal to show a list with all the Google I/O 2018 sessions that is going to has livestream and also make user able to watch these session on youtube website. Below is the app's screenshot.
So as an Android Developer I started to think on Activity, Fragment, Adapter and how to open an url link in some browser. Ok sounds simple, but just to think about Adapter I already started to get bored. ‘Come on, we have to agree that Adapters has too many code for a single listview/recyclerview. At least it’s my feeling’. Let’s see how it all are handled in Flutter world.
First of all I created an Event class:
class Event {
final String title;
final String type;
final String time;
final String timePeriod;
final String urlStream;
const Event(
{this.title, this.type, this.time, this.timePeriod, this.urlStream});
}Ok, this class has the Event data, not a big deal, a few lines and we are done. Also I felt very comfortable, with the Dart language, it is pretty similar to many other. In comparison with Java it looks clear, no get and setters also I have used constant constructor, this is used when your object is not going to change.
Cool, what comes next?
ListView component, Adapters???
class EventList extends StatelessWidget {
final List<Event> _eventList;
EventList(this._eventList);
@override
Widget build(BuildContext context) {
return new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: _buildEventList()
);
}
List<_EventListItem> _buildEventList() {
return _eventList.map((event) => new _EventListItem(event))
.toList();
}
}While I was developing the application, I started to get used with Widget, everything in Flutter is going to be an Widget. In comparison with Android, widget can be seen as views. Also you can see that EventList class extends from StatelessWidget.
As the name says, StatelessWidget is an widget that has no state, think of it as a component that is not going to change, it will be always in the same state. If you are thinking in some component that is going to has changes then you should go with StatefullWidget.
When I started to see this state pattern, I started to thought with myself: Widgets are going to has his own state and then it react with changes. Cool! It’s because of this that Flutter website says: ‘Flutter widgets are built using a modern react-style framework, which takes inspiration from React.'
The EventList component needs to receive an array with some events and show them in a ListView. That's all! NO ADAPTERS!!!!!! :)
Let's move forward…
class _EventListItem extends StatelessWidget {
final Event _event;
_EventListItem(this._event);
@override
Widget build(BuildContext context) {
return new Container(
padding: EdgeInsets.all(10.0),
child: new Row(
children: [
_buildExpandedColumnEventTime(_event.time, _event.timePeriod),
_buildExpandedColumnEventData(_event.title, _event.type),
_buildExpandedColumnPlay(_event.title)
],
)
);
}
}The _EventListItem class receive an Event object that has the data to be show in each line. The build method that returns an widget are going to be represented by a container that has a row as child and the row are going to has three columns as children.
The cool thing here are that we can split it in methods and class. So think in how reusable it can be.
The first column in the row are going to be created by _buildExpandedColumnEventTime(..) method, the second one is going to be build with the _buildExpandedColumnEventData(..) method and the last one is created by _buildExpandedColumnPlay(..) method. The image bellow shows the result.
Nice!!! Create listview component with Flutter is just as I would like that it was with Android Native, easy peasy! :)
So now there's already the list component represented by the EventList class and there's also the itens of it's list represented by the EventListItem class. What are we missing in the project?
Lets get it done:
class MyHomePage extends StatelessWidget {
var events = const <Event>[
const Event(
title: 'Google Keynote',
type: 'Keynote',
time: '10',
timePeriod: 'AM',
urlStream: 'https://google.com'
)
];
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromARGB(255, 255, 255, 255),
appBar: new AppBar(
backgroundColor: Color.fromARGB(255, 255, 255, 255),
elevation: 0.5,
centerTitle: true,
title: new Text(
'Google I/O 2018 LiveStream',
style: TextStyle(color: Color.fromARGB(255, 30, 144, 255))
),
),
body: new Padding(
padding: EdgeInsets.all(5.0),
child: new EventList(events) //The EventList that we created
)
);
}
}This class represent the application homepage, it’s going to be this page to be presented when the app starts, it has a mocked list of event that is going to be passed by parameter in our EventList widget.
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage()
);
}
}The above code is responsible for configure our application, it's here where the application's home page is set, the application's routes, theme, etc….
And that’s all folks! We are ready to go!
After writing exactly 172 lines!!! of code I have an application able to show every item from a list and open the url of each item in the browser. Can you imagine how many lines of code it would be necessary with Android Native Code? Think just in the Adapter boilerplate code.
Have a look at the below Android native RecyclerView sample, it has about of 505 lines!!!! only in java and resources files. Also compare how readable are the code, I felt much more natural reading the flutter code application than the android native application!
+ the layout resources:
I am definitely going to keep looking to Flutter.
The below Play Store URL links to this demo app. (It’s was just a test with Flutter development so I really didn’t care with icons and images on store, also it's going to have an update release to open the real google I/O livestream url) https://play.google.com/store/apps/details?id=com.vsossella.googleio2018livestream
