Receive Sharing Files To Flutter App From Another App

Receive sharing photos, videos, text, URLs, or any other file types from another app.

Jaimil Patel
Flutter Community
6 min readDec 19, 2021

--

Photo by Brett Jordan on Unsplash

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:

  1. Native side configuration for Android & iOS platform.
  2. Dart side implementation.
  3. Compiling issues & their fixes
Photo by Brett Jordan on Unsplash

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.

  1. 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 :

  1. 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 :

Photo by WanderLabs on Unsplash

Let’s first integrate the receive_sharing_intent plugin in pubspec.yaml file.

We have three screens in this demo.

  1. Home Screen: To fetch receiving files from other apps
  2. User Listing Screen: To select users from the list to share files
  3. 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.

Photo by bruce mars on Unsplash

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

--

--

Jaimil Patel
Flutter Community

Senior Software Developer at Sunflower Solutions | Flutter Developer | Android Developer