Receive Sharing Files To Flutter App From Another App
Receive sharing photos, videos, text, URLs, or any other file types from another app.
Integrating new functionality in the customised app, Flutter remains a preferred choice of app developers across the globe. We can come up with innovative functionality to make people’s lives more comfortable and easy.
Recently, while diving into one of my project tasks that stands for Receive sharing files to flutter app from app like gallery, file manager, etc. After doing some research, I made my mind to publish an article on this feature.
Let’s note down the steps for the task:
- Native side configuration for Android & iOS platform.
- Dart side implementation.
- Compiling issues & their fixes
Native Side Configuration Android & iOS Platform :
Android Configuration :
First of all, we need to add some intent filters in AndroidManifest.xml file to add access to receive files from other apps like below.
android:name=”android.intent.action.SEND”: To get single file
android:name=”android.intent.action.SEND_MULTIPLE”: To get multiple files
android:mimeType=”<Type>/*”. Type : [text,image,video,/(Any)]
android:launchMode=”singleTask”: Launch as a task independent of chrome.
iOS Configuration :
First of all, you need to add permission for photo library usage and other kinds of stuff in info.plist file as mentioned below.
NSPhotoLibraryUsageDescription: Permission to access photo library in iOS
Now we are done with the basic configuration part for iOS, so let’s add a share extension in our app to implement features step by step.
- Go to File -> New ->Target.
2. Search Share -> Share Extension->Next.
3. Set Product Name as Share Extension -> Team selection: Right now we are implementing for demo so don’t need to select any team but for live project purposes you need to select your development team from dropdown ->Finish.
4. Deployment target for Runner. app and the Share Extension are the same. Eg. iOS 9.0 or above.
5. Go to Share Extension -> Info.plist -> Open as -> Source Code.
6. Add the below keys to add access to receive files from other apps like below.
PHSupportedMediaTypes: video & image
NSExtensionActivationSupportsText: Text
NSExtensionActivationSupportsWebURLWithMaxCount: No of Urls to share
NSExtensionActivationSupportsImageWithMaxCount: No of Images to share
NSExtensionActivationSupportsMovieWithMaxCount: No of Movies to share
NSExtensionActivationSupportsFileWithMaxCount: No of Files to share
7. Add the below code in ShareViewController.swift file to enable this feature in native iOS.
hostAppBundleIdentifier: Your package name
8. Add Runner and Share Extension in the same group.
9. Go to Capabilities tab -> App Groups -> Add a new group for both targets and name it group.<host-bundle-indentifier> like group.com.jp.receivesharing.
10. Final Overview of both targets with their App Groups.
App groups are showing in red color but it will not affect our demo as this is an only demo and it has not any team but during a live project you have a team to select so at that time you won’t face an issue like this.
Compiling issues and their fixes :
- Check Build Settings of your share extension & remove everything under
Linking/Other Linker Flags
2. You might need to disable bitcode for the extension target.
3. Invalid Bundle. The bundle at ‘Runner. app/Plugins/<Extension-name>.appex contains disallowed file ‘Frameworks’
For the app, I had to set:
Always Embed Swift Standard Libraries: YES
and for the share extension:
Always Embed Swift Standard Libraries: NO
Dart Side Implementation :
Let’s first integrate the receive_sharing_intent plugin in pubspec.yaml file.
We have three screens in this demo.
- Home Screen: To fetch receiving files from other apps
- User Listing Screen: To select users from the list to share files
- Sharing Media Preview Screen: Sharing files preview and caption before sharing
Let’s start implementation to receive sharing files.
Create one dart file & home_screen.dart and add the below code into it.
getMediaStream : Receiving shared media while app is in background state
getInitialMedia : Receiving shared media while app is in terminated state
getTextStream : Receiving shared text while app is in background state
getInitialText : Receiving shared text while app is in terminated state
Call listenShareMediaFiles method in initState method.
Create one dart file & user_listing_screen.dart & add the below code into it which render Ui like the below image :
_userListingView : Listing Ui with user details which has selection feature
_selectedUserListingView: Selected User Listing UI
Create one dart file & sharing_media_preview_screen.dart and add the below code into it which render Ui like the below image :
First of all, we are going to implement Ui/UX for the full media preview.
Page Controller to give effect of scrolling horizontally with best ux.
_fullMediaPreview : Upper full media preview
Now Let’s add a caption and bottom horizontal media preview widgets.
_fileName : Shared file name
_addCaptionPreview : Add captions individually for shared files
_horizontalMediaFilesView : Small horizontal scrolling Ui/Ux for media files
Hurray!… we are done with our integration and let’s see how it’s implemented through videos.
Let’s see the summary through videos of both platforms.
iOS
Android
Conclusion
We have done implementation to develop feature of sharing media preview like Whatsapp or any messaging apps. If you want to do a production release then you have to add Team in Signing & Capabilities.
So, that’s it for Receive Sharing Files To Flutter App From Another App.
You can find the whole project on Git Repository :
Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm
