You can use ngrok or if you are using laravel valet I think the command is valet share
Laravel Valet api, to consume from flutter app
Hi, anyone knows how to setup laravel valet to consume an api form flutter? I have an api in http://api-app.test but I can’t find a way to connect from my flutter app … thanks !
Yes, using valet share, with a public url works. But I was looking for a local connection. Is better to development. Thanks !!
same issues on Laravel api to Flutter app Local host testing.
I would appreciate to know if you found how to make it work.
@hehe If you or anyone else finds themselves here after all this time (this post was pretty high on my search results), I found a post on medium that worked for me to get android emulator to connect to valets .test domains (2023/08/18, Flutter 3.7.9, Dart 2.19.6, Google Pixel 3A Emulator @ Android 13)
iOS worked for me out of the box
https://medium.com/@masterix/how-to-use-laravel-valet-with-ios-simulator-and-android-emulator-5d8496cf3209
Basic Steps
# 1. Stop Android Emulator
# 2. Add android sdk and emulator to $PATH if you haven't done so in .zshrc / .bashrc
$ export ANDROID_HOME=$HOME/Library/Android/sdk
$ export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools
# 3. List Emulators
$ emulator -list-avds
# 4. Start Emulator with Write Access to System Partition, change "Pixel_3a..." with your emulator
$ emulator -avd "Pixel_3a_API_33_arm64-v8a" -writable-system
# 5. Allow root access
$ adb root
$ adb remount
# 6. Download Emulators /etc/hosts file
$ adb pull /etc/hosts
# 7. Add .test domain to downloaded hosts file, not the host file of your computer. Android Emulator network interface maps 10.0.2.2 to localhost
$ vim hosts
$ vim hosts
127.0.0.1 localhost
10.0.2.2 android.test # add this, change this to the url of your laravel api
# 8. push modified hosts file back to android emulator
$ adb push hosts /etc/hosts
The medium posts also has instructions how to enable valet secured domains if you need that
My solution towards Laravel Valet + Flutter is follow step
- Login ngrok https://dashboard.ngrok.com/get-started/setup, connect your AuthToken to your machine.
- Create a free domain name - https://dashboard.ngrok.com/cloud-edge/domains , which you can use it as domain name to connect between your local development and Android Emulator.
- Go to your Laravel project, run
valet link your-domain.ngrok-free.app, it will update in Valet Setting foryour-project.test&your-domain.ngrok-free.app - Now you can run
ngrok http --scheme=https --domain=your-domain.ngrok-free.app your-project.test:80, *remember not valet share, justngrok`. Below screen is displayed
ngrok (Ctrl+C to quit)
Take our ngrok in production survey! https://forms.gle/aXiBFWzEA36DudFn6
Session Status online
Account shiroamada (Plan: Free)
Version 3.3.4
Region Asia Pacific (ap)
Latency 17ms
Web Interface http://127.0.0.1:4040
Forwarding https://your-domain.ngrok-free.app -> http://your-project.test:80
You can use always use https://your-domain.ngrok-free.app for your database records, and it will work between your local Laravel API development and your flutter development.
For Laravel , TrustProxies.php:-
protected $proxies = '*';
protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO | Request::HEADER_X_FORWARDED_PREFIX | Request::HEADER_X_FORWARDED_AWS_ELB;
If you still This request has been blocked; the content must be served over HTTPS., you can following these step to delete the hot file: https://laracasts.com/discuss/channels/vite/laravel-vite-assets-blockedmixed-content-issues-in-production-environment?reply=898059
Another solution fix the HTTPS issue: https://stackoverflow.com/a/71618444/129209
1- in laravel project php artisan serve : to make a local server
2- in flutter use 10.0.2.2:8000 instead of localhost:8000 as AVD uses 10.0.2.2 as an alias to your host loopback interface var url = Uri.http('10.0.2.2:8000');
Please or to participate in this conversation.