Kuan

September 26, 2022

Input field for images of Flutter, in all platforms

An input field, usually in a form, expects users to either pick an image from the gallery (disk) or take a new photo with a camera on the device. Both options result in an image file waiting to be read. Most modern devices can fulfil both functionalities. Users are certainly expecting it too.

Flutter developers can build this into their application easily with the official package image_picker. This package provides cross-platform handling of taking a picture, and picking single or multiple files from the gallery. There is no Widget provided. It is up to the developers to build GUI to call these APIs. e.g. A dropdown menu to choose taking a photo or picking from gallery.

For web, it is a little bit tricky. If user choose the take a photo option in a mobile browser, a based camera app will take over and let user take the photo. This is inline with native mobile built. But, if the browser is a desktop browser, then users will always presented with the file picker all the time. This was a HTML limitation, not a Flutter restriction.

I worked around this limitation by implementing a camera widget just for the desktop web build. Detecting the web build with `kIsWeb` and `defaultTargetPlatform == TargetPlatform.windows`. Then pop a full screen dialog with a homemade Camera widget with package camera. There I let users capture a photo with the web cam (any cameras that we can acquire by browser API).

For desktop native built. I have no idea which desktop built support a camera.

About Kuan

Web developer building with Flutter, Svelte and JavaScript. Recently fell in love with functional programming.

Malaysian. Proud Sabahan. Ex game developer but still like playing games.

New found hobby is outdoor camping with my love.