Flutter Tutorial - Create Button With Loading Spinner | Animated Progress Button

click on a button to show a simple loading spinner we will also create an animated progress button with three states initial loading and completed if you are new here subscribe to my channel and make sure to watch this video till the end let's start with a simple elevated button which we have here on the right side and if we click on this button then we want to show here a loading spinner and therefore we simply go to our state and here we create this boolean flag is loading and in case this flag is set to true then we simply want to display here a loading spinner inside of our button and with this we display here this loading spinner which is basically the circular progress indicator widget next we want to click on this button and then we want to set this is loading flag to true and with this i can click on this button and then we display here this loading indicator and lastly if you like you can also display here next to the loading indicator also a text and this is then here displayed at the right side while we display now here this loading indicator you can send for example a request to the server and therefore you can simply put here after your request to the server inside in my case i want to simulate it and therefore i wait here for some seconds and with this if i click on this button the loading indicator displays here for two seconds and then we go here to our initial state back let's also create a second animated progress button therefore we start with this outline button here on the right side and this button we want to wrap then inside of a container and we give it some width and some height and therefore i take here simply the whole screen with and with this we have here the first state of our button and we also want to create two more states one is for loading and the other one is the completed state therefore we want to create here a new boolean field is stretched and then depending on this field we want to display then another button so in this case we display a smaller button let's also create this method build small button and here inside we create then basically a circular progress indicator with some color around so we make it rounded and we also set here then a background color and with this we have here the small button with this background color and the circular progress indicator that we have basically defined here and secondly we want to create a boolean field is done and we simply want to put it inside of our small button and now depending on this is done field we want to display then here this done icon instead and secondly for the done icon we want to create a green background color and with this we display here this green done icon if we have set this flag to true alright and next we want to create then a button state with these three states initial loading and done and we also want to initialize the state then inside of our state to the initialized state and now depending on this button state we want to change then our two boolean fields is stretched and is done so we simply access here every time our state and check if the correct state is matched so for example if it is here the init state then we want to display our button as stretched and therefore we display here the long button instead and lastly we only need to change then between our button states that we have defined here in our enum and therefore i simply go here to my button and if i click on it then we change here basically between these three states loading done and initial let's also try it out i click on the submit button then we go here to our loading state and after three seconds we go to the done state which you see here on the right side and then we go again back to the initial state right now the button is not animating so we want to have here a smooth change between the sizes of our button instead of changing it abruptly to animate this button we want to simply wrap it inside of an animated container and with this we can change here the width of our button so if it is the initial state then we want to have the maximum width otherwise we have here the loading and done state then we want to display here a small button and lastly we also toggle here this is animating field this is a boolean field that we want to create in our state and now we also put this year inside of our stretch button so every time if our button is stretched then we want to animate our button and with this if i click on this button we have here this animation to the small button and if we have the small button it is also animating back to the large button so all in all this animated container changes then the width of our button to the maximum width or a width of 70 pixels every time if we change here the state of our button and finally if we slow down this animation then you see that this text of our button is simply wrapping to the next line if it is animating and this is not pretty cool to fix this you can simply go here to your button and around your text you want to represent a fitted box widget let's also try it out if i click on this button then the text is basically changing its size depending on the size of this button and with this it will not wrap to the next line anymore and lastly we change the animation speed again from 2 seconds to 300 milliseconds so that we have here a fast animation for our button and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music]

Channel: HeyFlutter․com

Views: 39,404

Keywords: android, animated loader, animation, button, flutter, flutter animation, flutter button, flutter button animation, flutter loader, flutter loading, flutter loading animation, flutter loading spinner, flutter login animation, flutter progress animation, flutter progress bar, flutter progress button, flutter tutorial, flutter ui, ios, loader flutter, loading, loading spinner, loading widget, progress bar, spinner

Id: dOEKnNTRdq0

Length: 6min 0sec (360 seconds)

Published: Thu Sep 16 2021