Since our categories are currently hard-coded into the screen directly, we cannot update them without updating the code. This is not ideal, so let's fetch the categories from the API instead.
In this lesson, we will:
- Install HTTP package
- Create our Category Model
- Grant the necessary permissions to the API
- Fetch the categories from the API
Let's dive in!
Installing HTTP Package
Installing packages in Flutter...
Ngrok is not really necessary in that case. While it is true, that
localhostor127.0.0.1will point to the Android itself (since Android emulator is running in the VM), you can provide the10.0.2.2:8080in your Flutter app - in that case, it will point to the host's127.0.0.1:8080. That will only work if your Laravel app is accessible at port 8080, of course. So in that scenario, what worked for me: Laravel in nginx withserver_name _;andlisten 8080;and in Flutter app:Uri.parse('http://10.0.2.2:8080/api/categories')If you use Mac or Windows you can use Herd and access your project locally like https://yourproject.test
While this is true, it is way easier to explain ngrok usage for most people :) It is just easier than having to deal with unreachable API endpoint due to some misconfiguration.
Also, the domain names specifically - did not work. So
https://yourproject.testwas unreachable when we were creating this course. That was why we added thengrokusage