ImagePicker Integration in Flutter | Image Mgmt Series Part2

hey guys welcome back to our channel in our last video we've integrated image Pier into our app allowing us to pick images either from gallery or using the device camera here's now the code we left off from our last video and as you can see this lacks the error handling mechanism efficient State Management for loading processes and integrates the image speaker class directly into the UI this makes it challenging to test and maintain and it's not scalable when you need to add more functionalities so in today's video we're going to level up our image picking system to the next level we'll refactor this code to recouple it to our UI making it modular testable and maintainable and as usual let's outline the blueprint of our Target architecture this way we can have a full understanding of what the components that we need and how each component interacts with each other so this is our chat room screen that contains the buttons for fetching images and the first thing we need to do is to create our own implementation of the image Pier class so we'll create an up image Pier class here this class is our custom wrapper around the external image speaker class by encapsulating this we gain flexibility especially when writing a unit test then we will create an app image picker service here think of this as the brain behind our image picking operation it communicates with our custom app image picker class to fetch images once fetched it interacts with our controllers to manage and reflect these images in our UI now for for the controllers will have this image editing controller class this class functions similar to the text editing controller which acts as a storage box for the picked images it keep tracks of all the picked images and ensures they are ready for display or further processing and this image picker controller class is a class responsible for managing the asynchronous state of the UI and it updates the UI based on the current state of the operation and I initially considered integrating the permission Handler however to keep things beginer friendly and avoid over complicating this video I've chosen to omit it but if you're keen on adding it independently consider creating a permission Handler service class and integrate it within the app image picker service class and if you find the service becoming too bloated introduce another class here and inject the permission Handler service there all right now that we have a full understanding of how we structure our image picking system let's go ahead and get our hands dirty let's start with this app image picker class as a short reminder here at Juber Tech we use River PAD as our state management solution but if you have a prefer State Management solution of your own then the architectural insights for this tutorial will still be f able okay what we're going to do is to make our image picking system as one of the primary features of our app so inside our features directory let's create an image speaker folder let's also create the application data and presentation folders inside okay let's start now creating this app image big our glass okay we only created two methods here for fcking images because these are the only methods we need but feel free to add more functions that you need here like this pick media pick multiple media pick video and so on so here in the P image what we only did is to convert the result to file because this is of type x file same is through with this big multi-image we fch multiple images check if it's not empty and look to each item to convert to a file and then add to this list of file files and then return the result and then we created the provider of the class here all right let's go ahead and create the app image Pier service class okay we are fishing the image here but as you can see we're not doing anything about the fish images we don't want to propagate this to our image Pier controller class because that is for managing the synchronous state so as explained earlier let's create the image editing controller class since we already have have a generic custom list controller class that extends this state Notifier of typ list T and it contains all the basic operations that we need like this add item add all replace remove item and Etc let's simply extend this class and give it a default value of empty list all right that's it for this class let's go back to our app image picker service class and store the pig images to this class all right that's it take note that we added this allow multiple parameter and check if the allow multiple is true then we add the item to the controller if false then we replace the previous value with a newly fetch value and here in the peak gallery image if allow multiple is true we fetch images using this P multi-images method and add the result to our image editing controller if false the then we use this peak image method passing in the image source. gallery as a source and then replace the old value with the new image just like that now that our app image figer service is done let's move on to our image figer controller class all right for those who aren't familiar with this you can check my video about using State Management in platter here let's go ahead and set up our UI to use this controller all right as you can see we instantiate the image editing controller here like how we do with the text editing controller let's try to display the image contained in this image editing controller shortly but for the moment let's just print its length inside our build method I think everything is now in place let's go ahead and restart our app to see if everything is working as intended okay it's working as intended as you can see the value is being printed in a console as expected but problem is the loading indicator that we have added isn't positioned correctly so let's address that let's change this full SX widget with the loading indicator when our controller is in a loading State and let's temporarily display the content of this image editing controller here just above the text field but the problem is this controller is defined here inside this image picker button which is a child of this chat text field class class how can we access the value of this controller in its parent Widget the most knive solution is to lift the state up we need to Define this in the parent widget and pass it to this child but that can be a tedious work especially if the child is deeply nested within the widget tree so I suggest wrapping this in a state Notifier provider this way the value becomes accessible anywhere in our app okay let's try to use this provider in display its content so this is now the chat text fielded widget this comprises a row with a text form field and a send button for demonstration purposes let's wrap this in a column and place a row on top all right let's test this out okay everything is working as intended you can now customize this further on your own so the user can still have a chance to remove items or rearrange the order of the images before sending or uploading that's it guys thank you so much for tuning in if you found this video helpful please give it a big thumbs up share it with your fellow flatter Enthusiast and don't forget to hit the Subscribe button see you on the next one

Channel: JOBERTECH

Views: 338

Keywords: flutter, flutter tutorials, flutter tips, flutter development, flutter ui design, flutter ui, flutter widgets, mobile app development, code guide, flutter tips & tricks, joberTech, JoberTech, JOBERTECH Flutter, Flutter Tutorials, Mobile App Development, Coding Guide, Flutter UI Design, Flutter UI, Flutter Widgets, Flutter Tips & Tricks, image picker, Image Picker, code refactoring Code Refactoring

Id: n8hXD9C28cg

Length: 17min 0sec (1020 seconds)

Published: Mon Sep 11 2023