Tutorial de Mapas con marcadores animados en Flutter
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2021
- Flutter challenge usando mapbox y markers/marcadores animados.
🔵 Follow me:
/ diegoveloper
🌐 My personal website:
diegoveloper.com/
📌 English subtitles - Two options
(1) Click on the “Settings” icon, select “Subtitles/CC,” and select "English".
(2) Mute and speed up the video, play your favorite music and imagine this is a speed code video 😄
✅ Donations/Support the channel
www.buymeacoffee.com/diegovel...
✅ Coaching/Asesorías
www.buymeacoffee.com/diegovel...
✅ Source Code
www.buymeacoffee.com/diegovel...
💻 My Setup:
Standing Desk: amzn.to/39HLvut
Anti Fatigue Standing Desk Mat: amzn.to/3thoaZM
Monitor: amzn.to/36wQy0c
Monitor Arm: amzn.to/3r3J5h0
Macbook Arm: amzn.to/3acOvzq
Macbook Tray: amzn.to/3r7dBXm
Macbook Vertical Stand: amzn.to/2MnhrNf
Webcam: amzn.to/3qfILMf
Camera: amzn.to/3jIXJru
Camera Mic: amzn.to/2MdxVaC
Speakers: amzn.to/2YAqFrY
MultiPort Adapter USB-C: amzn.to/2N98rLP
Phone Holder: amzn.to/379BmGv
Headphones: amzn.to/2YzUE39
Keyboard: amzn.to/3qkMsA8
Wood Keyboard Tray: amzn.to/3cJRrXl
Microphone (current): amzn.to/3i5GyQC
Microphone (old): amzn.to/3rbAVD9
Microphone Stand: amzn.to/3rLfhpx
Mouse Logitech: amzn.to/3cpVFDc
Mouse Pad Razer: amzn.to/2MHvDjV
Strip Lights: amzn.to/36w0F5x
Main Light: amzn.to/3yU359y
Secondary Lights: amzn.to/2UbNpzY
Goku Figure: amzn.to/36tjx4X :v
Chair (Herman Miller): • La MEJOR SILLA de ofic...
--------------------------------------------------------------
Feel free to use my code from the video to your projects, just don't forget to give me the credits adding my twitter and youtube channel in your comments or network where you use it :).
--------------------------------------------------------------
🎵 Background Music
--------------------------------------------------------------
Far Away by Declan DP / declandp Licensing Agreement: www.declandp.info/music-licensing Free Download / Stream: bit.ly/2NhWC1F Music promoted by Audio Library • Far Away - Declan DP (...
(es) Like para buscar retos más complejos! 😁
(en) Thumb up to look for more complex challenges!.
Можете ли вы записывать видео с русскими субтитрами?
Quiero estar a este nivel con Flutter. Gracias hermano, excelente contenido
En vez de quitar el scroll en el Page, que al cambiar se mueva el mapa a la posición del marker ~
Ufff Cool - Flutter map es más flexible para que el limite sea la imaginación.... Se merece una segunda parte de hecho...
Sin duda alguna deberia de haber una segunda parte sobre el uso de este... para aprender a centrarlo tambien
pero parece un mapa web,servira para una app tipo uber ?
bro resolviste tu duda?@@jopercito
Excelente video, muchas gracias por compartir, no he utilizado Mapbox, solo Google Maps, y las cosas parecen bastante mas sencillas con el package que utilizaste. Super!!
Excelente video .. muy bien explicado y fácil de entender. Se agradece tu dedicación.
Increíble, es muy cool, haces que todo parezca tan fácil.
Muchas gracias por compartir tus conocimiento con nosotros los mortales xD.
Muy chévere como siempre! 🙌
Lo voy a replicar, quiero probar algunas cosas
Hola Diego, muy buen aporte me diste una idea excelente. ¡gracias!
Excelente..!, muy buen ejemplo. Saludos desde Venezuela..
Muy buen video. Este video merece una segunda parte, con navegación. Sería muy interesante de ver
Eres grande hermano. SALUDOS DESDE MEXICO.
Grande Diego como siempre 👌
Animation so easy in Flutter and more easy by seeing your tutorials thank you for teaching in easy way. :)
Buenazo hermano! Muchas gracias!
Excelente diego, muy buen aporte :D. Muy buen contenido el que tu produces para la comunidad
gracias bro, ahí vamos :D
Muy genial el tutorial mas videos asi
Buenisimo maquina!
Que genial 👏👏👏
Excelente video. Eres un pro
You made my weekend good!
Geniooo..!!!!!
Muchas gracias , por tus videos eres el mejor .
Really nice :)
Amazing!
Que duro !
exelente!!!
Crack!
Thanks man! i want more!)
awesome buddy
Muy buen video Diego!! Estaría bueno que enseñes como tomar los datos reales directamente desde maxBox o googleMap, por ejemplo todas la estaciones de servicio o farmacias. Creo que sería un buen ejercicio.
Eso es parte de la documentación oficial y hay millones de tutoriales, flutter.dev/docs/cookbook/networking/fetch-data
THANK YOU
genial
The translations are Great
محتوياتك كله ابداع 👏ولو ماعرف ب الإسباني همزين اكو ترجمة😆
Podrías realizar una app para prestamistas en udemy donde se muestre como agregarlo como modulo a otra aplicación ya realizada y donde a su vez también se pueda anexar esta aplicación de maps?
Diego muy bueno el video. Una pregunta como se podría realizar las polylines con flutter map?. Se te agradecería de antemano y saludos!.
github.com/fleaflet/flutter_map/blob/master/example/lib/pages/polyline.dart
buenas, fijate que cuando estas en el ultimo o primer marker (del list de markers entiendo) la aplicación se bloquea, dejo como movil el page view builder me voy a alguno de enmedio y la aplicacion revive. me gustaría mucho una extención sobre este exelente tuto. te felicito y agradezco por compartir tu conocimiento. saludos desde mexico
Si puedes crear el bug en stackoverflow español para revisarlo, siempre ando respondiendo dudas allá.
Hola, se puede trazar una ruta recorrida (de varios locations) con flutter_map!? podrás orientarme!? gracias!
Revisa la documentación y los ejemplos del package
Hola Diego, me podrías brindar información de como puedo hacer que cuando entre a la app no se muestre el card en si y que también pueda salir del card y ver solo los markers y el point lo estoy intentando hacer pero no encuentro la solución ya que el contador (i) comienza en 0 y entonces apunta a mi primier objeto de la lista mostrando el primero... Agradecería bastante si me puedes ayudar!!!
Hola, no creo que te pueda ayudar por este medio, pero si deseas puedes poner la pregunta en el grupo de Flutter y Dart en espanol de facebook o si deseas asesoria personalizada : www.buymeacoffee.com/diegoveloper/extras
oye diego, tengo una duda si en el pageview hace el efecto de rebote perfecto pero en el dato inicial y final me aparece una linea azul que supongo es el final e inicio de las paginas, como puedo hacer que en esas tambien me haga la animacion de rebote?
cambia el physics del PageView, en lugar de usa : NeverScrollableScrollPhysics() usa BouncingScrollPhysics() o BouncingScrollPhysics(parent: NeverScrollableScrollPhysics())
@@diegoveloper muchas gracias diego, espero que sigas subiendo contenido parecido a este esta super chevere y tambien la forma en la que explicas.
cuales serian las principales diferencias y ventajas sobre el googlemaps?
Hay bastante info sobre eso, mira esto : www.uptech.team/blog/mapbox-vs-google-maps-vs-openstreetmap
@@diegoveloper gracias y muy buen video!
Hola Diego, sería excelente si pudieras hacer una segunda parte con la navegación paso a paso. Yo he tratado con flutter_mapbox_navigation, pero no funciona u_u
Parece que con la última versión hay un problema , puedes seguirlo aquí : github.com/eopeter/flutter_mapbox_navigation/issues/145
Hola, Diego, Es posible que pueda tener una reunión con usted por zoom, skype?
Claro www.buymeacoffee.com/diegoveloper/e/27476
Buen video parcero, cómo seria mas fácil obtener la ubicación tiempo real? Estoy leyendo acerca de Location Plugin, psdta: soy nuevo en esto.
Si, se necesita obtener la ubicación con algún plugin, geolocator me va bien
Please make a live location tracking and polylines using mapbox and flutter_map package
esta muy bien todo pero y en el caso de querer usar google maps? que se tiene que hacer tienes un tutorial de esto pero con google maps?
Dale una revisada a este package: pub.dev/packages/flutter_animarker
@@diegoveloper puedes hacer lo mismo pero usando la api de google map? o venderme ese codigo pero para google maps pls.
Me verán en todos los vídeos de Leaflet y Flutter
Hello, how to do the same with markers on google map?
First thing you have to do is use the `google_maps` plugin, then check the samples
Make a vedio on morph page transition
Hola soy una nueva seguidora me gusta mucho como enseñas quiero implementar tu video pero quiero saber si al dia de hoy aun es funcional ?? O si han habido cambios o actualizaciones
debería funcionar, igual si te animas a ser miembro del canal, desde el plan DEVELOPER, estamos en discord ayudando con las dudas, somos muchos devs ahí apoyándonos entre todos
@@diegoveloper cuál es el canal de discor me gustaría unirme porfavor
Hay que ser miembro del canal, revisa desde el plan DEVELOPER, luego de eso, entras a discord, ajustes. en integracion ahi usas el login de youtube y te aparece el canal
@@diegoveloper una pregunta el mapbox es gratuito??
@@brendaflores9475 revisa los costos aquí : www.mapbox.com/pricing
¿Se pueden crear las animaciones también en Google Maps?
revisa este package : pub.dev/packages/flutter_animarker
Lo he probado pero nunca ha funcionado en mi proyecto.
Como le haces para tener la apk en el iphone? 22:30
Es el simulador de iOS, necesitas una Mac para poder usarlo
Is that need any billing?
do you have the answer ?
@@walidboukhtache4138 yes walid , lazm tsalak khoya
@@mohammedislam733 Thanks brother, do you know the price or which API is needed ?
Dónde podría ver el código fuente de este proyecto? Felicitaciones por tu trabajo
En la descripción del video están los links
@@diegoveloper he ido a la plataforma de buy me one coffee, pero no veo este proyecto. Gracias
Podrías revisar los planes o extras : www.buymeacoffee.com/diegoveloper/extras
@@diegoveloper disculpa de nuevo. Estoy mirando en los Challenges y el que busco que es el de delevery con provider y clean architecture no lo veo. Quiero comprarlo 15$ vale no?
sí, cualquiera vale 15
Interesante la aplicación pero a mi parecer siento que deberias dedicar mas tiempo en la explicación porque el dominio del problema es amplio.
Why the english title if the video is in another language :-/
you can enable the subtitles but you are right, since now I'll use spanish for the titles