Loading Button with Indicator in Flutter using GetX || Flutter || GetX

hi my name is amar in this video i will discuss how to create a loading button with indicator in flutter using gatex as you can see in the output this is a button now whenever i will click on this button at that time certain task is performed and when the task is performed at that time the button is disabled and a circular progress indicator is displayed how to achieve this in flutter using gatex that portion i will discuss today i have created this project by using the gate cli tool and inside the home controller i will write the code i will declare a variable where is loading equals to false and i will make it reactive with the help of dot obs now here i will create a function void upload file i will declare this method as async and whenever this method will be called at that time the value of is loading will be true now here i will use await future dot sorry future dot delayed and duration i will specify the time as seconds three and after that i will write is loading dot value equals to false means whenever this function will be called at that time the value will be true after that instead of this line you can perform any task like uploading a file to the server and when the task is completed at that time the value of is loading will be false once again right now let me move to the home view file in the home view file you can see in the body i have taken a center widget now in the child i will use elevated button dot icon okay now let me put some enter here first of all i will use this label in the label i will use text widget now in text i will check controller dot is loading dot value if it is true then the text will be displayed as processing otherwise the text will be displayed as upload okay now in the icon here again i will check controller dot is loading dot a value if it is true then what will be displayed as i can circular progress indicator will be displayed and if it is false then here i will write icon icons dot upload so if the value is false then the upload icon will be displayed as you can see in the output initially the icon is upload icon and whenever i will click here at that time the circular progress indicator is displayed which i have written here right now in on phrased here i will write controller dot is loading dot value if it is true then the button will be disabled and to make it disabled here i will use null otherwise what will happen i will be able to call the upload file function which we have which we have declared in the home controller and to do that here i will write controller dot upload file okay so whenever i will click on this button at that time the upload file function will be called and whenever the upload find function will be called at that time the value of is loading will be true and once the value of is loading is true then the button will be disabled and whenever the background task is completed or it is performed at that time the value of is loading will be again false and once it is false then the button will be enabled once again now i will wrap this elevated button inside obx and to do that here i will write obx this okay this is how we can create a loading button with indicator in flutter using get x i hope you have liked my video if you have liked my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 6,909

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, loading button flutter, loading button flutter getx, enable disable elevated button on click flutter, progress button flutter getx

Id: EPY_kA8Wekg

Length: 4min 32sec (272 seconds)

Published: Sun Feb 27 2022