Original subtitles

0 To get started with the weather app go to the GitHub repository listed in the course resources. Then 1

clone the repository and open the project from Android Studio, 2

just as we've done with the previous apps. 3

Finally remember to click on get dependencies 4

after the project is open so that all your errors go away and your project builds successfully. 5

Then we should see that we have a number of folders inside our lib folder. So I've classified all of 6

our different files into different sections. 7

We've got our different screens and we've got three of those: 8

a loading screen, a location screen and a screen for getting the weather based on the city name. 9

And then we've got some services such as the location.dart or the networking part or the weather 10

part. And we finally got some utilities which currently just have a constants file. And everything starts 11

out from the main.dart file. 12

So go ahead and have a look at the designs that we've already created for you. 13

But essentially the UI is kept pretty simple because we're going to be doing a lot of backend stuff 14

and networking. 15

So we've kept the user interface relatively easy to understand, even the most complex screen which is 16

the location screen is pretty simple if you just read through it. 17

It's simply a container with a background image with a column inside that contains a number of buttons 18

as well as some text widgets. 19

So it's pretty simple stuff 20

so far. Now the first thing that happens when our app loads is it will load up the loading screen as the 21

first route. 22

So inside our loading screen, you can see that there's pretty much nothing in here other than a state- 23

ful widget that contains a single raised button which says get location. 24

So if you run this as it is, there's nothing terribly exciting going on right now, 25

it's just a black screen with a single button. But this is where our app is going to start from and the 26

first thing that we want to do is to be able to grab the user's location when we tap on this button 27

get location. 28

Now in order to do this, we're going to leverage the power of Flutter packages. And there's a package 29

called geolocator that we're going to be using to be able to get location services both from iOS 30

and Android. So we'll have to call a single line of code like this that they've described in the documentation 31

and the package will go behind the scenes and do all the necessary things to be able to get us the location 32

whether if our code is being run on iOS or Android. 33

So let's get started by adding this as a dependency. 34

So I'm just going to copy this and go into my pubspec.yaml 35

and right over here just below our cupertino_icons, 36

I'm going to add our geolocator and make sure that it's formatted to be at the same level as cupertino 37

icons. 38

And at the moment it's coming in as a string, I'm just going to delete it. 39

It doesn't really matter if you keep it or not. 40

It will be interpreted in the same way. 41

But I like to have things consistent. 42

So now that we've added that dependency, let's click on packages get to actually imported into our project. 43

And once that's complete, we should be able to see it inside our external libraries and Flutter plugins. 44

So you can see geolocator right there. 45

So now we can actually use it and we're going to be using it inside our loading screen for now. 46

So the first step towards using any of these packages is of course importing it. 47

So right at the top, we're going to import our geolocator. 48

There it is, geolocator.dart. 49

And now we're going to create a new method which is not going to return anything, but all it's going 50

to do is it's going to get the location, so get location. And inside the curly braces of this method, 51

it's going to do everything that's necessary to be able to bring us the current user location. 52

So if we take a look at the docs, it tells us to query the current location of the device. 53

Simply make a call to the getCurrentPosition method. 54

And it shows us how we do this. 55

So it's data type position and this is something called position. And then we have a keyword called a 56

await, and we use the geolocator to get the current position. 57

And as an input we specify how accurate we want that location to be. 58

So let's go ahead and copy this line of code into our project and I'm going to paste it right inside 59

this new method I created called getLocation. 60

Now the first thing that we have to do in order to make this actually work is to add a modifier keyword 61

to this function and it's going to be the word async. 62

Now what exactly is this async and await? 63

Well this is a way for us to be able to carry out time consuming tasks such as getting the GPS location 64

from the phone. You can imagine that asking the phone for the current location, getting it back then processing 65

it and finally being able to have access to it takes a little bit of time. 66

And there's also other things such as trying to get data downloaded from the Internet or trying to read 67

something from file. 68

These are all things that can take an unpredictable amount of time but also it can take quite a long 69

time. By using asynchronous programming 70

we can get these time consuming tasks to happen in the background instead of happening in the foreground 71

and blocking up our UI and freezing up our app. 72

Now the entire next lesson is dedicated to asynchronous programming in Dart and we'll talk about async 73

await futures and all that in a lot of detail. 74

But for now let's try and get the current location first. 75

So we've got this object called Geolocator which comes from the geolocator package and we're going 76

to use it to get the current position by providing a desired amount of accuracy. 77

And I'm going to change that from high to low. And you can see that there's a whole bunch of different 78

options you have, lowest, medium, low, high best for navigation and the thing to remember is that the more 79

accurate the location you're trying to get, the more battery intensive it will be. 80

So if you want to be kind to your users and their phones battery, only use as much accuracy as you need. 81

So if you're making a navigation app where people actually need 82

turn by turn directions, then you probably do need to choose something that is quite accurate like best 83

for navigation. 84

But if we're only trying to get the weather, then something like low which gives us the accuracy to the 85

nearest kilometer on iOA and nearest 500 meters on Android, is probably good enough. And even the lowest 86

one is probably fine, but either way choose one of these accuracy levels. 87

And now we should hopefully be able to get our position back and once we do get our position back, I'm 88

simply going to print it into the console to see where we currently are 89

according to the GPS. Now there's just one more step that you have to do for this to work and that 90

is to ask the user for permission to get their current location because you don't want apps that just 91

happens at the user's location without them knowing cause that's kind of dangerous. And both on iOS and 92

Android, 93

you have to explicitly request positional data. 94

So let's see how we can do that. In the documentation for geolocator, if you scroll down a little bit 95

they'll tell you that in order to get permissions on Android you need to add either the access coarse 96

location or the access fine location into the Android manifest, 97

so where we're only using a low level accuracy positional data, so we only need permission to get coarse location. 98

So let's go ahead and hit copy on this particular tag and let's go into our Android project folder right 99

here and then go into our app folder, our source, main 100

and here we should find our AndroidManifest.xml file. 101

So if you double click on this to open it up you can see that these are various settings we have set 102

for our Android project. 103

And it tells us that we have to add one of the following two lines as direct children of the manifest 104

tag. 105

So what does that mean? 106

Well this is the manifest tag and it's the highest level tag in this particular file. 107

Everything in it are its children but there's also lower hierarchy such as the application tag or the 108

activity tag or the meta data tag. 109

And if you've ever worked with HTML, then this formatting will be very familiar to you because it's 110

styled in XML which stands for extensible markup language. 111

And essentially it's kind of the same as our key value pairs where the key are in these tags and the 112

values are held inside the tags. 113

So inside the manifest tag, 114

so right here just after the closing angle bracket, we're going to paste in our user's permission tag. 115

And this one tells our Android app that we need to access the coarse location and it should request 116

it from the user. 117

So that's our Android part done, so we can close up our Android folder. 118

And now we have to ask for permission on iOS, 119

so when an iOS user uses our app. And what we have to do is we're going to copy these two lines, a key 120

and a string, which tells the user why we need to use their location. 121

So you can change this text if you wish to, 122

if you want to make it more descriptive for the user when you're actually requesting for their data. 123

But let's copy these two lines and we're going to add it to our info.plist file. 124

So now we have to go into our iOS folder and inside our runner folder are all the files that are specifically 125

related to our iOS app. 126

And here you should find a file called info.plist. 127

So if you double click on that you can see again this is an XML file and we're going to add the key 128

and the string to this file just below where it says dict or dictionary. 129

So we're going to pay those two lines in and now we have a dictionary of a key and a value pair. 130

So this tells our iOS app that when we request for the user location, this is the description that we're 131

going to give the user to tell them why we need their location. 132

Now let's hit save. 133

Let's close down those two files. 134

And the last thing we have to do is to actually call this method, get location. And we're going to call 135

it when the user presses on that button that says get location, 136

so right here in the onPressed. And in here I'm going to call get location and now we're ready to test 137

our app. 138

And before you test it, I recommend just stopping the current app from running and then starting it from 139

cold because we added in our dependencies and we messed around with the Android manifest and the iOS 140

plist. 141

It's usually a good idea 142

once you've done that to just start it from scratch. It takes a little bit longer but there's a lot of 143

things that has to link up behind the scenes. 144

So now that our app is up and running when I click on this button get location, it should call that get 145

location method 146

I created this now and it should fetch our current position and print it out into the console. 147

But the first thing it will do when I click on the button is to ask me for permission to give it my 148

current location. 149

So make sure that you click allow at this step. And now it should print out my latitude and longitude 150

into the console. Now where does that location come from? 151

Well if you're using a simulator, it usually comes from a default location that set to the Apple headquarters, 152

so somewhere in cupertino. If you're running your app on Android then you can click on these three dots 153

right at the bottom here. 154

And this gets you into the extended controls and you can select on the location tab to set the latitude 155

and longitude 156

you want this phone to report from. 157

You can manually set and send the location data to your app. 158

Now at this point, it's worth mentioning that if you are running your phone on Android and you're seeing 159

some errors in the console relating to something about Android X, then be sure to head into the course 160

resources where there's a link to this resource on the Flutter documentation talking about how to make 161

your app AndroidX compatible. 162

Now this issue won't affect everybody. 163

It's only if your app actually crashes and it refuses to build. 164

So that was how easy it is to actually get the current GPS location. 165

And if you think about it, behind the scenes a lot of things had to happen. 166

The iOS counterpart had to talk to the iOS operating system to be able to get the location from that 167

device and the Android part had to talk to the Android OS and get the location in a completely different 168

way. 169

But we were able to do that by simply using the geolocator package which has taken care of all of that 170

for us. And we didn't really have to do anything other than simply add it into our project. 171

And if you're curious how geolocator manages to do this then you can head into the external libraries 172

folder and go into your Flutter plugins and expand the geolocator library. 173

Now here you'll see an iOS and an Android project. 174

If you expand the iOS project and go into the classes, you can see that there's a whole bunch of files 175

in here that are written in Swift to work with the iOS location API to be able to grab the location 176

data and to be able to return it to you. 177

Now similarly if you have a look inside the Android folder and you go into src.main and then 178

go into the Java folder, there's both a data folder and a task and a utils folder. 179

And it's here where there's all this Java code that's been written to be it to deal with the Android 180

location manager and to be able to fetch that location data for you. 181

Now you can imagine writing all of this Java code and all of this Swift code not only takes a lot of 182

expertise but also takes a lot of time. But because the author of this plugin has very kindly packaged 183

it into a really simple to use plugin, we're able to piggyback on all of that hard work simply by importing 184

it and calling just one line of code. 185

And hopefully when you build some custom functionality that you think other people might find helpful 186

you'll also create a package around it so that you can share it with other Flutter developers and pay 187

it forward. 188

But for now, I want to focus on these two keywords that we've never seen before, async and await. In order 189

to understand this we have to learn all about synchronous and asynchronous programming. 190

So we have to understand what's actually going on here in this code. 191

head over to the next lesson and let's learn all about asynchronous programming.