Flutter – Geolocation

Hi Friends,

Hope you are all well. In this post let’s see how to do a simple geolocation call using your mobile’s location sensor and use the latitude and longitude coordinates to locate the spot on a map.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affliate link)

Let’s begin.

A screencast of this post

 

Code for this post can be found – here.

First of all create a new project and then open up pubspec.yaml.

Add the below packages as dependecies.

Open android -> app -> src -> main -> AndroidManifest.xml and add the permission as shown below.

(For iOS this is slightly different. Please visit the plugin page here to know about it.)

Alright, Now simply open main.dart file and modify it as shown below.

Whoa, that’s a lot of code.

Let’s break this down.

  1. I am following a three step process:
    1. Ask for permission to use the device’s gps from the user. (getPermission())
    2. Once the user grants permission, then simply make a request to get the current location. (getLocation())
    3. Use the returned result to simply move the map to the specific coordinates.
  2. Simply load the map as we saw here.
  3. In the center: attribute call the buildMap() function.
  4. The build map function simply calls the getLocation() which in turn calls the getPermission() method which makes the call to the user, gets the permission to access Location.
  5. The getLocation() method then requests for the device’s location.
  6. The buildMap() method then uses this to move the map to the specific lat, lng values using the mapController.
  7. The Map Controller provides us a lot of options to manipulate and perform actions on the map (i.e., after the map is initialized)

Enough talk, Let’s run this app. You would see the below screen.

Screenshot_2018-07-10-22-09-40

Cool right? I mean, obviously it would be a different screen for you guys based on your location, I presume. But you get the feel of it right ?

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donations – here.

Join our flutter community – here.

 

 

 

Flutter – Maps and markers

Hi Friends,

Hope you are all well. In this post let’s talk about bringing maps into your flutter apps.

Though there are many providers who provide readymade service endpoints that we can simply call and use in our app to bring in a map. The commonly used ones are google maps and leaflet (Open source, doesn’t require a key).

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affliate link)

A screencast of this post:

Let’s begin.

First create a blank flutter app.

Now add the flutter_map plugin which will help us bring a map into our mobile app. Open pubspec.yaml and add it to the dependencies as shown below.

Alright., Now open main.dart file and add the below code.

Now leaflet is open-sourced so, I have just used one of the free map templates in the urlTemplate. To make your own maps kindly visit a provider like mapbox which is a service that enables you to make your own map tiles and import them into your apps.

Cool. Now run the app. You will see the below screen

Screenshot_20180705-221611

Of course, the map on your screen might look a little bit different, but in essence a  map get’s loaded. Now let’s see how to navigate to a particular place on our map when we load it.

Open main.dart file and modify the options as shown below.

Run the app again.. (I mean run it again, not just wait for the hot reload)

You will see New york when it loads up now.

Screenshot_20180705-221634

Cool right ?

Markers:

Now, let’s talk about placing markers on the map.

Open up main.dart file and modify it as shown below.

I have now added a marker which is nothing but an icon button. I have placed the marker at a point using the point: attribute (Note that you could simply place your marker anywhere just by providing the lat lng coordinates of that specific location.

Now run the app. You will see the below screen.

Screenshot_20180705-224111

Similarly you could add any number of markers you want on the map.

(For some cool markers consider bringing in font awesome icons as well)

Hope this helped you guys, if you found this helpful, kindly share it with someone and help them too.

Join our community – here. (It’s free)

Thanks for reading. Peace.. :)

Flutter – Charts and Stopwatches

Hi Friends,

Hope you are all well. In this post let’s talk about charts. We’ll see how to build a cool looking stopwatch using radial charts.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

Let’s begin.

Screecasts of this post are available in three parts.

Part – 1:

Part – 2:

Part – 3:

 

The complete code for this post is available – here.

 

First let’s create a new application and then start from there.

Let’s create three Floating action buttons first.

Whoa, that’s too much code dude, break it down..

First, I have created three floating actions buttons and I these buttons will be used to manipulate a stop watch.

Then I have written three functions namely startWatch(), stopWatch() and resetWatch() to perform actions on the Watch.

Alright dude, now I get it, you have simply created a Watch and then you are stopping it, starting it or resetting the time using three buttons. Fine, now how do you update the UI..?

Well, for that specific purpose I am using a Timer. The timer will start whenever the watch is started and start calling the callback function (updateTime) every 100 milliseconds, i.e., 1/10th of a second. Nice.

Now run the app. If everything goes fine then you would be able to see a nice stop watch with three buttons to control it.

Bringing in the chart:

Cool, now let’s represent the time using a radial chart.

To do that first install a package. Open pubspec.yaml and under dependencies add flutter_circular_chart as a dependency as shown below.

Cool, let’s go ahead and bring in this chart into our app.

Now, rather than bringing it in piece by piece, I’ll just go ahead and throw the entire code up here and then try to explain it.

Wow, okay that’s lot of code.. too much code..

Let’s break this down.

  1. I am bringing in an animated circular chart and replacing the existing text widget with it. This chart will have a global key which I will then use to update the chart with data.
  2. This chart will use percentages as values. So, for every 1 second I need to pass 1.6 as the value to the chart. i.e., 1 second is 1.6, 2 seconds is 3.2 and so on and so on.
  3. The generatechartdata() function takes in two arguments, min & seconds. These two will be represented by two segments in the chart. Note that whenever the chart is updated, the seconds (counted from zero to 59) and minutes should be sent to this function.
  4. A circularstackentry contains a set of segment entries, in essence a circularstackentry is like the whole chart whereas the segment entries are the individual segments of the chart.
  5. Now we need to reset the seconds segment every 59 seconds. So we have the below code included in the updateTime() function.

6. I would highly recommend you to watch the videos to get a clear and better understanding of the above block of code.

Alright, now if you run the app you’ll see a nice stopwatch with charts as shown below.

Screenshot_20180702-234532

Screenshot_20180702-234540

Looks cool right?

Now try to get the current time of a device and then sync it with three segments representing hour, minute and seconds respectively to create a cool looking clock.

If you found this helpful, kindly share it with someone and help them too.

Support me; buy my course – click here.

Join our flutter communtiy – click here.

Thanks for reading. Peace.. :)

Flutter – Slivers

Hi Friends,

Hope you are all well. I know it’s been a long time since I posted. I was working on a course for you guys and hence I din’t get time to post new stuff.

So here’s my course – Click here

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

A screencast of this post.

 

In this post let’s try to create a cool ScrollView effect that you might have come across in several apps.

Webp.net-gifmaker (1)

Okay, First of all I am sorry, I made that GIF from a set of screenshots, so it might not be as smooth as one would expect a gif to be.

Anyway, this is a cool effect right? You could display a nice image and when you try to scroll up it automatically transforms into an appbar. This could be easily done in flutter using a CustomScrollView.

Enough talk, let’s get our hands dirty.

As usual, create a new project.

Open up main.dart file and modify it as shown below.

Let’s break this down.

Usually inside a scaffold we specify an appbar and then a body of the app which is essentially what is shown in the screen right ?

Here we are introducing something called a customScrollView and pushing all our content into it. A CustomScrollView helps us to add effects based on the scroll action of the user.

If you notice I am then adding the slivers attribute which is essentially an array of Widgets. We are first introducing a SliverAppBar which is in essence similar to our regular App Bar. The key difference being it gives you more options for customisation. Here I have added the expandedHeight option so that the appBar now covers a larger area of the screen when it is loaded. Then I have brought in an image within the flexibleSpace parameter. The entire image would be shown in the AppBar.

Next I am introducing a SliverList, (This could be a SliverGrid or I could simply fill the remaining space with something). In the sliver list I am simply placing a list of cards. That’s it.

Now let’s run the app and try scrolling.

Webp.net-gifmaker (2)

Wow, it’s even better than we expected right ?

That’s it for now guys. If you found this helpful, kindly share it with someone and help them too.

To learn about bringing in firebase auth and other awesome stuff buy my course – Click here.

Thanks for reading. Peace.. :)

Flutter – Side menu

Hi Friends,

Hope you are all well, In this post let’s see how to bring in side-menu/hamburger menu/navigation-drawer/hidden-drawer menu in your flutter apps.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

Let’s begin.

A screencast of this post.

 

As usual create a flutter app and then open main.dart file. Modify it as shown below.

Run the app. You’ll just see an app with a blank appBar. Alright now let’s bring in a side menu and we’ll also add a part to the side menu where we’ll be showing the user display picture, user name and his email.

Modify main.dart file as shown below.

This will add a hamburger menu button to the header. Tap on it and you will see a nice side menu on the app. It’ll be having the top useraccountheader as well.

Screenshot_2018-05-30-01-37-12

Nice right ? Now, let’s see how to bring in some pages in our app and navigate to them from this menu.

Create a new file in lib directory called about.dart and add the below code into it.

Nice. Now open up main.dart file and modify it as shown below.

Now you’ll see an option in the side menu as well.

Screenshot_2018-05-30-01-41-30

Try tapping on it and whoa, you’ll now be navigated to the About Page.

This is how you could bring in a navigation drawer in  your apps to navigate between pages.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Join our community – here.

Thanks for reading. Peace.. :)