In the last post we implemented text messages in the app. Today we’ll be adding support for

Sending attachments (images/videos/files).

Playing videos.

Downloading files.

Emoji keyboard.

Let’s get started.

Start by adding the following dependencies to your pubspec.yaml

file_picker: ^1.4.0+1

emoji_picker: ^0.0.2

video_player: ^0.10.2+1

flutter_downloader: ^1.2.2

downloads_path_provider: ^0.1.0

flushbar: ^1.9.0

Sending Attachments

The first step will be picking the attachment. We had the attachment button in our ChatAppBar . On clicking it, we’ll show a ModalBottomSheet with all three upload options.

Choosing any of the option will open the file picker and let the user choose a file of choice. Once a file is picked, SendAttachmentEvent is triggered.

The GradientSnackBar uses a FlushBar to achieve the gradient effect. I have also replaced previously used Snackbars in the projects with this one.

The ChatBloc receives the SendAttachmentEvent we sent above, and calls the StorageProvider to upload the image.

We’ll also modify our StorageProvider so that it now includes reference to the current time and username while uploading a file.

Reading Attachments

We also need to read the attachments back from the Firestore. Till now our Chat Screen only had support for text messages. Refer my previous post to see how we did that Let’s go ahead and add support for Image, Video and File Messages.

Images are displayed directly.

Videos have a play button which will open a video_player.

Files have a download button which uses flutter_downloader to download the file.

Video Player

And this is how the VideoPlayerWidget looks like. It has a pause/play button and a Seekbar.

File Downloader

To user flutter_downloader you need to define a Provider for android. Define it in your android/app/src/main/AndroidManifest.xml . You can look up iOS specific instructions on the package’s page if you want to.

Add it inside the <application/> tag.

<provider

android:name="vn.hunghd.flutterdownloader.DownloadedFileProvider"

android:authorities="${applicationId}.flutter_downloader.provider"

android:exported="false"

android:grantUriPermissions="true">

<meta-data

android:name="android.support.FILE_PROVIDER_PATHS"

android:resource="@xml/provider_paths"/>

</provider>

Update gradle classpath version in android/build.gradle to 3.3.0

classpath 'com.android.tools.build:gradle:3.3.0'

Also add the permission

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Adding Emoji Keyboard

For emojis we’ll be using emoji_picker plugin. This is how it’ll look like.

Start by creating a new event in ChatEvent.dart

Also add the corresponding state to be delivered to the UI.

And add this to your mapEventToState in ChatBloc .

Modify the InputWidget to make it respond to the State change and also dispatching the ToggleEmojiKeyboardEvent on emoji button click.

We have one small issue though. downloads_path_provider depends on platform which on Android X breaks the google_sign_in package. I’ll try to fix this issue in the next post. For now the Google Sign In is broken.

Hit me up in the comments below or Twitter or Linkedin or Instagram if you have any queries or suggestions or just for a casual tech talk maybe? See you guys in the next one!

Code Changes

#24 Added support for sending attachments

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.

Connect with me on Twitter or Linkedin or Instagram.

Star the Github repository.

Share the series on Twitter.

Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!