Flutter Challenge: App de Café con Animaciones
Вставка
- Опубліковано 4 жов 2024
- 📌 Inspiration:
dribbble.com/s...
📌 Coffee Challenges from LATAM community:
• Revisando Reto de prog...
📌 Assets (Images)
drive.google.c...
🔵 Follow me:
/ diegoveloper
🌐 My personal website:
diegoveloper.com/
📌 English subtitles (UA-cam Desktop - only)
Click on the “Settings” icon, select “Subtitles/CC,” and then click “Auto Translate.” A list of languages you can translate into will be displayed. Select “English” (Or the language you want). Done!
Or
📌 Mute and speed up the video, play your favorite music and imagine this is a speed code video :)
✅ Donations
www.buymeacoff...
✅ Coaching/Asesorías
www.buymeacoff...
✅ Source Code (You need a membership)
www.buymeacoff...
💻 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: amzn.to/3rbAVD9
Microphone Stand: amzn.to/3rLfhpx
Mouse Logitech: amzn.to/3cpVFDc
Mouse Pad Razer: amzn.to/2MHvDjV
Strip Lights: amzn.to/36w0F5x
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 :).
--------------------------------------------------------------
------------------------------
Freedom by Roa / roa_music1031
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-_freedom
Music promoted by Audio Library • Freedom - Roa (No Copy...
------------------------------
🎵 Track Info:
Title: Freedom by Roa
Genre and Mood: Holiday + Happy
---
🎧 Available on:
Spotify: spoti.fi/3fUr6oL
iTunes: apple.co/2KUwNYz
Deezer: deezer.com/us/...
UA-cam: • Roa - Freedom 【Official】
SoundCloud: / . .
UA-cam Music: music.youtube.....
---
😊 Contact the Artist:
Roa:
contact.roamusic.yt@gmail.com
/ roa_music1031
ua-cam.com/users/ch....
open.spotify.c....
/ artist .
play.google.co....
deezer.com/us/...
/ roa__music
/ roa__music
/ roamusiccc
---
I really enjoy your videos. they are so well done I don't even need to read the subtitles.
Sos buenisimo amigo! me sirve un monton tus videos para aprender y tener mas oportunidades laborales. gracias
I have been watching you for a long time on facebook but never thought of watching your video. I want to learn from you so please make videos in English. Doesn't matter if your English is good or not Sir.
Esta de lujo man, espero el siguiente challenge lo coloques con un par de días par aver si tengo el nivel de lograrlo
Exelente solución, quedó muy limpia y en unos cuantos minutos, wow!👏👏
Awesome Bro Love it, curiously waiting for the next part of this
I'm from Viet Nam, thank you for sharing the code and images, wish you good health and success. thank you so much
Que genial. Te ha quedado muy increíble. Ojalá pueda participar en el próximo challenge xd
This is damn coooooooooooooooool, love the concept, ahhhh the final result 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Man you are a legend excellent work
Thanks bro :D
Thanks for this. Luckily there is youtube translator so i can follow.
Hey bro, just for curiosity, yesterday I activated the english subtitles for most of the videos, I know it's not perfect but can you tell me if it's working for you?
@@diegoveloper I randomly viewed the videos on your channel and subtitles are working. Thanks mate.
Brutal excelente trabajo espero poder participar en el próximo Challenge, 💪
Te quedó super! 🙌🏼🙌🏼
Maravilhoso, obrigado por compartilhar
Ya lo apunté a mi tarea por hacer...
Espectacular, como siempre muchas gracias por tu aporte; debería monetizar esto jejeje, se me ocurren ideas 🤔
Jaja, adelante, pero OJO que puse el link del diseño en la descripción, a lo mejor para monetizar necesitas los permisos, revisa eso.
I'm a big fan! thank uuuuuu ♥
Amazing as always 💙💙💙
Wow! me salio, 😭. Maestro Diego.
minuto 13.23, para los que se preguntan como obtiene el value, estaba analizando esa parte asi que lo mire de esta forma
(1) 2.0x + y = 0,2
(2) 1.0x + y = 0.6
(3) 0.0x + y = 1.0 ;
listo ahora obtienes los valores x y Y ,
x= (-1.2)/3 ,
y = 1.0,
con eso el value= result * (-1.2/3) + 1.0 ;
esto es algebra de 2 curso de bachiller.
This was indeed genius!
Muito bonita e fluída as animações
Thank you a milli.
La creta loco que apera estuvo la solución manin, se te fue la guagua ahí montro.
Pd.. Ví muchos idiomas, metí un dominicano ahí pa no quedarme atrá
this is a perfect video,
please I need your help, How to get image zoom animation when scrolling horizontally like in this video, just, scroll to the left and when I scroll the first image that pops out of the screen is enlarged and the next image is replaced.
rinha de flutter
gracias amigo
😮 nice
muy bueno!
wow great video, i followed every step🤩, i have 1 question to u sir or anyone reading this, how will i be able to add the selected coffees to the cart page ? Thanks in advance
saludos diego
Where can I find the animation tutorial used for selecting the Iced or warm?
It is really hard to see subtitles and watch what you are typing. :(
Why not English? :(
BTW Amazing video.
Genio!
Sería bueno si podrías acabar con las últimas integraciones que estaba en la página donde te inspiraste
Se los dejo de tarea :D, la idea es demostrar el potencial de Flutter haciendo las cosas que parecen más complejas sino tendría un catálogo de apps para vender :D
Hermosooooo
Saludos crack 😃
Awesome buddy
Excelente
hi diego its a great video and great teacher,
i have some issue with the ValueListenableBuilder
i got error when i scrolling to the end
RangeError (index): Invalid value: Not in inclusive range 0..2: 3
RangeError (index): Invalid value: Not in inclusive range 0..2: 4
www.buymeacoffee.com/diegoveloper/extras
I leave comments inyourwebsite, but I need your help if it is OK from you
@@TamanoDudu you can buy the code here www.buymeacoffee.com/diegoveloper/e/42599?from_page=extras
I write all the code from the video I just need a help with the issue
Beautiful
Amazing 👍👍👍
Muy bueno!
De donde sacaste la formula matemática del "value" y del valor de traslación en Y ?
Ojala en algún futuro hagas mas challenges o expliques mas sobre esta parte.
Debí haber prestado mas atención en la universidad en matemática y algebra lineal xD.
según los valores que mostré:
2 -> 0.2
1 -> 0.6
0 -> 1.0
quería llegar a esos valores:
2a = b = 0.2 para x = 2
a + b = 0.6 para x = 1
b = 1 para x = 0
Más o menos así jaja, igual son aproximados, para lo del translation en Y fue prueba error.
Gracias Diego!
Seguire jugando con los valores de Matrix4 a ver que sale...
@@diegoveloper para los que se preguntan como obtiene el value, estaba analizando esa parte asi que lo mire de esta forma
(1) 2.0x + y = 0,2
(2) 1.0x + y = 0.6
(3) 0.0x + y = 1.0 ;
listo ahora obtienes los valores x y Y ,
x= (-1.2)/3 ,
y = 1.0,
con eso el value= result * (-1.2/3) + 1.0 ;
esto es algebra de 2 curso de bachiller.
Muito bom!!!!!!!!!
Perdón si mi duda es tonta 😅
Imaginemos que yo haré una app que administre todas las cafeterías de México
Tengo que hacer una pantalla así por cada cafetería ?
No es necesario que se explique todo el proceso, solo me quedo duda de cómo sería
Excelente video hermano.
Es una pregunta válida, pues no, solo haces estas pantallas que consuman contenido dinámico.
Las apps se conectan a servicios externos para descargar información, ahí es donde traen datos que pueden contener datos del cafe, como nombre, precio, stock, imagen, etc.
En ésta demo yo estoy poniendo los datos de los cafes fijos, pero se puede adaptar fácilmente para que sea dinámico :).
@@diegoveloper muchas gracias 👌🏻
Y espero otro video tuyo son buenísimos
We want English tutorials please
Amazing!!! :) :) :)
Do one project smart water bottle in flutter
El mejor xD
Hello, I did what you did by warning myself. I checked again to avoid any problems, but when using Transform, I cannot move into the page. What do you think is the reason?
Not sure, if you want to check the code, feel free to be a member www.buymeacoffee.com/diegoveloper
Buenas tardes que buen programador eres mis respeto
Me gustaría que me dieras un consejo para aprender a programar como tú lo haces yo estoy aprendiendo y siempre se me ha echo un poco complejo
Gracias
practicar mucho, esa es la clave, son horas/amanecidas de programación, es la única forma de aprender
Can someone explain this calculations:
final result = _currentPage - index +1;
final value = - 0.4 * result + 1;
and ..setEntry(3, 2, 0.001)
..translate(0.0,MediaQuery.of(context).size.height / 2.6 * (1-value).abs())
That's for the perspective view, check this video: ua-cam.com/video/Qlb2pSMwKHY/v-deo.html
Source code plz
lo vas a subir en tu repo?
Sí, en patreon, mañana lo subo, lo mejor es que lo sigan del video paso a paso :P , pero igual lo subiré
Hi! I think your video is very informative. Can I use it to create a website with flutter?
Do you mean the code from the video?
@@diegoveloper I made this animation in an app, but I want to use this animation effect in a web page. Can I use it?
Ah ok, no problem but mention my channel :)
@@diegoveloper Okay, I'll mention your channel where I can, thank you.
👏😀
How you run real iphone with you apk ?
magic site
Queda mejor en teléfonos físicos la preview
Need Subtitle English
enable the english subtitles from the youtube player.
Good Day, Your tutorial is by far the most amazing tutorial. Might I ask, I have followed your code properly, but when i swipe at the end of the pageview, there is no image showing just blank image is it because of coffees.length + 1? thank you for your answer in advance :)
Yeah, I think that's a small bug that maybe we can fix it using a work around:
When the page listener detects it's the last page, use an AnimatedSwitcher to change between the pageviewbuilder and an empty widget.
Something that we can show at the end of the page.
@@diegoveloper Already solved it on my end, did a work around using the onPageChange. Thanks again! :)
hi how did u solve this problem can u explain please :
where did you get the source code from?
@@rhandalltimtiman5676 hy good evening i have same problem can u tell me please how u solved it?
como tengo tutorias de ti quiero especializarme en flutter contigo
únete al canal, se miembro, desde el plan DEVELOPER tienes acceso a discord donde estamos compartiendo de todo, desde trabajos, hasta consejos, memes, tutoriales, dudas/consultas, sorteos, etc.
@@diegoveloper me gustaria tambien adquirir un codigo que hiciste que me gusto mucho siendo miembro lo puedo conseguir?
@@cristiancenteno251 hmm no, los códigos o puedes escribirlos siguiendo los videos o puedes comprarlos aquí : www.buymeacoffee.com/diegoveloper/extras , el discord está más para ayudar con dudas/consultas/trabajos.
Comparte el código de los seguidores
Can you please add English subtitles
Read video description
Plz post smart water bottle app in flutter bcz no one did before
What's that?
can you make tutorial in english
Hello, you can enable the English subtitles
Hi can anyone tell me the name of the animation with widget? I wanted to achieve it for android native.
I created a custom animation
do you have git link? source code of the project? that would be awesome
if you check the video description you will find the second option to access to the source code. The first option is copy the code while you watch the video :).
which version of flutter are you using?
one version before Flutter 2.0
@@diegoveloper awesome i don't like 2.0 lol, cheers from Indonesia
Que BARBAro !!! Buen video, vi sólo la parte importante, este capitalismo que no nos da tiempo para la diversión :v, una duda si se puede, leyendo documentación me parecio leer que Opacity no es bueno para el rendimiento asi que siempre creo mis propias opacidades con gradients, hay una opción óptima o lei mal y Opacity es lo mejor, "tricky" eso dicen siempre mis compañeros 🇨🇴, saludos desde 🇵🇪
Para animaciones no es lo mas óptimo, pero en este caso solo depende del scroll, no hay tanto problema.
Gracias
can give source code plz
Sure, read video description
Me gustaría que programaras todo desde cero
Si quieres asesoría : buymeacoffee.com/diegoveloper
Conocen alguna app funcionando con este desarrollo?
No he visto alguna
👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼😍 👏🏼👏🏼👏🏼👏🏼👏🏼
13.18
¿Por qué parpadea tanto el video? :(
si lo he notado, es por el OBS, el software que uso para grabar :/ ni modo
De donde sacaste los imagenes? Soy dev React native y estoy pensando en moverme a Flutter, las animaciones se ven mas faciles de hacer con Flutter que curioso, pense que se ve mas complicado
En la descripción del video está el link de las imágenes
@@diegoveloper Vi el link y eso pero me pregunto el donde, no se si dribble tiene una seccion secreta que no veo donde los designers ponen los assets que usan porque al menos en shot de dribble no vi un link ni coas asi
el link debajo de Assets (Images)
😯😮
Tan gozu? 👌
ENGLISH please
👏😀