WEBVTT 00:00.080 --> 00:00.760 Welcome back. 00:00.760 --> 00:04.920 We created this suspend function called get all markers from Firestore. 00:05.160 --> 00:08.080 Inside the marker repository implementation. 00:08.280 --> 00:16.400 Now let's move to the map ViewModel and call this function in order to get it and display all markers 00:16.600 --> 00:17.600 on the map. 00:17.600 --> 00:25.200 First of all create a new function named as Load Markers from Firestore. 00:25.240 --> 00:30.920 This function uses the ViewModel scoop dot launch. 00:31.160 --> 00:39.280 Since the function get all markers from Firestore inside marker repository implementation is a suspend 00:39.280 --> 00:40.120 function. 00:40.120 --> 00:43.240 We need to call it inside the ViewModel scoop. 00:43.280 --> 00:52.840 We need to get a list of destination markers, so we need to store them in a list outside this function. 00:52.840 --> 00:56.040 Create a new variable. 00:56.200 --> 01:05.040 Start with private val markers equals to mutable state flow of. 01:05.270 --> 01:11.910 List of destination markers and set it to empty list. 01:11.950 --> 01:16.350 Then use val markers in Firebase. 01:16.390 --> 01:19.190 Equals to it's of type Stateflow. 01:19.230 --> 01:21.870 Markers dot as Stateflow. 01:21.910 --> 01:22.510 Alt+. 01:22.510 --> 01:24.630 Enter to import the Stateflow. 01:24.910 --> 01:27.870 Now let's talk about these variables. 01:27.910 --> 01:35.350 Maybe you are wondering why I'm using Stateflow instead of remember Stateflow and remember state and 01:35.510 --> 01:36.630 other Composables. 01:36.630 --> 01:38.350 I'm showing you the difference. 01:38.350 --> 01:41.590 So here I am teaching you the concepts. 01:41.590 --> 01:43.870 I'm showing you all the concepts. 01:43.870 --> 01:45.270 So you have two ways. 01:45.270 --> 01:51.470 Either you use this way or another way, which I'll show you in the next video. 01:51.470 --> 01:58.910 So I am going to update the code in the next videos in order to support the only Jetpack compose code. 01:58.950 --> 02:00.470 This is a new. 02:00.710 --> 02:10.510 This is the approach for compose and compose UI, so you can use it with views and widgets and old Xaml 02:10.550 --> 02:11.940 to update the code. 02:11.940 --> 02:18.540 Also, you can use it in Jetpack Compose, while in the next approach I'm going to show you how to use 02:18.820 --> 02:28.180 the remember Stateflow and remember mutable state list of in order to save data inside it, but this 02:28.180 --> 02:39.220 is for pure Jetpack Compose code, so this approach is not purely for Jetpack Compose, it's for both 02:39.260 --> 02:41.420 compose and compose UI. 02:41.580 --> 02:45.260 Here I'm creating a markers variable. 02:45.300 --> 02:52.300 It's of type mutable state flow a flow that holds a single updatable value like a state container plus 02:52.340 --> 02:53.780 observable stream. 02:54.020 --> 02:59.780 You create it uh, here with type list of destination marker. 03:00.020 --> 03:02.660 Initial value is empty list. 03:02.660 --> 03:08.540 So markers starts with an empty list and can be updated later. 03:08.580 --> 03:11.500 Only your ViewModel should update it. 03:11.500 --> 03:20.050 Because of this we use the private keyword markers in Firebase is of type Stateflow Stateflow itself 03:20.050 --> 03:21.170 is read only. 03:21.210 --> 03:23.610 It can be observed but not changed. 03:23.850 --> 03:32.490 This means your UI can collect markers to get updates, but it can't call dot value to modify it. 03:32.690 --> 03:34.570 Why this is important. 03:34.570 --> 03:38.010 This is the best practice for encapsulation. 03:38.010 --> 03:44.250 Private mutable state of markers and public read only state markers. 03:44.290 --> 03:54.730 Later, we're going to modify this code in order to set a new pattern and use only compose only UI and 03:54.730 --> 03:56.530 compose only pattern. 03:56.570 --> 03:59.530 So again guys, this is a very important note. 03:59.530 --> 04:03.010 This is for compose and compose UI. 04:03.330 --> 04:10.570 So this approach, this way of creating variables using mutable Stateflow and stateflow for compose 04:10.570 --> 04:12.290 and compose UI. 04:12.490 --> 04:18.610 Later we're going to modify those in order just for getting the compose only UI. 04:18.930 --> 04:22.320 But I prefer showing you everything. 04:22.480 --> 04:28.760 Every code in order to take a big overview of all codes available. 04:28.800 --> 04:32.560 Okay, start with try markers. 04:32.720 --> 04:36.400 Value equals to repository dot. 04:36.520 --> 04:42.000 Get all markers from Firestore and store them inside the markers. 04:42.040 --> 04:45.080 Variable catch E exception. 04:45.080 --> 04:49.800 Set the marker dot value equals to empty list. 04:49.800 --> 04:59.680 Also you can show the error e dot stack or print stack trace okay this is for our marker value. 04:59.720 --> 05:05.760 Now let's move to the main screen the Uber clone or clone map. 05:05.760 --> 05:08.480 Now let's get the markers. 05:08.480 --> 05:20.560 So here getting the markers value markers equals or by ViewModel dot markers in Firebase dot collect 05:20.600 --> 05:26.070 as state alt plus enter to import operator state dot get value. 05:26.150 --> 05:34.750 Here we are collecting a state flow from your ViewModel and exposing it as a composite state that the 05:34.750 --> 05:36.550 UI can react to. 05:36.590 --> 05:41.510 It emits updates whenever the marker list changes. 05:41.670 --> 05:45.630 Think of it as an observable stream of lists. 05:45.630 --> 05:53.150 The collect as state function collects the state flow inside the composable, converting it into composite 05:53.150 --> 05:59.910 state, which holds the current value and automatically triggers the composition when the value changes. 05:59.910 --> 06:06.910 So any time the ViewModel updates markers dot value like this. 06:07.150 --> 06:18.190 And here in this code, compose Recomposes this part of your UI and val markers by ViewModel delegates 06:18.230 --> 06:18.870 the state. 06:18.870 --> 06:22.230 So by keyword is a delegation property. 06:22.230 --> 06:31.900 So markers by ViewModel delegates the state, so you can use it like a plane variable Markers under 06:31.900 --> 06:37.100 the hood without buy you have to do like state marker state dot value. 06:37.140 --> 06:41.380 But when using buy it's a shortcut markers. 06:41.380 --> 06:47.380 You can use it directly without any collect as state or a value or anything. 06:47.420 --> 06:52.660 Okay, so after this line markers is just a list of destination marker. 06:52.860 --> 06:58.660 And the proof of this, if you hover the mouse you can get a list of destination markers. 06:58.660 --> 07:01.700 If you use equals markers. 07:01.700 --> 07:05.380 Now a state list of destination marker. 07:05.460 --> 07:08.780 So buy will do the job for you. 07:08.780 --> 07:12.500 Inside the map we need to display the markers. 07:12.500 --> 07:15.740 So here go inside Google Map. 07:15.940 --> 07:25.700 And for every marker inside markers go and create and you marker composable. 07:25.860 --> 07:33.020 Set the position to marker to lat long and the title marker title Alt+. 07:33.020 --> 07:41.490 Enter to import the composable marker for Google Maps and we need to change the position which is Alt 07:41.490 --> 07:50.090 Plus enter to import this, and instead of position, we need to set the state so state equals to new 07:50.130 --> 07:55.170 marker state and set the position using marker to lat long. 07:55.170 --> 07:57.730 So this function will do the job for us. 07:57.730 --> 08:04.770 Also, if you prefer, you can use new lat long and set the marker latitude and longitude. 08:04.770 --> 08:06.490 Let's run our application. 08:06.490 --> 08:08.250 Markers are not shown. 08:08.290 --> 08:10.450 Maybe there is an error. 08:10.730 --> 08:14.330 Let me go back to the ViewModel and here we have. 08:14.530 --> 08:16.730 This function is never been used. 08:16.730 --> 08:21.730 We need to initialize it when the ViewModel is being created. 08:21.730 --> 08:27.130 So init block set load markers from Firestore. 08:27.290 --> 08:28.570 Let's run again. 08:28.730 --> 08:30.130 This is our map. 08:30.330 --> 08:32.570 And congratulations guys. 08:32.570 --> 08:35.290 This is the San Francisco marker.