Getting Started<\/h2>\n
So now I have two days to try out a new language and a new framework….. What the hell am I doing to myself ?? So that it won’t be too unpleasant, I decided to chill on YouTube first. Fortunately, the Google IO 18 wasn’t so long ago and there are interesting talks about Flutter. Here are the ones I looked at:<\/p>\n
- \n
- Build reactive mobile apps with Flutter<\/a><\/li>\n
- Total mobile development made fun with Flutter and Firebase <\/a><\/li>\n<\/ol>\n
So what should you take out of these videos? On the one hand Flutter is about widgets – everything is a widget. A screen is a widget tree. One distinguishes between Stateless and Statefull widgets. But we will use the BLOC pattern from “Build reactive mobile apps with Flutter” for our app.
\nOn the other hand, Firebase seems to offer itself perfectly as a backend. As this blog post is not a tutorial, I recommend to watch the videos. Our task is to create a Firebase database. And to create a client according to the BLOC pattern.<\/p>\nImplementation<\/h2>\n
The Backend alias Firebase<\/h3>\n
So this is the easy Part. Since I have already written such a long motivation, how about a gif?<\/p>\n
![\"\"](\"https:\/\/craftcoders.app\/wp-content\/uploads\/2018\/07\/Firebase-console-Google-Chrome-08.07.2018-19_59_00.gif\")
How to create the Backend \ud83d\ude09<\/p><\/div>\n
The Voting Screen<\/h3>\n
To keep the code manageable I decided to write all widgets in the main.dart file. In a real project you would surely divide them into different files but for experimenting, I think it’s better to keep everything at one place. Since time is limited, I thought we’d keep the layout simple. Here is my design:<\/p>\n
![\"\"](\"https:\/\/craftcoders.app\/wp-content\/uploads\/2018\/07\/voting_screen.jpg\")
<\/p>\nLets Check:<\/p>\n
- \n
- We have a ListView<\/li>\n
- We have an AppBar with Title<\/li>\n<\/ul>\n
That’s what I call minimalistic \ud83d\ude42
\nAfter I haven’t committed to any tutorial here, I don’t want to go into the exact structure of the code. Much more interesting is how we build our UI based on the authors in Firebase. First, we have to connect Firebase to our app. Just follow the instructions on Firebase or watch this video<\/a>.<\/p>\nFrom Firebase to Voting<\/h4>\n
But what is the right place to read from the database? If we follow Google’s BLOC patterns, we need a stream. Using this stream, information from our database will flow straight into our UI. So we don’t have to hold a state. But what if we need information from the database? So not the information from the database flows into the UI but rather the UI pulls information from the database? To solve this elegantly, we would need a short-term memory. Therefore we will let the stream from the Firebase database flow into a so-called BehaviorSubject. This BehaviorSubject can always return the last element seen on request. So it holds our state.<\/p>\n
![\"\"](\"https:\/\/craftcoders.app\/wp-content\/uploads\/2018\/07\/FirebaseToScreen.png\")
<\/p>\nFinally, we need a so-called StreamBuilder in our view. The StreamBuilder builds itself on the latest snapshot interaction with the specified stream an whose build strategy is given by a builder. So lets look at the code:<\/p>\n
class Bloc {\r\n final BehaviorSubject<QuerySnapshot> _firebaseSubject =\r\n BehaviorSubject<QuerySnapshot>(seedValue: null);\r\n\r\n Bloc() {\r\n _firebaseSubject.addStream(Firestore.instance.collection(\"AuthorVotes\").snapshots());\r\n }\r\n\r\n Stream<QuerySnapshot> get firebaseStream => _firebaseStream.stream;\r\n }\r\n<\/code><\/pre>\nHere we connect the BlocClass with the Firebase Database alias Firestore<\/p>\n
class AuthorGrid extends StatelessWidget {\r\n @override\r\n Widget build(BuildContext context) {\r\n final bloc = BlocProvider.of(context);\r\n return new StreamBuilder(\r\n stream: bloc.firebaseStream,\r\n builder: (context, snapshot) {\r\n if (snapshot != null && !snapshot.hasData) return const Text('Loading...');\r\n return ListView.builder(\r\n itemCount: snapshot.data.documents.length,\r\n itemBuilder: (context, index) => \r\n _buildItem(context, snapshot.data.documents[index]), \r\n );\r\n },\r\n );\r\n }\r\n<\/code><\/pre>\nHere we build a widget based on the stream comming from our blocclass
\nBut wait?!<\/strong> Where comes the BlocClass from? You’re right, the BlocClass itself is also a kind of state we need to have manage. Although the UI of this app is manageable and I could have passed the bloc object through the tree as a parameter, there are better alternatives. With the help of an inheriting widget<\/a> we are able to reach the object from the entire subtree.<\/p>\nFrom Voting to Firebase<\/h4>\n
But How do we get updates to the Firebase?<\/strong> Actually, it’s pretty easy. We just have to let a stream flow in the opposite direction. For this purpose we create a stream controller in our BlocClass. The StreamController controls our stream. It allows to feed events into the stream via a sink as well as to consume the stream by calling the stream methode. All we have to do is: (1) A Click on the list submits an event to the stream. (2) Consume this stream and start a Firebase transaction at the appearance of a event.<\/p>\n
class Bloc {\r\n final StreamController<Vote> _voteController = StreamController<Vote>();\r\n\r\n Bloc() {\r\n _voteController.stream.listen((data) => commitToFireBase(data));\r\n }\r\n\r\n Sink<Vote> get voteSink => _voteController.sink;\r\n\r\n void commitToFireBase(Vote vote) {\r\n Firestore.instance.runTransaction((transaction) async {\r\n DocumentSnapshot freshSnap = await transaction.get(vote.votedAuthor.reference);\r\n await transaction.update(freshSnap.reference, {'Votes': freshSnap['Votes'] + 1});\r\n });\r\n }\r\n}\r\n<\/code><\/pre>\nThis is all we need in our BlocClass. As you can see the voteSink is the place to commit new Events to our Stream. In the Constructor of this Class, we say that the stream is consumed by a function, which is also defined within the Blocclass. In this function, we start a transaction to safely increment the votes for the author by one. Notice how the actual Author is provided by the vote event itself.<\/p>\n
Widget _buildItem(\r\n BuildContext context, DocumentSnapshot document, AuthorBloc authorBloc) {\r\n return new AuthorSquare(\r\n author: document['Author'],\r\n imageUrl: document['Image'],\r\n onTab: () {\r\n bloc.voteSink.add(Vote(document));\r\n },\r\n );\r\n}\r\n<\/code><\/pre>\nAs you can see we just add a new vote event. There is no logic in the UI – all is done by in the BlocClass.<\/p>\n
Navigation<\/h4>\n
I know the blog post is getting long and I said it won’t be a tutorial. But there’s another detail I want to work out. This has given me the most stuggle and I’m sure there are more elegant ways to solve it. Nevertheless, I would like to share and discuss my solution with you. The challenge I encountered was navigation. Yeah, Flutter’s got a pretty well-designed system for navigation. But what I want is more than the standard requirements. So here a some requirements which I had set for myself:<\/p>\n
- \n
- As a voter, after making my choice, I don’t want to be able to re-vote.<\/li>\n
- As a voter, when I open the application I want to see the election results directly, if I have already voted.<\/li>\n
- As a voter, I want to be brought directly to the polls from the election results if there is a new election.<\/li>\n
- As a noob in reactive programming, I don’t want the navigation logic to be located in the view.<\/li>\n<\/ol>\n
Well, as you can see, I didn’t make my life easy. One difficulty was to get the BuilderContext from the widget into the blocClass. However, you need the BuilderContext to create a new route. In Flutter Navigation is based on so called “Routes”. A Route is a mapping from a name to a widget. The Navigator managed this routes by adding or removing them from the navigation stack. So first we needed to get the BuildContext to the blocClass. For this we can use a BehavoirSubject again. When we create a widget, we pass the BuildContext as an event. Since a BehavoirSubject always remembers the last element seen, we are always able to navigate. Furthermore we can pass the widget we wish to navigate to into another stream. If we combine both streams, we have everything we need to navigate.<\/p>\n
![\"\"](\"https:\/\/craftcoders.app\/wp-content\/uploads\/2018\/07\/Navigation.png\")
<\/p>\nIt is important that we do not use BehaviorSubject for the widget stream. We can’t remember the last widget we saw. Otherwise we would end up in an endless navigation. Therefore we use a StreamController for the wigetstream. The BuildContextStream and the WidgetStream are fed into a zipper. The zipper then packs the elements from the two streams into a tuple and the cool thing is: Since we use a BehaviorSubject for the BuildContext, we always get a context here. But since the widget comes via aStreamController, a tuple is only generated if we actually have passed a widget somewhere in our code into the stream.<\/p>\n
class Bloc {\r\n final StreamController<Widget> _widgetController = StreamController<Widget>();\r\n\r\n final BehaviorSubject<BuildContext> _contextStream =\r\n BehaviorSubject<BuildContext>(seedValue: null);\r\n\r\n AuthorBloc() {\r\n Observable\r\n .zip2(_widgetController.stream, _contextStream.stream,\r\n (a, b) => new Tuple2<Widget, BuildContext>(a, b))\r\n .listen((data) => _navigate(data));\r\n }\r\n\r\n Sink<BuildContext> get contextSink => _contextStream.sink;\r\n Sink<Widget> get wigetSink => _widgetController.sink;\r\n\r\n void _navigate(Tuple2<Widget, BuildContext> tuple) {\r\n Navigator.pushReplacement(tuple.item2,\r\n new MaterialPageRoute(builder: (BuildContext context) => tuple.item1));\r\n }\r\n}\r\n<\/code><\/pre>\nIf you look at the picture from above, the code is quite straightforward. If you want to navigate simply pass the widget to navigate to. For example, when we realize that the voting results have been thrown away:<\/p>\n
void _checkForEmptyVotes(QuerySnapshot data) {\r\n int votes =\r\n data.documents.map((snap) => snap.data['Votes']).fold(0, (a, b) => a + b);\r\n\r\n if (votes <= 0) wigetSink.add(new MyHomePage());\r\n}\r\n<\/code><\/pre>\nYou’re wondering where this code is coming from again? Easy, actually. Since we already have a stream from the database, we just have to let it flow into this function. With each database update, the system checks whether navigation is required.
\nThe other requirements are now also easy to implement. We simply write in the local settings whether we have already selected. If so, we pass the corresponding widget the stream and already we navigate.<\/p>\nThe Result<\/h2>\n
Time for a gif!
\n![\"\"](\"https:\/\/craftcoders.app\/wp-content\/uploads\/2018\/07\/ezgif.com-gif-maker.gif\")
<\/p>\n- \n
- You can only vote once ?<\/li>\n
- If someone votes, all devices are getting the update ?<\/li>\n
- When a new election is started, all devices navigate to the election.?<\/li>\n<\/ol>\n
Reflection<\/h2>\n
That’s been a great two days! Even though I had to fight with a lot of initial pain, I am glad to have chosen this topic. By initial pain, I mean trivial things like spending a lot of time for googling the basics of Dart, being depressed from simple compile errors or even setting up Flutter and Dart on my Computer. Despite still pending refactoring I am also relatively satisfied with the code. Even if I will hate myself for this code in a month \ud83d\ude42 The concept behind Flutter is simply great so far! Personally, I find the development experience much more satisfying than vanilla Android with Java\/Kotlin. I also liked Dart as a programming language very much. I liked the tooling around Flutter, too. By the way, I used Visual Studio code.
\nWell I will surely change some code and build some model classes. Also I didn’t care about the design yet. But there seems to be still a lot to discover here. After all, Flutter is there to build beautiful apps! I am not yet satisfied with the navigation either. For example, I don’t like my solution, which is waiting for an update of Firebase (also for the device that requested a new voting). But you will certainly read more of me and Flutter ❤<\/p>\nFeel free to check out the GitHub repo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
- Total mobile development made fun with Flutter and Firebase <\/a><\/li>\n<\/ol>\n