How I learned flutter and made an open source contribution to Flutter Map

As we all know, Flutter is an awesome SDK and Dart is fun to program with. In this blog I am going to take you on a journey about how I got started with flutter, and made my first contribution to the flutter community by making a plugin for flutter map. You can view the plugin here.

UserLocation Plugin

A little bit of background here. I had just finished my final exams of junior year and had a gap of 2 months, so I decided to do an internship at NAXA. I was placed on a team who were working with Flutter on an application, that made use of the FlutterMap widget. We needed a package that could handle all the location related permissions, notify users if they have disabled the location access and display a marker at the current location of the user onto the map being rendered. There was a lot of resources and pre-existing code that could do some of the needed functionality, all we needed was to attach those Lego pieces together and add some of our own to it. So that is what I did.

Week 1

As I was completely new to Flutter, I first started by learning dart from YouTube. As I was familiar with the Object Oriented Programming and languages like C++ and Java. It didn’t take me quite a time to get familiar with dart. Also, I found that dart was very beginner friendly language to start with. I completed the playlist in a day. After that, my mentor told me about this Udemy course by Stephen Grinder on Dart and Flutter. I then brought the course and got enrolled in it. I must admit, Grinder was one of the best instructor I ever learned programming from.

While first learning about the UI and designing layout in Flutter, just like every beginner I too really got stuck and didn’t really get it. The article from Pooja Bhaumik about Breaking Layouts into Row and Column has helped me a lot. Also I think we should try to understand the behavior of some of the basic widgets that we often use. To name few:
- Container
- Row
- Column
- Stack
- Align
- Expanded or Flexible

Knowing about them really helps and gives also gives us a good understanding of how flutter renders widgets.

I learned about dart, using dart with flutter, Asynchronous programming in dart, and built some UI clones.

Week 2

In the second week, I continued with the course. Week 2 was more fun since we built an app to view the latest post from the Hackerrank using it’s API. I learned a lot of things while building this app. [Later I found out the Flutter Team has also built the same app on the boring flutter development show on YouTube.] I also used to read blog post on medium and followed some YouTube channels. At the end of Week 2, I completed the course and was now quite comfortable working with flutter and dart. Of course I didn’t know everything about it, but I kinda knew what to search for on Google.

At this point in time, I was mostly learning about states and state management in flutter using blocs. I was really confused at first about Streams and blocs and all those kinds of stuff as it was pretty new to me. You may also find yourself in that state of confusion and I say it the best state to be in while learning something new. This article on Widget-State-BuildContext had really helped me a lot to understand what state and state management is in general.

I learned about animations, state management in flutter using bloc pattern and provider and worked with database and JSON

Week 3

Once I finished learning flutter from the course, I began to work on the plugin. The FlutterMap also had its own example of plugin development in the example app and I started out by playing around with it. I first learned how to place a marker at a given LatLng. I learned most about developing plugins from an existing plugin:flutter_marker_cluster and a guide from flutter docs.

Major Issue #1

I used the location plugin to get the current location of the user and to manage some of the user permissions. The location was sent as a future, so I thought of using a FutureBuilder.

I was able to render the initial marker position but the marker position didn’t seem to change as I changed the location of the user. Also, the map flickered too much and it seemed that I was making a lot of request to the location

I was basically stuck at this moment.

I then opened an issue in the FlutterMap Github repo. Later that night I got a reply saying I should be using the setState() to maintain my marker’s state. I again refactored my code and managed by business logic inside the setState() The marker was now rendered in the map, but still, I had one issue that was left unresolved.

Major Issue #2

The marker was not fixed to the map but seemed to overlay on top of it.

As the new layer was transparent, I couldn't instantly figure out the issue. But after carefully observing behavior of the map, and what I wanted the default behavior to be, everything finally clicked and I knew the issue and what went wrong. What had happened was I was returning a new instance of Flutter Map and had been working with the new layer. As the new Flutter Map didn’t have any map tiles, it was transparent.

I again refactored my code and this time only returned an empty Container(). and controlled the root flutter map widget. [ Previously, I had been writing code to control my newly formed flutter map widget]. The code seemed to work and I was finally able to make this thing working.

The next thing that we did was to publish the package to the https://pub.dev
And I must thank the developers for making it so easy to publish packages. All you need to do is open up an account on the pub.dev and enter two simple commands.

pub publish --dry-run
pub publish

After I published the package, I then edited the README of the FlutterMap and included my plugin under the Plugins and sent a pull request.

And to my surprise, it got accepted and was finally merged.

The plugin is still under active development and few people have already started to integrate on their projects as well. Few bugs have been discovered and issues have been raised.
You can find the plugin here: User Location Plugin

Final Thoughts

It was a great experience learning flutter and developing the plugin. I learned a lot of new programming concepts and design patterns along the way. Developing in flutter is not only relatively easy but it’s rather fun as well. I really encourage someone who has been thinking about getting started with learning flutter, to go for it and also get involved with the community.

I was really amazed at how fast one can learn flutter and build something useful in such a small amount of time, and that is the reason why I wanted to share this story. Let’s get connected on Twitter: @igaurab