To use this API we will need to implement a portion of code both in the host platform (in this case Android) and in Dart using a mechanism called\u00a0Platform Channels<\/a>.<\/p>\n As a first step, we will create the aforementioned Flutter app, allowing users to create simple drawings. It will contain two button controls, one for picking the colour of the paintbrush and the second for clearing the canvas. Of course, the rest of the space will be devoted to the canvas, which will allow user to draw by pressing and moving a finger.<\/p>\n To track user\u2019s gestures, we will use GestureDetector widget, which provides access to\u00a0onPanDown\/Update\/Cancel\/End<\/em>\u00a0callbacks. Each track traversed by a finger will be recorded using\u00a0Path\u00a0<\/em>class from\u00a0dart:ui<\/em>. We will store all tracks with their colours as a list in state class to be able to perform drawing and display the graphic.<\/p>\n To draw to the canvas directly, we will take advantage of\u00a0CustomPainter,\u00a0<\/em>to which all the tracks with their colours will be provided.<\/p>\n Tapping on the change colour button will open the dialogue with\u00a0ColorPicker\u00a0<\/em>from\u00a0flutter_colorpicker<\/em><\/a>\u00a0<\/em>library (using version 0.4.0). It will allow user to change colour while diving deeper into the masterpiece.<\/p>\n As the main topic of this article is related to platform channels, I will not go into further details regarding the implementation but only leave a link to the repo containing the work done until this point:\u00a0https:\/\/github.com\/Dartek12\/flutter_media_store\/tree\/step_1<\/a>.<\/p>\n <\/p>\n Whenever you want to use platform-specific code which was not provided with the Flutter framework or third-party plugin provider, you will have to turn to\u00a0platform channels<\/strong>. It is a system that allows executing Java\/Kotlin on Android or Objective-C\/Swift on iOS, which relies on passing messages to the hosting platform. Communication is done in an asynchronous manner so that your user interface stays responsive.<\/p>\n To send a message to the hosting platform, you will need to create an instance of\u00a0MethodChannel<\/em>\u00a0in dart code, passing its name to the constructor. In corresponding native code, you will also have to register\u00a0MethodChannel<\/em>\u00a0on Android and\u00a0FlutterMethodChannel\u00a0<\/em>on iOS using the same name.<\/p>\n Then you send a message at the Dart side calling\u00a0invokeMethod\u00a0<\/em>with the method name and the list of arguments of\u00a0supported types<\/a>\u00a0and use registered handler at host platform side to handle the message (including calling native APIs) and produce the result.<\/p>\n That was quite a general description, but no worries \u2014 examples are coming!<\/p>\n The journey from our canvas to saving a file to the MediaStore will consist of few steps:<\/p>\n That\u2019s it. Let\u2019s get started!<\/p>\n Using\u00a0PictureRecorder\u00a0<\/em>object we will record everything we do to the canvas so that we can save operations result to the file. We assign global key to the container widget holding the canvas to read its size. Having all of that the next step is to save it to temporary PNG file with the help of\u00a0path_provider<\/em><\/a>,\u00a0path<\/em>\u00a0<\/a>and\u00a0uuid\u00a0<\/em><\/a>which are open source packages:<\/p>\n Let\u2019s create Dart class for encapsulating communication with the host platform containg single method for adding item with file path and name.<\/p>\n It was that easy!<\/p>\n Now comes the toughest part. We will add handlers at Android side of the app. We need to override\u00a0configureFlutterEngine<\/em>\u00a0method in our host activity in order to register method channel:<\/p>\n Now we are ready to implement\u00a0addItem\u00a0<\/em>method. We will use\u00a0content resolver\u00a0<\/em>object to insert content values into the appropriate media store volume, which in result returns URI.<\/p>\n Then we will open output stream to that URI so that we can write contents to it (which will be copied from our temporaral storage created in Flutter).<\/p>\n Beware:\u00a0<\/strong>If\u00a0<\/strong>this is run on Android 9.0 or a lower device, then you will have to request permissions before saving a file to the MediaStore!<\/p>\n Finally we can connect everything. Add button control to the top bar which will invoke previously written code with an example implementation of:<\/p>\n Now we can play a bit with our app and use save button to see if it’s working properly.<\/p>\n <\/p>\n Success! We managed to draw a masterpiece and saved it in MediaStore!<\/p>\n <\/p>\n In this article, we have created a simple Flutter app with extraordinary capabilities. We have learnt how to draw to the canvas, save it to the file and then insert it into MediaStore using the power of platform channels.<\/p>\n As one could notice, for now our platform channel contains public interface for inserting only images and cannot save other types of media. That’s okay for us because it was our intent. But MediaStore is capable of adding media data like video or audio. We can pretty easily extend existing code by adding public interface for inserting those types of media and handling them at Android side to be able to reuse this piece of software in other Flutter apps.<\/p>\n Although we managed all of it by ourselves this time, that does not have to be the case. You can always use\u00a0pigeon\u00a0<\/em><\/a>package, which allows you to generate automatically the code responsible for interaction between Flutter and Host Platform. And if you are interested in the internals and possible performance improvements of platform channels, I strongly recommend reading this great article:\u00a0https:\/\/medium.com\/flutter\/improving-platform-channel-performance-in-flutter-e5b4e5df04af<\/a>.<\/p>\n![\"mobile\"](\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/07\/grafiki_blog_5_Obszar-roboczy-1-kopia-16-1024x530.jpg\")
<\/p>\nApp for drawing a masterpiece on canvas<\/h2>\n
![\"Our](\"https:\/\/miro.medium.com\/max\/700\/1*1vHCPZXEe3w3alI0Yo5CMA.png\")
Calling system API from Dart<\/h2>\n
![\"two](\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/07\/grafiki_blog_5_Obszar-roboczy-1-kopia-17-1024x530.jpg\")
<\/p>\nHow are we going to use MediaStore?<\/h2>\n
\n
Step 1. Saving canvas contents to temporary media file.<\/h3>\n
Future<File> _saveCanvasToTemporaryFile() async {\r\n final recorder = PictureRecorder();\r\n final RenderBox box = _containerKey.currentContext!.findRenderObject() as RenderBox;\r\n final size = box.size;\r\n final rect = Rect.fromLTRB(0, 0, size.width, size.height);\r\n final canvas = Canvas(recorder, rect);\r\n canvas.drawRect(rect, Paint()..color = Colors.white);\r\n _drawOnCanvas(canvas, size: size, paint: _paint, paths: _paths);\r\n final picture = recorder.endRecording();\r\n final image = await picture.toImage(size.width.toInt(), size.height.toInt());\r\n final bytes = await image.toByteData(format: ImageByteFormat.png);\r\n final identifier = Uuid().v4();\r\n final fileName = '$identifier.png';\r\n final directory = await path_provider.getTemporaryDirectory();\r\n final filePath = path.join(directory.path, fileName);\r\n return await File(filePath).writeAsBytes(bytes!.buffer.asUint8List());\r\n}<\/pre>\nStep 2. Passing file path to method channel.<\/h3>\n
class MediaStore {\r\n static const _channel = MethodChannel('flutter_media_store');\r\n\r\n Future<void> addItem({required File file, required String name}) async {\r\n await _channel.invokeMethod('addItem', {'path': file.path, 'name': name});\r\n }\r\n}<\/pre>\nStep 3. Handling file at Android side.<\/h3>\n
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {\r\n super.configureFlutterEngine(flutterEngine)\r\n MethodChannel(\r\n flutterEngine.dartExecutor.binaryMessenger,\r\n \"flutter_media_store\"\r\n ).setMethodCallHandler { call, result ->\r\n when (call.method) {\r\n \"addItem\" -> {\r\n addItem(call.argument(\"path\")!!, call.argument(\"name\")!!)\r\n result.success(null)\r\n }\r\n }\r\n }\r\n}<\/pre>\nprivate fun addItem(path: String, name: String) {\r\n val extension = MimeTypeMap.getFileExtensionFromUrl(path)\r\n val mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension)!!\r\n\r\n val collection = if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {\r\n MediaStore.Images.Media.getContentUri(MediaStore.VOLUME_EXTERNAL_PRIMARY)\r\n } else {\r\n MediaStore.Images.Media.EXTERNAL_CONTENT_URI\r\n }\r\n\r\n val values = ContentValues().apply {\r\n put(MediaStore.Images.Media.DISPLAY_NAME, name)\r\n put(MediaStore.Images.Media.MIME_TYPE, mimeType)\r\n if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {\r\n put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_PICTURES + File.separator + getString(R.string.app_name))\r\n put(MediaStore.Images.Media.IS_PENDING, 1)\r\n }\r\n }\r\n\r\n val resolver = applicationContext.contentResolver\r\n val uri = resolver.insert(collection, values)!!\r\n\r\n try {\r\n resolver.openOutputStream(uri).use { os ->\r\n File(path).inputStream().use { it.copyTo(os!!) }\r\n }\r\n\r\n if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {\r\n values.clear()\r\n values.put(MediaStore.Images.Media.IS_PENDING, 0)\r\n resolver.update(uri, values, null, null)\r\n }\r\n } catch (ex: IOException) {\r\n Log.e(\"MediaStore\", ex.message, ex)\r\n }\r\n}<\/pre>\nLast step<\/h3>\n
void _saveImage() async {\r\n File tempFile = await _saveCanvasToTemporaryFile();\r\n await _saveFileToMediaStore(tempFile);\r\n await tempFile.delete();\r\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('File saved!')));\r\n}<\/pre>\n<\/h1>\n
Results<\/h2>\n
![\"Our](\"https:\/\/miro.medium.com\/max\/700\/1*5pK148KcXk9cIyCtDyNOmw.png\")
![\"Let\u2019s](\"https:\/\/miro.medium.com\/max\/700\/1*JqLcfdPJBLgJOiSx8ZoAWg.png\")
Summary<\/h2>\n