Flutter Animation | Login Page UI and Animation - Day 12
Flutter Animation | Login Page UI and Animation - day 12 #flutter #login #animation
Thanks for watching!
Make sure to like + Subscribe For More!
source code: github.com/afgprogrammer/Flut...
SVGs from Undraw: undraw.co/
Subscribe for New Videos:
Website: afgprogrammer.com
Twitter: / afgprogrammer
Github: github.com/afgprogrammer
------------------------------
Endless Summer by extenz / extenz
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2REdANn
Music promoted by Audio Library • Endless Summer - exten...
------------------------------
🎵 Track Info:
Title: Endless Summer by extenz
Genre and Mood: Dance & Electronic · Bright
Пікірлер: 184
Watch my last video: Flutter Simple Travel Application Design - Flutter UI Design day 11 kzread.info/dash/bejne/ka2Fz5l_o9uraZs.html
@jokesuniverse8469
4 жыл бұрын
Hey, Love your videos. How do I copy your source code it would really help me
@mikekong1874
4 жыл бұрын
dude, i fail setup the simulator ,can you help me?
@Afgprogrammer
4 жыл бұрын
@@jokesuniverse8469 Thank you, you can find the source code in the description.
@Afgprogrammer
4 жыл бұрын
@@mikekong1874 What is your problem?
@mikekong1874
4 жыл бұрын
@@Afgprogrammer I'm a newbie of the flutter. Any guide how to set up the android simulator? When running gradle task 'assemble Debug' it will show parameter format not correct.
Clean & Beautiful UI
I just finished this trip, and finally i learn how to deploy this trip to my iPhone too. And it success.. thanks man, i’ll follow your trip on next Sunday 👨🏽💻
@Afgprogrammer
2 жыл бұрын
Glad you liked it!
Excellent video. Congratulations.
amazing work, well done my friend
Very elegant, good work!
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
It's so beautiful , thank u big liiiiiiiiike
Love it Thank you
really convenient animation turns out)), very easy to use
Awesome amazing beautiful login, I like it
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
Thank You. I like all video Flutter from bro.
@Afgprogrammer
4 жыл бұрын
Your Welcome 🙏
Good good very beautiful
Amazing login screen.
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
Super cool! Keep it up mate :)
Quality stuff fam
Thank you :) great ui :)
@Afgprogrammer
4 жыл бұрын
Thank you :)
Awesome design... Thanks dude
@Afgprogrammer
4 жыл бұрын
Your Welcome 🙏
Great
Thanks for the explanation 👍 really understood this video
@Afgprogrammer
4 жыл бұрын
Glad it helped
amazing... 🤩
Excellent tutorial!
@Afgprogrammer
4 жыл бұрын
Glad you liked it!
Great work,.. makes it look so easy.
@Afgprogrammer
4 жыл бұрын
It is!
Great animation
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
amazing sir, thank you for the inspiration
@Afgprogrammer
4 жыл бұрын
it's my pleasure.
@VJKoding
4 жыл бұрын
Afgprogrammer ❤️
thank you for providing such an awesome content! like and subscribe for sure
@Afgprogrammer
4 жыл бұрын
Your welcome 🙏
tq very much
thank you
@Afgprogrammer
4 жыл бұрын
You're welcome
thanks
awesome Designing Thanks you so much sir
@Afgprogrammer
4 жыл бұрын
Thanks for watching :)
very useful thanks
@Afgprogrammer
4 жыл бұрын
Glad it was helpful!
Very nicely...🌹
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
sweet
Awesome.
@Afgprogrammer
4 жыл бұрын
Thank you 🙏
@mohammedsadiq5729
4 жыл бұрын
@@Afgprogrammer why did you stop uploading?
@Afgprogrammer
4 жыл бұрын
@@mohammedsadiq5729 I will start again after February.
@mohammedsadiq5729
4 жыл бұрын
@@Afgprogrammer ohk cool😍😍
Cool login page bro....😍😍
@Afgprogrammer
4 жыл бұрын
Thank you 😊
@mustafashaikh7829
4 жыл бұрын
@@Afgprogrammer bro make animation of liquid example like send text msg it animation like water fluid...
@Afgprogrammer
4 жыл бұрын
@@mustafashaikh7829 Ok I will try it, If you have some sample please send them to me.
@mustafashaikh7829
4 жыл бұрын
@@Afgprogrammer yep sure i was searching that only till now 😜
Good content. Just some suggestion, can you show more case of simple animation? Thanks.
@Afgprogrammer
4 жыл бұрын
Thank you, just take look at this playlist: kzread.info/dash/bejne/fXmJrbSNabvZnNY.html
Can you leave a link on which website I can find the different patterns for the background?
Amazing tutorial! By the way, what did you search in unDraw to get such beautiful background?
@Afgprogrammer
4 жыл бұрын
Thank you :). But, I made the background.
@ujjaldas9179
4 жыл бұрын
You means you create the nice png file. Can you make tutorial how to create that kind of image. Thank you
@Afgprogrammer
4 жыл бұрын
@@ujjaldas9179 Ok, I will make a video about that.
@hiteshkowdiki4118
3 жыл бұрын
Hey, when would you do the tutorial for the background image
@GoToMan
3 жыл бұрын
@@Afgprogrammer Your skills are amazing. Can you make a video about CustomPainter and coordinate system of flutter. I'm just starting out in flutter but if I don't understand the documentation, finding information elsewhere is very painful. Can you suggest me any resources? Help would be very much appreciated, thanks in advance!
Would this layout work with a listview for pushing up the screen when keyboard appears? Nicely done.
@maksatbekzhakyp8666
2 жыл бұрын
Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Container( child: ***SingleChildScrollView( reverse: true,*** child: Column( children: [ Container( height: 400, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/background.png'), fit: BoxFit.fill, ), ),
from where you have got this images
Where can I get more such backgrounds?
What do you call these designer container when you search on undraw??
Dart Oop concepts required to start with flutter or directly start with flutter?
@Afgprogrammer
4 жыл бұрын
No, you do not need to know anything about dart. just start from flutter document flutter.dev/docs.
Thank you so much for this stunning explaination. I have a question, the animation file you created doesn't work for me, they said there is a code error on the Opacity! can you help?
@Afgprogrammer
2 жыл бұрын
use `flutter run --no-sound-null-safety`
@juanalexisvidalgonzales302
2 жыл бұрын
@@Afgprogrammer not working, same problem
How to make the screen fit with all devices?
How do you add the phone preview
how to place onlick event on login button?
Where do i add onpressed button for login
Where can I get these kinds of background? Is there a name for it?
Hi 👋 I have a doubt ! let's say I have changed this forget password button to Create a new account then If user clicks on it, I am changing all occurrences of LOGIN to SIGNUP. I need to animate this also ! like Login text fades out and Sign up text fades in or kind of this. How can I trigger that starting animation again on this changes ? Thanks in advance !
sir how we get that image(background image) like green,red etc plz reply
The operator '[]' isn't defined for the type 'Object'. Try defining the operator '[]'. offset: Offset(0, animation!["translateY"]), kindly guide FadeAnimation
Please link to the background image
it's good one help how you get that light image
I can't use FadeAnimation! can you help me ?
@muhammedtayyabkhan9917
4 ай бұрын
same u got solution ?
I think you should use Paint with gradients instead of this image .
@Afgprogrammer
4 жыл бұрын
I think so, Thank you for your comment.
is there any one help me on solving this error in animation folder ? : error: The operator '[]' isn't defined for the type 'Object'. it doesnt go away with ! operator the error is on this line : opacity: animation["opacity"] , and this line : offset: Offset(0, animation["translateY"]), child: child), please help .
@sammythige9028
2 жыл бұрын
Did you figure out how to fix this error??
I can’t see you code
I figured out below 'quick code string' for "Flutter Tree Extension for VSCode": SingleChildScrollView>Container>Column[Container>Stack[Positioned>Container,Positioned>Container,Positioned>Container,Positioned>Container>Center>Text],Padding>Column[Container>Column[Container>TextField,Container>TextField],SizedBox,Container>Center>Text,SizedBox,Text]] Note: FadeAnimation is missing in above string, because there is no named argument (child) for this. Maybe you will add this functionality in Near Future. Code Structure: SingleChildScrollView>Container>Column[ Container>Stack[ Positioned>FadeAnimation>Container, Positioned>FadeAnimation>Container, Positioned>FadeAnimation>Container, Positioned>FadeAnimation>Container>Center>Text ], Padding>Column[ FadeAnimation>Container>Column[ Container>TextField, Container>TextField ], SizedBox, FadeAnimation>Container>Center>Text, SizedBox, FadeAnimation>Text ] ] Flutter Beautiful Login Page UI Design and Animation (day 12) by Afgprogrammer kzread.info/dash/bejne/gHx1q8t6ndu6cbg.html
@omkarsutar5069
4 жыл бұрын
I likes your efforts on these designs!!
@Afgprogrammer
4 жыл бұрын
Thank you :)
Damn how did you get the fade animation so fast??? I didn't get it
flutter app showing white screen for few sec on start and how to solve this issue ? plz help
@Afgprogrammer
4 жыл бұрын
It's a splash screen and you can customize it. Search about it on google.
I'm not a vscode user, that I found really useful the plugin/configuration that you have for adding a comment after closing a block/function. What is its name or how did you achieve that? Thanks in advance.
@Afgprogrammer
4 жыл бұрын
I am just using the flutter and dart plugins on vscode.
@geremy2030
4 жыл бұрын
@@Afgprogrammer Oh... OK. I think it's part of flutter extension. Many thanks!
@geremy2030
4 жыл бұрын
@@Afgprogrammer Thanks for the quick reply
@Afgprogrammer
4 жыл бұрын
@@geremy2030 Welcome :)
from where i could find the animation file that he used in this video ?
@djohn0909
3 жыл бұрын
Make your own
Where can I find such amazing background images
@djkidii
3 жыл бұрын
in google xD
Hi friend. if you use image as shown above, does it responsive to all device?
@Afgprogrammer
4 жыл бұрын
It should be responsive but I did not test on any other device screen.
having a problem with ANIMATION FOLDER,,,. Can you help? I think something missing here, can't see any directory on your project....""""import 'package:simple_animations/simple_animations.dart';"""""""
@farhankaleem451
4 ай бұрын
i also faced same problem
It's beautiful login. what is name of this music
@Afgprogrammer
4 жыл бұрын
I provided in the description.
Amazing tutorial !Can i use the background for my Project?
@Afgprogrammer
4 жыл бұрын
Yes, of course
@ayowhat6139
4 жыл бұрын
No
plz provide link to download the all images in png which is used in your projects , sir.....
@Afgprogrammer
4 жыл бұрын
All images provided in the assets folder of the project.
i replaced first Column with ListView for input TextField
@GoToMan
3 жыл бұрын
Hello brother, I'm learning Flutter and I'm having some trouble grasping listview.builder and some builder functions like that which contain iterator and functions. I also want to learn more about the coordinate system of flutter and CustomPainter and canvas. Can you help me or suggest me any resources to learn from? Help would be very much appreciated.
@NasirKhan-jy3gp
3 жыл бұрын
@@GoToMan udemy is good source of learning they many free and paid courses
@GoToMan
3 жыл бұрын
@@NasirKhan-jy3gp Thanks! I have Ms. Angela's course.
I appreciate the video. Can you please tell me how can I get the blue bacground image?
@Afgprogrammer
4 жыл бұрын
undraw.co/
@matyshere
4 жыл бұрын
Thanks
Great tutorial, but shouldn’t you have used Stateful widget instead of stateless??!
@cheenri
3 жыл бұрын
In this case it just UI, so Stateless is work, because do not change the state. You know?
@japalekhin
3 жыл бұрын
it's easy to convert when there's a need to change the state
please use the bigger font
Are you open for taking up new projects ?
it is beautiful login i have a question? how to found background like this in video?
@Afgprogrammer
4 жыл бұрын
Sorry I did not understand 🤔
@ilyaklyashtornyy4269
4 жыл бұрын
I think the question is: Where did you find the background image and other assets used in your login page?
@Afgprogrammer
4 жыл бұрын
@@ilyaklyashtornyy4269 I make the background in Adobe xd, and other assets from a free resource like undraw.co/
@minigeek
4 жыл бұрын
@@Afgprogrammer Is there any tutorial to create such background images in xd, I have it but don't know how to use it . very hard
how will i solve the animation problem from where will i get that code ? Please help.
@Afgprogrammer
4 жыл бұрын
Here the Github repo: github.com/afgprogrammer/Flutter-Login-Page-UI
@shekharsuman9593
4 жыл бұрын
@@Afgprogrammer Thanku very much your designs are really amazing " _"
@Afgprogrammer
4 жыл бұрын
@@shekharsuman9593 Thank you bro, I appreciated.
If the screen resizes,will the app show overflow error
@Afgprogrammer
4 жыл бұрын
I don't think so.
hii.. im error this code animation["opacity"] flutter 2.10
There is a website to download background images?
@technolust3015
3 жыл бұрын
You can checkout undraw or drawkit for illustrations.
Please i dont know how i get the same code you used in the video
@Afgprogrammer
2 жыл бұрын
Source code: github.com/afgprogrammer/Flutter-Login-Page-UI
it's super nice bro i like am trying to do the same as you did , unfortunately i cant import simple animation it says that target url is not excite help plzzzz thanx
@Afgprogrammer
4 жыл бұрын
Search about it on google and find its new version
how to download source code?
what theme u use ?
@Afgprogrammer
2 жыл бұрын
Field Light Theme
What's IDE you use?
@Afgprogrammer
4 жыл бұрын
Visual studio code -> vscode
error in animation["opacity"]
@ibadasif4093
3 жыл бұрын
same quarry
@cesarvargas8482
2 жыл бұрын
Hi, how did you solved it ?
Code give errors pls repush it :(
How to setup virtual device with vs code
@Afgprogrammer
3 жыл бұрын
Install Dart and Flutter plugins in vs code.
@bhupeshpattanaik7150
3 жыл бұрын
@@Afgprogrammer did that , but it showed no device connected when I try to run it
@Afgprogrammer
3 жыл бұрын
@@bhupeshpattanaik7150 It should work. Check the plugins configuration.
too many ads :(
What's your age?
You know... It's not a tutorial if you don't really teach anything...
@ranawaleed2548
Жыл бұрын
U know it's not a lesson if you don't practice anything
@iamtafara
Жыл бұрын
Well said