#18 || Image Picker in Flutter with Cubit || Flutter Bloc & Cubit Tutorial

welcome back everyone in this video I will discuss how to use image pier in flutter with cuit let me show you the output first here we have this UI whenever I will click on this button then I will get the option to select the image from the gallery and once I select the image then the selected image will be displayed here if I want to select another image then I need to click here again then again we will get the same previous interface now click on this peak image we will have the option to select the image from the gallery but suppose I'm not selecting the image then I will get this message no image selected and if I click on try again then again I will get the interface to select the image how to achieve this that portion I will discuss today here I have created this project image speaker Cubit and in the pub speak. EML I have taken the latest dependency of flutter block and image Pier if you are using Android then no configuration is required for image speaker but if you are using iOS then some configuration is needed which you can find from this particular s from this particular area okay now inside the Lea folder I will right click here and click on block new Cubit I will give the block name as image and it has created the Cubit folder and the two files image Cubit and IM image State let me move to image State let me remove this and here I will change this name as image initial State here I will create one more state that is image loaded State and I will declare a variable final string image path this variable will actually contain the path of the selected image and to the Constructor of this I will pass this do image path and if there is any error while selecting the image for that we will create image error State and whatever error is generating to store that we will declare a variable error message and to the Constructor of this particular class I will pass this error message so our state has been created now let me move to image Cubit and initially it will generate image initial State now here I will declare a variable final image speaker let me move to pub. ml let me save this it will download the required dependencies let me move move here image peer and let me give the object name as image peer equals to this now here I will create a function pick image and let me specify its return type as future of void and it will be async now here I will use a TR catch if any exception occurs while selecting the image then we will emit the state image error State and here I will pass the error message as e do to string and inside this try I will declare a variable final pigged image equals to A with image Pier do pick image and here I need to specify the image source I'm giving the image source as image source. gallery now here I need to check if pigged image is not equals to null this means the user has selected the image then what will happen and if the user has not selected the image then what will happen so if the user has not selected the image then again I will emit the state that is image error State and I will pass the message as no image selected and if the user has selected the image then again I will emit the state but this time it will be image loaded State and to this loaded State here I need to pass the path of the selected image and to get the path here I will use Pig image do path so our Cubit has been created now let me move to main do dot in main do dot I will wrap this with block provider and in this block provider I need to specify the type of the Cubit that is image Cubit and I need to use image Cubit here now this const will be removed from here and I need to use the const here fine now in the scaffold in the body instead of container here I will use block Builder and in this block Builder here I need to specify the type of the Cubit that is image Cubit and I need to specify the state as well which is image State now in the Builder it will give us the context and the state here first of all I will check if state is image initial State then I need to provide the interface to user to select the image this means the UI will contain a button at the center so here I will return center and as a child I will use elevated button and to this elevated Button as a child I will use text and I will give the text as pick image and here in onpressed means whenever the button will be clicked at that time I need to call that Peck image function which we have created in the Cubit and to call that I can use context. R then the type of the Cubit which we have created that is image Cubit and here I can call the Peak image method and let me add a const here so if the image state is image initial State then this portion will execute but suppose the user has selected the image then in the Els if I need to check if state is image loaded State then here I need to create the interface to display the selected image as well as I need to create a button to select another image okay so here again I will use Center and as a child of the center widget here I need to use the column widget and to this column widget in the children here first of all I will use image. file this will uh display the selected image by the user and here I need to use file and to this file I will pass the path of the selected image that we can get from state do image path and here I need to specify what will be the height of the selected image let me specify the height as 200 and then I can use a sized box here here I will specify the height as 16 and here I will use elevated button and in the elevated button I will use in text as pick another image and in the onpressed here whenever this button will be clicked then again I need to provide the same interface to select the image so to provide the same interface to select the image in the Cubit here I can create one more function void reset and whenever this reset function will be called then I will emit the image initially state now move to main. Dot and inside this I will simply copy this paste it here and instead of Peck image I will call the function as reset so if the image is loaded image State then this portion will execute now similarly if there is any error while selecting the image then again I need to check if state is image error State then I will simply copy this paste it and instead of displaying the image here what I will do I will use a text widget and to this text I will pass the error which has generated that is state. error message and instead of pick another image here I will give the message as try again and at the last here I need to return container that's it and let me click here add const modifier everywhere in the file here I need to use return then return now let me run the project and let me show you the output now if I click on pick image and if I select the image then the selected image is displayed here if I click here once again then we are getting the previous interface if I click here once again but don't select the image then we are getting the message as no image selected try again if I click here once again then we will get the same interface from where here I can pick the image and can display the selected image here that's how we can use image speaker in flutter with Cubit that's it for today's video thank you so much for watching

Channel: Ripples Code

Views: 411

Keywords: Flutter Bloc Tutorial, Flutter Cubit Tutorial, Flutter Bloc Pattern, Cubit Pattern Flutter, Bloc Flutter Tutorial for Beginners, Cubit Flutter Tutorial Step by Step, bloc Flutter Tutorial Step by Step, Flutter Bloc Pattern Architecture, Flutter Cubit Pattern Architecture, Flutter Bloc Library Explained, Flutter Bloc Implementation, flutter bloc complete tutorial, flutter bloc and cubit tutorial series, flutter image picker, flutter bloc image picker, cubit image picker example

Id: 1a7jn5o_GAQ

Length: 12min 16sec (736 seconds)

Published: Mon Jan 29 2024